클로저(Closure)란 함수와 렉시컬 환경의 조합을 말한다. 자바스크립트는 어휘적 환경(Lexical Environment)을 갖는다. 함수가 생성될 당시에 외부 변수를 기억한 다음, 생성 이후에도 계속해서 접근 가능한 것이다. 외부 함수가 소멸되어도 계속해서 내부 함수가 외부 함수의 변수에 접근할 수 있다.
📍 전역 / 내부 Lexical 환경
먼저 전역 그리고 내부 Lexical 환경의 개념 이해 위주로 알아보겠다. 코드는 top-down 방식으로 실행되기 때문에 위에서부터 순서대로 예시를 살펴보며 이해할 것이다. 코드가 실행되면 스크립트 내에서 선언한 변수들이 먼저 Lexical 환경으로 올라간다.
let one;
one = 1;
function addOne(num) {
console.log(one + num);
}
addOne(5);🔎 첫 번째 Lexical 환경 (=전역 Lexical 환경)
one : 1
addOne : function
변수 one을 선언한 당시에는 초기화가 함께 되지 않아 사용 불가이지만 함수는 선언과 함께 바로 초기화되었기 때문에 사용 가능하다. 이후 바로 다음 라인으로 내려가서 one에 선언 1이 할당되면서 변수도 사용 가능해진다. 여기까지가 전역 Lexical 환경이다.
🔎 두 번째 Lexical 환경 (=내부 Lexical 환경)
num : 5
addOne 함수를 만나면서 매개변수에 5가 들어와 num의 값이 생성된다. 따라서 새로운 lexical 환경이 생긴다.
함수가 호출되는 동안 각각 외부 또는 내부에서 생긴 Lexical 환경이 나타난다. 첫 번째 환경은 외부에서 받은 전역 Lexical 환경이며, 두 번째 환경은 내부 Lexical 환경이다. 내부 환경은 외부 환경의 참조를 받는다. 코드에서 변수를 찾을 때 내부에서 먼저 찾고, 외부 -> 전역 순서로 범위를 넓혀가며 찾아낸다. addOne() 함수 경우에도, 변수 one과 num을 찾기 위해, 먼저 내부에서 num을 찾은 이후 전역인 one에서 찾을 수 있다.
📍 예시 : 3가지의 Lexical 환경
그럼, 이제 좀 더 깊게 들어가서 Lexical 환경이 3번 발생하는 예시를 알아보겠다!
function makeAdder(x) {
return function(y) {
return x + y;
}
}
const add3 = makeAdder(3);
console.log(add3(2));🔎 전역 Lexical 환경
makeAdder : function
add3 : function
최초 실행 시 makeAdder 함수와 변수 add3이 전역 Lexical 환경에 들어간다. 처음에 add3은 초기화가 안되어 실행되지 않지만 makeAdder(3) 라인이 실행되면서 초기화된다. add3은 return하는 함수가 되므로 Lexical 환경에서 비로소 function이 된다.
🔎 makeAdder Lexical 환경
x : 3
makeAdder 함수에 매개변수가 들어가 실행되면서 makeAdder Lexical 환경이 생성되고, 변수 x에 값 3이 들어간다.
🔎 익명함수 Lexical 환경
y : 2
마지막으로 add3(2)를 통해 매개변수 y에 값 2가 들어가면서 익명함수의 Lexical 환경도 생성된다.
각 환경들의 참조 순서는 밑에서부터 위로 진행된다. x + y의 결과를 얻기 위해 익명함수에서 변수 y를 먼저 찾아낸다. 하지만 해당 환경에는 x가 없으므로 참조하는 makeAdder Lexical 환경으로 가서 x를 찾게 된다.
이렇게 해서 클로저(Closure)에 대해 예시를 통해 알아보았다!
코딩앙마의 자바스크립트 중급 강좌 수강 후 정리한 글입니다.
