함수

익명함수와 선언적 함수의 차이점 : 실행 순서

익명함수는 <script> 태그 내부의 내용을 위에서 아래로 읽어 해석하는 반면,
선언적함수는 다른 내용을 읽고 해석하기 전에 먼저 읽고 해석한다.

1. <script>  
2.     callFunction();             // (3)  
3.       
4.     function callFunction() {       // (1)  
5.         alert('First Function');  
6.     }  
7.       
8.     function callFunction() {       // (2)  
9.         alert('Second Function');  
10.     }  
11.       
12. </script>  

위의 코드를 확인해보면 주석에 나온 순서대로 읽게 되며, 결과값은 'Second Function'이 된다. 

1) 선언적 함수

일반적으로 함수를 만드는 방식으로, 함수명이 존재한다.

2) 익명 함수

1. <script>  
2.     var myFunc = function() {  
3.         var str = 'Hello world!!!';  
4.         alert(str);  
5.     }  
6.     myFunc();  
7.       
8.     var diffFunc = myFunc;  
9.     diffFunc();  
10. </script>  

'myFunc()'를 실행하였을 경우와 'diffFunc()'를 실행하였을 경우 같은 결과를 갖는다.

익명 함수를 선언하여 사용할 경우 함수를 호출하는 위치보다 상단에 위치해 있어야만 호출이 가능하다. 

3) 가변인자함수
    - 매개변수가 함수에서 정의된 것보다 많이 입력된 것만 사용
    - 입력된 매개변수를 활용할 수 있도록 함수 구현 가능
    - 매개변수의 개수가 변할 수 있는 함수
    - 정의된 것과 달리 입력된 매개 변수를 모두 활용할 수 있는 함수
    - 모든 함수는 매개 변수를 arguments 배열에 저장함
    - arguments 매개변수의 저장

1. <script>  
2.     function add() {  
3.         var output = '';  
4.           
5.         for(var i=0; i<arguments.length; i++) {  
6.             output += arguments[i] + ' ';  
7.         }  
8.           
9.         return output;  
10.     }  
11.       
12.     var out = add(1, 2, 3, 4, 5);  
13.     alert(out);  
14. </script>  

 
    * 호출한 매개변수 수 만큼의 arguments 배열이 생성되어 사용 가능
      결과값은 '1 2 3 4 5' 가 된다.

4) 자기호출함수
    - 생성과 동시에 실행되는 함수
    - 함수를 다시 호출할 수 없음
    - 최초 한 번의 실행만들 필요로 하는 초기화 코드 부분 등에 사용

1. <script>  
2.     (function() {  
3.         // 실행할 코드로, 생성과 동시에 실행되며, 다시 호출할 수 없다.  
4.     })()  
5. </script>  

5) 콜백함수
    - 함수를 매개변수로 이용하여 콜백 함수를 호출 한다.

1. <script>  
2.     function check(message) {  
3.         var i=0;  
4.           
5.         while(1) {  
6.             if(i > 10) {  
7.                 message();  
8.                 break;  
9.             }  
10.             i++;  
11.         }  
12.     }  
13.       
14.     var message = function() {  
15.         alert('10보다 크다');  
16.     }  
17. </script>  

6) 클로저 (함수를 리턴하는 함수)
    - 종료된 외부 함수의 변수를 참조하는 함수
    - 지역 변수를 남겨두는 현상
 

1. <script>  
2.     function countVisit() {  
3.         var cnt = 0;  
4.           
5.         var plus = function() {  
6.             return count += 1;  
7.         }   
8.           
9.         return plus;  
10.     }  
11.       
12.     var num = countVisit();  
13.     num();  
14.     num();  
15.     num();  
16.       
17.     alert(num());  
18. </script>  

    * 반환되는 plus() 함수 호출 시 처음에는 count값이 0에서 시작하나 그 자체의 값이
      변화하기 때문에 호출하는 횟수에 따라 달라진 count 값을 리턴하게 된다.

      결과값은 4 이다.