[JS] Lexical scope 와 closure 와 this

closure는 함수를 선언하는 과정에서 결정된다. 함수가 생성될 때, 함수와 렉시컬 환경을 기억해 놓는 것이다. 즉, 당시의 외부 변수를 기억하는 것. 

 

여기서 렉시컬이라는 것은, 자바스크립트가 따르고 있는 스코프 모델이다.

자바스크립트는 렉시컬 스코프를 따르는데, 이는 함수가 호출될 때가 아니라 선언될 때, 상위 스코프를 결정하는 규칙이라고 보면 된다.

 

아래 예시를 보자.

let num = 1;

function a() {
  let num = 2;
  b();
}

function b() {
  console.log(num);
}

a();
b();

위 예시에서 결과값이 어떻게 나올까? 

 

정답은 둘다 1이 나온다는 것이다.

a(); // 1
b(); // 1

혹시 a() 의 경우 2가 나올 것이라 예측했을 수도 있다.

 

하지만 렉시컬 스코프라는 개념에 따르면, b() 내부의 name 변수는 b() 함수가 호출되는 시점에 결정나는 것이 아닌, b() 함수가 선언된 상황에서 참조하게 된다. 해당 상황에서 b() 는 window 객체에 선언된 let num = 1을 참조하기 때문에, 이러한 현상이 발생하는 것이다.

 

반면 this는 호출하는 상황에서 호출하는 객체를 가르키는 값으로 지정된다.