본문 바로가기

Front-End: Web/JavaScript

클로져(Closure)

반응형

자바스크립트사 가진 특징이자 Node.js가 높은 효율성을 가지게 해주는 근간.

 

유효 범위 체인

함수 단위의 범위(Function Scope). 전역 변수(a)는 함수 안이나 어느 곳에서든지 사용할 수 있지만, 함수 안에서 선언한 변수(b)는 함수 블록 밖에서 사용할 수 없다.

 

 


 

클로져를 이용한 체인 깨기

클로져?

자신의 범위 밖에 있는 변수에도 접근할 수 있는 함수

위 그림에서 함수 N()는 상위에 있는 변수 a와 b를 사용할 수 있지만, 함수 F()는 함수N()에 있는 변수를 참조할 수 없다.

클로져는 이러한 문제를 해결할 수 있다.

 


 

<예제1: 무기명 함수를 이용한 클로져>

function f() {
    var b = "b";
    return function() {
        return b;
    }
}

함수 f()에 선언된 b는 함수 밖에서 사용될 수 없다. 하지만, 함수에서 반환하는 무기명 함수(=클로져)는 함수f()의 범위와 전역 범위를 동시에 가지고 있다

이처럼 새로운 전역 함수를 정의하여 f()의 반환값으로 저장하면 이 전역 함수는 함수 f()의 범위를 공유한다.

var n = f();
n();	//"b"

<예제2: >

var n;
function f(){
    var b = "b";
    n = function() {
        return b;
    }
}

예제1과 거의 비슷. 함수 f()의 반환값으로 전역 변수 n에 함수를 할당함과 동시에 b를 참조할 수 있게 해준다.

f();
n();	//"b"

<예제3: >

함수가 부모가 반환되더라도 자신의 부모가 가지는 범위와 연결된 것을 유지하면서 클로져가 생성된다.

function f(arg){
    var n = function(){
        return arg;
    }
    arg++;
    return n;
}
var m = f(123);
m();	//124

 

<예제4: >

 

<예제5: >

 

반응형