함수의 다양한 형태

1. 콜백함수

어떤 이벤트나, 특정 시점에 도달됬을 때 시스템에서 호출되는 함수.

대표적인 콜백함수의 사용 예는  이벤트 핸들러 처리이다.

(웹페이지가 로드되거나 키보드가 입력되는 등의 DOM 이벤트가 발생할 경우, 이벤트 핸들러에 콜백 함수가 등록했다면, 콜백 함수는 이벤트가 발생할 때 마다 브라우저에서 실행된다.)

 

 

2. 즉시 실행 함수

함수를 정의함과 동시에 바로 실행하는 함수.

함수를 리터럴 괄호( )로 둘러싸서 만든다.

 

즉시 실행 함수 특징

(1) 외부에서 접근 불가

<script>
    (function () {
    	// 즉시실행함수의 내부에서 정의된 변수는 외부 범위에서 접근이 불가능하다.
    	var str = '코딩하는흑구';
    })();
    
    console.log(str); // throws "Uncaught ReferenceError: str is not defined"
</script>

 

(2) 즉시실행 함수를 변수에 할당할 때, 함수가 담기는 것이 아닌 Return 값만 담게된다.

<script>
    var result = (function () {
        var name = '코딩하는흑구'; 
        return name; 
    })(); 
    // 즉시 결과를 생성한다.
    console.log(result); // '코딩하는흑구'
</script>

 

 

3. 내부 함수

함수 내부에 정의된 함수.

 

내부 함수 특징

(1) 내부 함수에서는 자신을 둘러싼 부모 함수의 변수에 접근이 가능하다.

(2) 내부 함수는 일반적으로 자신이 정의된 부모 함수 내부에서만 호출이 가능하다.

 

    function parent (){
        let a =100;
        let b=100;
        function child (){
            let b=200;

            console.log(a)
            console.log(b)
        };
        child();
    }

    parent();  // (출력값) 100,200
    child();  // index.html:25 Uncaught ReferenceError: child is not defined

하지만 함수 외부에서도 특정 함수 스코프 안에 선언된 내부 함수를 호출할 수 있다. 

부모함수에서 내부 함수를 외부로 리턴하면, 부모 함수 밖에서도 내부 함수를 호출하는 것이 가능하다.

 

    function parent (){
        let a =100;
        let b=100;
        function child (){
            let b=200;
            console.log(a+b)
        };
        return child; 	// 내부함수 외부로 리턴
    }

    parent(); 

    var pp = parent();
    pp();

 

 

4. 함수를 리턴하는 함수

자바스크립트에서는 함수도 일급 객체이므로 일반 값처럼 함수 자체를 리턴할 수 있다.

 

 

baba() 를 사용할 때는 console.log("a")의 결과값만 찍히지만

괄호를 한번 더 적은 baba()() 는 return 안에 있는 함수까지 호출을 한다.