JavaScript (13) # 클로저_Closure

어휘적 환경(Lexical Environment)

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

아래와 같은 코드가 존재하는데, 위에서부터 아래로 어떻게 동작하는지 알아보자

1.

// 👉 현재 코드 실행 위치는 여기! (주석이 위치하는 줄을 의미함)
let one;
one = 1;

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

addOne(5);

📍 Lexical 환경
one : 초기화X <= 사용불가
addOne : funtion <= 사용가능

코드가 실행되면 스크립트 안에서 선언한 변수들이 Lexical 환경에 올라간다.

• let으로 선언한 변수도 호이스팅(Hoisting)으로 인하여 올라간다. 하지만 초기화가 안되어있어서 사용은 불가하다.
• 그에 비하여 함수선언문은 변수와 다르게 바로 초기화되어서 사용이 가능하다.

2.

let one; // 👉 현재 코드 실행 위치는 여기! (주석이 위치하는 줄을 의미함)
one = 1;

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

addOne(5);

📍 Lexical 환경
one : undefined
addOne : funtion

이제는 one 을 사용해도 에러가 나지는 않는다. 값이 undefined 일 뿐이다.

3.

let one; 
one = 1; // 👉 현재 코드 실행 위치는 여기! (주석이 위치하는 줄을 의미함)

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

addOne(5);

📍 Lexical 환경
one : 1
addOne : funtion

one 에 1이 할당되었다.

4.

let one; 
one = 1; 

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

addOne(5); // 👉 현재 코드 실행 위치는 여기! (주석이 위치하는 줄을 의미함)

📍 전역(외부) Lexical 환경
one : 1
addOne : funtion

함수는 이미 초기화되었기 때문에 마지막 라인으로 가고 함수가 실행된다.
그리고 이순간 새로운 Lexical 환경이 만들어진다.

📍 내부 Lexical 환경
num : 5

이곳에는 함수에서 넘겨받은 매개변수나 지역변수들이 저장된다.
따라서 함수가 호출되는 동안 함수에서 만들어진 Lexical 환경과, 외부에서 받은 전역 Lexical 환경 두가지를 갖게된다.

• 내부 Lexical 환경은 외부 Lexical 환경에 대한 참조를 갖는다.
• 지금 이 함수의 외부 Lexical 환경이 전역 Lexical 환경이다.

🙋🏻‍♂️ 코드에서 변수를 찾을 때, 내부 -> 외부 -> 전역 Lexical 환경까지 범위를 넓혀서 찾는다.

• num 은 내부 Lexical에서 찾았지만, one 이 존재하지 않아서, 범위를 넓혀 외부(전역) Lexical에서 찾았다.

클로저(Closure)

• 클로저란 함수와 렉시컬 환경의 조합이다.
• 함수가 생성될 당시의 외부 변수를 기억한다.
• 생성된 이우에도 계속 접근이 가능하다.

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

const add1 = addFunction(3);
console.log(add1(2)); // 5 <= add1 함수가 생성된 이후에도, 상위함수인 addFunction의 x에 접근이 가능하다. ⭐️ 이런것을 클로저라고 한다!! ⭐️