클로저(Closure) 공부하기

클로저란?

• 클로저란 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다.
• 뭔소리인지 모르겠다. 좀 더 친절하고 자세한 설명을 찾아봤다.

const x = 1;

function outerFunc() {
	const x = 10;
    
    function innerFunc() {
    	console.log(x); // 10
    }
    
    innerFunc();
}

outerFunc();

• innerFunc()의 상위 스코프는 outerFunc()의 스코프다.
• 따라서 innerFunc()의 내부에서 자신을 포함하고 있는 외부의 outerFunc()의 x변수에 접근할 수 있다.
• 만약 innerFunc() 함수가 outerFunc()의 내부에서 정의된 함수가 아니라면 innerFunc()를 outerFunc()의 내부에서 호출해도 outerFunc()의 변수에 접근할 수 없다.

const x = 1;

function outerFunc() {
	const x = 10;
    
    innerFunc();
}

function innerFunc() {
    console.log(x); // 1
}	

outerFunc();

• 이러한 현상은 JS는 렉시컬 스코프는 따르는 언어이기 때문.

렉시컬 스코프란?

• JS는 함수를 어디서 호출했는지가 아니라 함수를 어디에 정의했는지에 따라 상위 스코프를 결정하는데, 이를 렉시컬 스코프라고 한다.
• 상위 스코프에 대한 참조는 함수 정의가 평가되는 시점에 함수가 정의된 환경에 의해 결정된다.

그래서 클로저란?

const x = 1;

function outer() {
	const x = 10;
    const inner = function() {
    	console.log(x); 
    }
    return inner;
}

const innerFunc = outer();
innerFunc(); // 10

• outer함수가 호출되며 inner를 리턴하고 끝나서 outer함수 안에 있는 x(10)은 사라지지만, innerFunc를 실행하면 console.log의 값은 10
• 이처럼 외부 함수보다 내부 함수가 더 오래 유지되는 경우 내부 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있다.
• 이러한 내부 함수(중첩함수)를 클로저라고 한다.