자바스크립트 - 렉시컬 스코프(lexical scope) 빠르게 알아보기

모던 자바스크립트 Deep Dive 예시코드 참고

자바스크립트에서 렉시컬 스코프는 "함수가 어디서 호출되는지"가 아니라 "함수가 어디서 정의되었는지"에 따라 상위 스코프가 결정되는 것을 말한다.

1. 함수의 위치에 따른 스코프 차이

먼저 첫 번째 코드를 보면:

const x = 1;

function outerFunc() {
  const x = 10;
  innerFunc();
}

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

outerFunc(); // 출력결과: 1

이 코드에서 함수 innerFunc는 전역에서 정의되었다. 따라서 innerFunc의 상위 스코프는 전역이다.
innerFunc가 outerFunc 내부에서 호출되더라도, innerFunc는 전역 변수 x의 값인 1을 출력한다.

2. 중첩 함수의 렉시컬 스코프

두 번째 코드를 살펴보면:

const x = 1;

function outerFunc() {
  const x = 10;
  const innerFunc = () => {
    console.log(x);
  }
  innerFunc();
}

outerFunc(); // 출력결과: 10

이번에는 innerFunc가 outerFunc 내부에서 정의되었다. 렉시컬 스코프의 규칙에 따라, innerFunc의 상위 스코프는 자신이 정의된 위치인 outerFunc의 스코프가 된다. 따라서 innerFunc는 outerFunc의 지역 변수 x값인 10을 참조한다.

3. 함수의 호출 위치와 렉시컬 스코프

마지막 예제를 보면:

const x = 1;

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

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

foo(); // 출력: 1
bar(); // 출력: 1

이 예제에서 bar 함수는 전역에서 정의되었다. bar가 foo 내부에서 호출되든, 전역에서 직접 호출되든 상관없이, bar의 상위 스코프는 항상 전역 스코프이다. 따라서 두 경우 모두 전역 변수 x의 값인 1을 출력한다.

핵심 정리

렉시컬 스코프는 함수를 어디서 호출하는지가 아니라, 어디에 선언하는지에 따라 결정됨.

중첩 함수의 경우, 상위 스코프는 함수가 정의된 위치의 스코프가 됨.

전역에서 정의된 함수의 상위 스코프는 항상 전역 스코프.

결론

렉시컬 스코프란? 이라고 물어본다면
함수가 선언된 위치에 따라 상위 스코프가 결정되는 것!
이는 함수가 호출된 위치와는 무관하게 함수가 정의된 위치에서 상위 스코프가 고정적으로 결정됨!