[JS] 렉시컬 스코프(Lexical Scope)

📖 렉시컬 스코프(Lexical Scope)란?

렉시컬 스코프(Lexical Scope)는 함수를 어디서 호출했는지가 아니라, 코드상에서 어디에 선언했는지에 따라 그 함수의 스코프(변수 유효 범위)가 결정되는 방식을 말한다. 코드를 작성할 때 스코프가 확정된다고 하여 정적 스코프(Static Scope)라고도 부른다.

📌 주요 특성

• 선언 위치 기준: 함수가 실행되는 위치(Call Stack)는 스코프 결정에 아무런 영향을 주지 않습니다. 오직 소스 코드 내에서 함수가 작성된 물리적 위치만이 상위 스코프를 결정한다.
• 정적 결정 (Static Determination): 코드가 컴파일(또는 파싱)되는 시점에 스코프가 미리 확정된다. 따라서 실행 결과를 예측하기가 매우 쉽고 안정적이다.
• 스코프 체인 (Scope Chain): 특정 스코프 내에서 변수를 찾지 못하면, 선언된 위치를 기준으로 바로 바깥쪽(상위) 스코프로 이동하여 변수를 탐색한다. 이 탐색은 전역(Global) 스코프에 도달할 때까지 이어진다.
• 클로저(Closure)의 기반: 함수가 자신의 밖에서 선언된 변수에 접근할 수 있고, 그 함수가 외부로 반환된 후에도 자신이 선언되었을 당시의 환경(스코프)을 기억하는 '클로저' 현상은 렉시컬 스코프가 있기 때문에 가능하다.

💻 예시

let x = 1;

function foo() {
  let x = 10;
  bar(); // 여기서 호출됨
}

function bar() {
  console.log(x); // 여기서 x는 무엇일까?
}

foo(); 

위 코드를 실행하면 10이 출력된다고 생각할 수 있지만 실제로는 1이 출력된다.
코드가 실행되는 순서를 살펴보면 왜 이런 결과가 나오는지 확인할 수 있다.

💡 코드 실행 순서

1. bar 함수는 foo 함수 내부에서 호출되었다. (동적 스코프라면 호출된 환경을 따라가서 10이 출력될 것이다.)
2. 하지만 bar 함수가 선언된 위치는 전역(Global)이다.
3. 렉시컬 스코프를 따르기 때문에 bar 함수의 상위 스코프는 자신이 선언된 '전역 스코프'가 된다.
4. 따라서 bar 함수 내의 console.log(x)는 전역 변수 x의 값인 1을 참조하게 된다.