클로져에 대해 이해하기

클로져(Closure)

 

MDN에서는 클로져를 내부함수가 참조하는 외부함수의 지역변수가 외부함수에 의해 내부함수가 반환된 이후에도 life-cycle이 유지되는 것을 의미한다. 라고 정의했습니다. 여기서 클로져는 스코프와 밀접한 관계를 가지고 있습니다. 스코프란 함수의 유효범위라는 것을 알고 있으실 겁니다. 클로져는 이러한 함수 내부에서 생성된 데이터와 스코프로 인해 발생하는 특수한 현상 혹은 상태를 말합니다. 

클로져에 대해 알아보며 특성과 장점들을 알아보겠습니다.

• 접근 권한 제어
• 지역변수 보호
• 데이터 보존 및 활용

function a(){

var x = 1;

function b(){

console.log(x);

} // 변수 x 접근 가능

b();

console.log(x);  

} // 변수 x 접근 가능

a(); 

console.log(x); // 접근 불가능

위의 코드에서 변수 x 는 a() 함수 내부와 b() 함수 내부에서는 접근이 가능하지만 외부에서는 접근이 불가능 합니다. 

function a(){

var x = 1;

return function b(){

console.log(x);

}

}

var c = a();

c();

이전의 코드를 위처럼 변경하면 외부에서도 변수 x 에 접근이 가능합니다. a() 함수에서 b()함수를 반환하고 이것을 변수 c 에서 받아줍니다. 

클로져에 의해 변수 x 는 1이라는 값이 담겨 외부에서도 변수 x를 참조하여 사용할 수 있게 해줍니다. 하지만 외부에서 값을 참조하여 사용할 수 있을 뿐, 이 값을 변경하는것은 불가능 합니다. 

function makeAdder(x) {

  return function(y) {

    return x + y;

  };

}

var add5 = makeAdder(5);

var add10 = makeAdder(10);

console.log(add5(2));  // 7

console.log(add10(2)); // 12

위의 코드를 실행해보면 makeAdder(5), makeAdder(10) 모두 클로져로 각각 변수 x에 x = 5, x = 10 의 값을 가지고 있습니다. 이렇게 서로 다른 클로져를 이용해서 값을 활용할 수도 있습니다.