Lexical Scope

렉시컬 스코프란 변수의 상위스코프가 런타임이 아닌 컴파일 단계에서 결정되는 것을 말한다. 쉽게 말해 변수 실행시가 아닌 선언시에 상위 스코프가 결정되는 것이다.

간단한 예시를 들어 이해해보자.

let x = 1;

function foo() {
  let x = 10;
  bar();
}

function bar() {
  console.log(x);
}

foo(); 
bar(); 

위 코드의 실행결과는 각각 1, 1이다. 한번 코드를 살펴보자.

자바스크립트는 변수 선언시에 상위스코프가 결정된다.

// 최상위 전역 실행 컨텍스트
let x;

function foo(){}
function bar(){}

// foo 실행 컨텍스트
let x;

최초 소스코드를 평가하면서 변수/함수의 선언부를 먼저 실행한다. 따라서, 이때 전역 실행 컨텍스트에 저장되는 정보는 위와 같다.

이후 런타임에서 실제로 코드를 실행하는 순간을 생각해보자.

foo 함수안에서 bar함수를 실행해야 하는데 foo 실행 컨텍스트에 bar함수 선언에 대한 정보가 없으므로 상위 스코프에서 생성된 전역 실행 컨텍스트를 참조한다.

이때 전역 실행컨텍스트에 저장된 bar 함수가 실행시 필요한 변수 x는 전역으로 선언된 x이다. 따라서, foo 함수안에서 선언된 x값인 10이 아닌 1이 출력되는 것이다.

쉽게 말해, bar 함수가 선언되는 시점에 참조할수 있는 x의 값은 전역으로 선언된 x값인 1이기 때문에 1이 출력되는 것이다.

만약 foo안의 bar를 실행했을때 10이 출력되게 하고싶다면?

let x = 1;

function foo() {
  let x = 10;
  function bar() {
    console.log(x);
  }
  bar();
}

function bar() {
  console.log(x);
}

foo(); // 10
bar(); // 1

이렇게 하면 foo 함수에서 실행되는 bar는 10을, 전역에서 실행되는 bar는 1을 출력한다.