자바스크립트 클로저란 무엇인가?

자바스크립트 클로저란 무엇인가? 

 

요약

클로저란, 함수의 컨택스트가 사라져도 해당 컨택스트에 존재하던 변수에 접근할 수 있는 함수를 말한다.

 

 

예시 코드

function first() {
	let count = 0;
    return function second() {
    	console.log(count);
        count += 1;
      	}
  }
  
  const closer = first();
  
  closer(); // 0 
  closer(); // 1
  closer(); // 2

 

설명

위의 코드에서 closer 라는 상수에 의해 first 라는 함수가 실행되면 second 라는 함수를 리턴하고 가비지 컬렉터에 의해 제거된다.

그 말은 즉슨 first 라는 함수 스코프에 존재하던 count 라는 변수 또한, 제거되었음을 나타낸다.

하지만, closer() 를 실행해보면 알 수 있듯이, second() 라는 함수는 이미 제거된 first 함수 스코프에 존재하던 count 라는 변수를 가져다가 사용하고 있다. 

이처럼, 이미 제거된 스코프에 존재하는 변수를 참조해 사용하는 함수를 클로저라고 부른다.

 

원리

그럼 어떻게 second() 라는 함수는 first 함수에 존재하던 count 라는 변수에 접근하여 그 값을 사용 할 수 있는 것일까?

그 답은 활성객체(active object)에 있다.

second 라는 함수는 먼저, 자신의 스코프에 count 라는 변수가 존재하는지 확인한다.

위의 예시에서 count 라는 변수는 second 함수 스코프에 존재하지 않으므로 자바스크립트는

second 함수의 outer 함수인 first 함수의 scope 를 가리키는 활성객체를 통해 first 함수의 scope 에 접근하여 count 라는 변수가 존재하는지 확인한다.

 

즉, first 함수는 가비지컬렉터에 의해 제거되었더라도 second 함수에 바인딩되어있는 active object 를 통해 first 함수의 스코프에 접근하여 count 라는 변수를 사용 할 수 있는 것이다.

 

용도

클로저를 사용하는 가장 큰 이유는 정보의 캡슐화이다.

클로저 변수는 전역에서 접근 할 수 없기 때문에 정보를 캡슐화 해서 보다 안전하게 정보를 사용할 수 있다는 장점이 있다.

 

클로저는 굉장히 우아한 태크닉이며,

개인적으로 클로저는 자바스크립트의 꽃이라고 생각한다.