오늘은 이전 포스팅에 이어서 기초 문법에 사용되는 함수에 대해서 포스팅해보려 합니다.
■ JAVA Script 함수
javaScript에서 함수는 기본 구성 요소 중 하나입니다.
javaScript의 함수는 작업을 수행하거나 값을 계산하는 명령문의 집합인 procedure(프로시저)와 비슷하지만, procedure가 함수로 쓰이려면 입력을 반드시 받아야 하고 입력과 명확한 관계가 있는 출력을 반환해야 합니다. 즉, 함수를 사용하려면 함수를 호출할 스코프 내에서 함수를 정의해야 합니다.
■ 함수의 선언 방식
javaScript에서 함수는 java와 동일하게 다양한 선언 방식이 있습니다.
java와 다른 점은 함수 표현식으로 function을 사용해서 정의합니다.
함수 정의는 다음과 같은 키워드로 구성되어 있습니다.
- 함수의 이름
- 함수의 매개변수들, 괄호로 묶고 쉼표로 구분합니다.
- 함수를 정의하는 javaScript문으로 중괄호로 묶습니다.
그럼 함수의 선언 방식에 대해서 알아봅시다.
(선언 방식은 구문과 함께 예제 코드를 통해서도 알아봅시다.)
1 ) 함수 이름이 있는 경우
일반 함수라고 하며 함수 변수인 (함수이름())가 정의됩니다. 또한 자바스크립트를 처음 읽을 때만 해석됩니다.
function 함수이름() {
함수몸체;
}
<예제 1>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>functionEx</title>
<script type="text/javascript">
function test() {
alert("안녕하세요.");
}
</script>
</head>
<body>
<p>인라인 자바스크립트</p>
<button type="button" onclick="alert('hello')">버튼을 누르세요.</button>
<button type="button" onclick="test()">버튼을 누르세요.</button>
</body>
</html>
2 ) 함수 이름이 없는 경우(무명 함수)
무명함수라고 하며 이름이 없기 때문에, 접근할 때 비로소 해석되고, 실행될 때 함수 몸체가 해석됩니다.
function () {
함수몸체;
};
<예제 2>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>anno_func</title>
<script type="text/javascript">
var plusTen = function() { //익명함수
var num1= prompt("숫자를 입력하세요.","");
alert(Number(num1)+10);
};
/* alert(typeof(plusTen));
alert(plusTen); */
plusTen();//변수를 통해 익명함수호출
var add=plusTen;
add();//또 다른 변수 add에 익명함수를 저장해서 호출 가능
</script>
</head>
<body>
</body>
</html>
3 ) 매개변수가 있는 함수
function 함수이름(매개변수) {
함수몸체;
}
<예제 3>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>para_func</title>
<script type="text/javascript">
function printTen(x) {//매개변수가 있는 함수
return x+10;
}
alert(printTen(3));
</script>
</head>
<body>
</body>
</html>
4 ) 내부 함수(중첩 함수)
중첩 함수는 다른 함수 내부에서 정의되는 함수를 의미합니다.
특정 함수에서만 사용할 기능이라면 외부에 노출시키지 않고 내부에 정의해서 사용할 수 있고, 지역 변수의 스코프가 함수 단위로 이루어지기 때문에 내부 함수에서는 내부에 정의된 변수를 참조할 수 있습니다.
function 외부함수() {
function 내부함수1() {//실행할 문장}
function 내부함수2() {//실행할 문장}
//실행할 문장
}
<예제 4>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>closure1</title>
<script type="text/javascript">
//외부함수
function countVisit() {
var count = 0;
//내부함수
var plus = function() {
return count+=1;
};
//plus변수는 익명내부함수의 모든 코드를 기억하고 있다.
alert(plus);
return plus;
}
var num = countVisit();
num();//+1
num();//+1
num();//+1
alert(num());// 결과 4
</script>
</head>
<body>
</body>
</html>
5 ) 자기호출 함수
자기 호출 함수는 생성과 동시에 실행되는 함수입니다.
최초 한번의 실행만을 필요로 하는 초기화 코드 부분등에 사용되는데, 자기 호출 함수는 익명 함수이기 때문에 다시 호출할 수 없습니다.
( function() {
//실행할 코드
}) ()
<예제 5>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//자기호출함수는 함수를 생성하자마자 스스로 호출되어져 사용됨.
( function() {
alert('자기호출함수');
})();
</script>
</head>
<body>
</body>
</html>
6 ) 콜백 함수(Callback)
콜백 함수는 파라미터로 함수를 전달받아, 함수의 내부에서 실행하는 함수입니다.
기초 문법에서 자주 사용되는 함수는 객체 자료형 중 하나이기 때문에 매개변수로 사용이 가능합니다.
즉, 콜백 함수는 함수를 매개변수로 전달하는 함수입니다.
<예제 6>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>callbackFunc</title>
<script type="text/javascript">
//callback Function은 함수를 매개변수로 사용하는 함수를 말한다. 또한 callback Function은 클로저의 일종이다.
//비동기(Asynchronous)방식의 함수로 사용되며, 특징은 함수 속에서 또 다시 다른 함수를 call한다.
function check(message) {
alert(message);
var i = 0;
var sum= 0;
while (true) {
i++;
sum += i;
if (sum > 20) {
message();
break;
}
}
}
check(function () { //check(함수 (){}); 환경을 기억하는 클로져 함수
alert('합이 20을 넘었습니다.');
});
</script>
</head>
<body>
</body>
</html>
위 예제 코드에서 말한 클로저(Closure)란?
함수를 리턴값으로 사용하는 원리를 활용해 클로저라는 기법을 구사할 수 있습니다.
클로저는 javaScript의 함수 중첩 기법 내에서, 내부함수가 외부함수의 멤버에 접근할 수 있으나, 외부함수는 내부함수의 멤버에 접근할 수 없는 특징을 보입니다.
이는 내부 함수의 변수에 대해 일종의 캡슐화를 제공하는데, 이런 특징을 살려 내부함수를 호출하여 이미 종료된 외부함수의 지역변수와 같은 멤버들을 활용할 수 있습니다.
이렇게 되면 내부 함수가 외부 함수의 수명을 초과하여 생존하게 되는 것과 같은 결과를 초래하게 되는데,
클로저는 내부함수가 어떻게든 외부 함수 범위 밖의 모든 범위에서 사용 가능해지면 생성됩니다.
단, 이때 내, 외부함수의 모든 환경을 메모리가 기억하고 있기 때문에 메모리 소모가 다소 많아집니다.
지금까지 함수 활용법에 대해서 알아봤습니다.
그럼 기본 문법을 활용해서 연습 문제로 간단한 계산기를 만드는데, java에서 switch문을 기억하시나요?
연습 문제에 활용해 봅시다.
<연습 문제>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>myCalc</title>
<script type="text/javascript">
function calc(type) {
var x=Number(document.getElementById("input1").value);
var y=Number(document.getElementById("input2").value);
var c;
switch (type) {
case 1:
c = Math.sin((x * Math.PI) / 180.0);
break;
case 2:
c = Math.cos((x * Math.PI) / 180.0);
break;
case 3:
c = Math.tan((x * Math.PI) / 180.0);
break;
case 4:
c = Math.log(x);
case 5:
c = x+y;
break;
case 6:
c = x-y;
break;
case 7:
c = x*y;
break;
case 8:
c = x/y;
break;
default:
break;
}
document.getElementById("output").value =c;
}
function reset() {
document.getElementById("output").value ="";
}
</script>
</head>
<body>
<table border="1">
<tr>
<td align="center"><h3>전자 계산기</h3></td>
<tr>
<td>첫번째 값 : <input type="text" id="input1"></td>
</tr>
<tr>
<td>두번째 값 : <input type="text" id="input2"></td>
</tr>
<tr>
<td>결과 : <input type="text" id="output"></td>
</tr>
<tr>
<td>
<input type="button" id="sin" value="sin" onclick="calc(1)">
<input type="button" id="cos" value="cos" onclick="calc(2)">
<input type="button" id="tan" value="tan" onclick="calc(3)">
<input type="button" id="Log" value="Log" onclick="calc(4)">
<input type="button" id="+" value="+" onclick="calc(5)">
<input type="button" id="-" value="-" onclick="calc(6)">
<input type="button" id="*" value="*" onclick="calc(7)">
<input type="button" id="/" value="/" onclick="calc(8)">
<input type="reset" id="C" value="C" onclick="reset()">
</td>
</tr>
</table>
</body>
</html>
마치며
오늘은 JAVA Script 함수에 대해서 알아봤습니다.
다음 포스팅 [DOM]으로 뵙겠습니다.
'[ Script ] > JAVA Script' 카테고리의 다른 글
| [ JAVA Script ] Mobile Web UI구현 (0) | 2023.02.28 |
|---|---|
| [ JAVA Script ] Ajax (0) | 2023.02.27 |
| [ JAVA Script ] jQuery (0) | 2023.02.25 |
| [ JAVA Script ] DOM (0) | 2023.02.24 |
| [ JAVA Script ] 기초 문법 (0) | 2023.02.22 |
