// #1 ====> 해당 위치에서의 Lexical
let one; // #2 ====> 해당 위치에서의 Lexical
one = 1; // #3 ====> 해당 위치에서의 Lexical
function addOne(num) {
console.log(one + num);
}
addOne(5); // #4 ====> 해당 위치에서의 Lexical
#1 위치에서의 Lexical
[ Lexical 환경 ] : 전역
one : 초기화x (사용불가)
addOne : function (사용가능)
#2 위치에서의 Lexical
[ Lexical 환경 ] : 전역
one : undefined
addOne : function
#3 위치에서의 Lexical
[ Lexical 환경 ] : 전역
one : 1
addOne : function
#4 위치에서의 Lexical
[ Lexical 환경 ] : 내부
num : 5
(매게변수와 지역변수가 저장)
함수가 호출되는 동안 함수에서 만들어진 내부 Lexical 환경과 외부에서 받은 전역 Lexical 환경 두 개를 가지게 됩니다. 내부 Lexical 환경은 외부 Lexical 환경에 대한 참조를 갖습니다. 지금은 외부 Lexical 환경이 전역 Lexical 환경입니다.
코드에서 변수를 찾을 때 내부에서 찾고 없으면 외부, 거기에도 없으면 전역 Lexical 환경까지 범위를 넓히면서 찾습니다.
// #1 ====> 해당 위치에서의 Lexical
function makeAdder(x) {
return function(y) {
return x + y;
}
}
const add3 = makeAdder(3); // #2 ====> 해당 위치에서의 Lexical
console.log(add3(2)); // #3 ====> 해당 위치에서의 Lexical --> Closure
//-> 5
const add10 = makeAdder(10); // #4 ====> 해당 위치에서의 Lexical
console.log(add10(5)); // #5 ====> 해당 위치에서의 Lexical --> Closure
// -> 15
console.log(add3(1)); // --> Closure
// -> 4
#1 위치에서의 Lexical
[ Lexical 환경 ] : 전역
makeAdder : function (사용가능)
add3 : 초기화x (사용불가)
#2 위치에서의 Lexical
[ Lexical 환경 ] : makeAdder
x : 3
#3 위치에서의 Lexical
[ Lexical 환경 ] : 익명함수=add3
y : 2
#4 위치에서의 Lexical
[ Lexical 환경 ] : makeAdder
x : 10
#5 위치에서의 Lexical
[ Lexical 환경 ] : 익명함수=add10
y : 5
익명함수 function(y) { return x + y; }
에서 y를 가지고 있고 상위함수인 makeAdder 의 x에 접근이 가능하다.
그리고 중요한 부분인 add3 함수가 생성된 이후에도 상위함수인 makeAdder의 x에 접근이 가능하다. 이런 것을 Closure 하고 합니다.
Closure란 함수와 그 함수의 렉시컬 환경의 조합, 함수가 생성될 당시의 외부 변수를 기업하고, 생성 이후에도 계속 접근이 가능이 가능한 기능이다.
( add3 함수와 그 함수의 렉시컬 환경의 조합 )
( add10 함수와 그 함수의 렉시컬 환경의 조합 )