[JS] 자바스크립트 중급강좌 (feat. 코딩앙마) - 클로저(Closure)

1. 어휘적 환경 (Lexical Environment)

자바스크립트는 어휘적 환경을 갖는다.

let one;
one = 1;

function addOne(num) {
	console.log(one + num);  
}
addOne(5);

위의 코드를 순서대로 어떻게 동작하는지 보도록 하자.

• 스크립트 내에서 선언한 변수들이 Lexical 환경에 올라가게 된다.
• let으로 선언한 변수는 hoisting이 된다. 초기화가 되지 않았기 때문에 사용은 불가능하다.
• 함수 선언문은 변수와 달리 바로 초기화가 되기 때문에 위치에 상관없이 사용이 가능하다.
• 하지만 변수에 할당한 함수 선언문은 다음과 같이 사용이 불가능하다.
  
• let one;을 만나면서 할당은 되어있지 않기 때문에 초기값 undefined을 갖게 되고 사용해도 에러는 발생하지 않는다.
  
• 마지막 라인으로 가면서 함수가 실행되고 새로운 Lexical 환경이 생성된다.
• 여기에는 함수가 받은 매개변수와 지역변수가 저장된다.
  
• 이와 같이 함수 내부 Lexical 환경과 전역 Lexical 환경이 나눠지게 되고, 내부 Lexical 환경은 전역 Lexical 환경을 참조하게 된다.
• 원래는 내부 -> 외부 -> 전역 순으로 진행
• 코드에서 one과 num은 먼저 내부 Lexical에서 찾는다. num은 찾았지만 one이 없다. 그러면 외부로 넓혀서 찾게 된다. 전역 Lexical 환경에 one이라는 변수를 찾았기 때문에 사용이 가능하다.

2. 예제

function makeAdder(x) {
	return function(y) {
    	return x + y;  
    }
}

const add3 = makeAdder(3);   // (1)
console.log(add3(2));   // (2)

위 코드를 최초 실행시 전역 Lexical 환경에는 다음과 같이 들어갈 것이다.

makeAdder: function
add3: 초기화X

이후 (1)번 문장이 실행되게 되면 makeAdder가 실행되면서 Lexical 환경이 생성된다.
해당 Lexical 환경에는 전달받은 x인 3이 들어가게 될 것이다.

또한, 해당 문장이 실행되면서 add3에는 function이 할당되기 때문에 전역 Lexical 환경에서 다음과 같이 수정된다.

makeAdder: function
add3: function

이제 마지막으로 (2)번 문장이 실행하게 되면 add3이라는 함수가 실행되게 되는데 또다른 Lexical 환경이 생성된다. 이번에는 y라는 매개변수를 받았기 때문에 2라는 y가 저장된다.

이제 x + y를 실행한다. 처음에는 맨 마지막에 생성된 Lexical 환경에서 찾을 것이다. y는 있는데 x가 없으니 참조하는 외부 Lexical로 넘어가서 x를 찾고 계산을 하게 된다.

3. 결론

function makeAdder(x) {
	return function(y) {   // y를 가지고 있고 상위함수인 makeAdder의 x에 접근 가능하다
    	return x + y;  
    }
}

const add3 = makeAdder(3);
console.log(add3(2));   // 5
// add3 함수가 생성된 이후에도 상위함수인 makeAdder의 x에 접근이 가능하다.

const add10 = makeAdder(10);
console.log(add10(5));  // 15
console.log(add3(1));  // 4

Closure는 함수와 렉시컬 환경의 조합을 의미한다. 함수가 생성될 당시의 외부 변수를 기억하고 생성 이후에도 계속 접근이 가능한 것을 말한다.

(해당 포스팅의 내용은 유튜브 코딩앙마님의 영상을 참고했습니다)
Youtube: https://www.youtube.com/watch?v=4_WLS9Lj6n4