[JavaScript] 렉시컬 스코프(Lexical scope) 알아보기

이번 글에서는 렉시컬 스코프가 무엇이고,

자바스크립트에서 어떻게 동작하는지 정리해보려고 한다.

 

🧐 스코프란 무엇일까?

스코프(Scope)는 변수나 함수에 접근할 수 있는 유효 범위를 의미한다.

자바스크립트의 모든 변수는 자신만의 유효 범위를 가지며,

이 범위를 결정하는 규칙이 바로 렉시컬 스코프이다.

 

스코프는 크게 두 가지로 나눌 수 있다.

• 전역 스코프 (Global Scope): 코드 어디에서든 접근할 수 있는 가장 바깥 범위
• 지역 스코프 (Local Scope): 함수나 블록({ }) 내부에 선언되어 그 안에서만 유효한 범위
  • 함수 스코프 (Function Scope): 함수 내에서만 유효 (var)
  • 블록 스코프 (Block Scope): { } 블록 내에서만 유효 (let, const)

const globalName = 'Alice'; // 전역 스코프

function sayHello() {
  const localName = 'Bob'; // 지역 스코프 (함수 스코프)
  console.log(`Hello, ${globalName}`); // ✅ 전역 변수 접근 가능
  console.log(`Hello, ${localName}`); // ✅ 지역 변수 접근 가능
}

sayHello();

// 함수 스코프 밖에서는 지역 변수에 접근할 수 없음
console.log(localName); // ReferenceError: localName is not defined

 

💡 주의: var는 블록 스코프를 무시한다.

→ 블록(if, for) 안에서 선언해도 바깥에서 접근 가능

var 키워드와 관련된 내용은 해당 글을 참고

if (true) {
  var x = 10;  // 함수 스코프
  let y = 20;  // 블록 스코프
}

console.log(x); // 10
console.log(y); // ReferenceError

 

🗺️ 렉시컬 스코프란?

렉시컬 스코프(Lexical Scope)는

코드가 작성된 위치(정의된 위치)에 따라 스코프가 결정되는 규칙을 의미한다.

 

렉시컬 스코프는 코드가 실행되기 전, 코드를 작성하고 분석하는 단계에서

이미 정적으로(Static) 결정되기 때문에 정적 스코프(Static Scope)라고 불리기도 한다.

 

다시 말해서 코드가 어디서 호출되는지가 아니라

어디서 정의되었는지가 중요하다라는 의미이다.

 

🏠 렉시컬 스코프 예시

• 함수 = 집: 각각의 함수는 독립된 집
• 내부 스코프 = 우리 집 안: 우리 집에서는 집 안의 물건(내부 변수)을 마음대로 보거나 쓸 수 있음
• 외부 스코프 = 우리 동네: 우리 집 밖으로 나가면 우리 동네(외부 스코프)에 있는 가게, 공원(외부 변수)를 보거나 이용할 수 있음
• 규칙: 나는 다른 사람 집 안(내부 스코프)을 마음대로 볼 수 없음

const neighborhood = '우리 동네'; // 외부 스코프

function myHouse() {
  const myRoom = '내 방'; // 내부 스코프

  function lookAround() {
    const desk = '내 책상';
    console.log(desk); // '내 책상' (자기 자신의 변수)
    console.log(myRoom); // '내 방' (외부 함수 변수)
    console.log(neighborhood); // '우리 동네' (전역 변수)
  }

  lookAround();
}

myHouse();

// 밖에서는 집 안을 마음대로 볼 수 없음
console.log(myRoom); // ReferenceError: myRoom is not defined

 

🏛️ 렉시컬 스코프 vs 렉시컬 환경

렉시컬 스코프와 렉시컬 환경이 같은 개념이라고 오해하기 쉬운데

둘을 구분하면 이해가 훨씬 쉬워진다.

• 스코프 (Scope)
  변수의 유효 범위에 대한 추상적인 규칙이자 원칙
• 렉시컬 환경 (Lexical Environment)
  스코프라는 규칙을 실제로 구현하기 위해 엔진이 사용하는 구체적인 객체

즉, 자바스크립트 엔진은 스코프 규칙을 지키기 위해서 렉시컬 환경이라는 도구를 사용한다.

렉시컬 환경 객체는 두 가지 주요 요소로 구성된다.

1. 환경 레코드 (Environment Record)
   현재 스코프에 속한 변수와 함수 식별자를 기록하는 내부 구조
2. 외부 렉시컬 환경 참조 (Outer Lexical Environment Reference)
   바깥 스코프(부모 렉시컬 환경)를 가리키는 참조
   → 이 참조가 스코프 체인(Scope Chain)을 형성함

 

🕵️‍♂️ 엔진은 변수를 어떻게 찾을까?

자바스크립트 엔진이 변수를 찾는 과정은 스코프 체인을 통해 이루어진다.

 

🔁 변수 참조 과정

1. 현재 실행 중인 코드의 렉시컬 환경에서 변수를 찾는다. (환경 레코드 탐색)
2. 만약 없으면, 외부 렉시컬 환경 참조를 따라 상위 스코프로 이동한다.
3. 상위 스코프의 렉시컬 환경에서 다시 변수를 찾는다.
4. 이 과정을 계속 반복하다가 전역 스코프까지 도달한다.
5. 전역 스코프에서도 변수를 찾지 못하면 ReferenceError를 발생시킨다.

내가 만듬

위 코드에서 innerFunc가 globalVar를 찾는 과정은 스코프 체인을 명확하게 보여준다.

이처럼 내부 스코프에서 시작해 외부 스코프로 한 단계씩 올라가며 변수를 찾는 과정을

스코프 체이닝(Scope Chaining)이라고 한다.

 

📌 렉시컬 스코프와 this의 차이

• 렉시컬 스코프: 정의된 위치를 기준으로 변수가 결정됨
• this: 호출된 방식에 따라 동적으로 결정됨

const obj = {
  name: 'Alice',
  printName: function() {
    console.log(this.name); // 호출한 객체에 따라 달라짐
  }
};

function outer() {
  const text = 'Hello';
  function inner() {
    console.log(text); // 정의된 위치 기준 (렉시컬 스코프)
  }
  inner();
}

구분	렉시컬 스코프	this
결정 시점	코드 작성(정의) 위치	함수 호출 방식
특징	정적(변하지 않음)	동적(호출 맥락에 따라 달라짐)
예시	외부 변수 참조	객체 메서드 호출 시 객체 참조

 

✨ 정리

• 렉시컬 스코프: 코드가 작성된 위치에 따라 변수의 유효 범위가 결정되는 정적 규칙
• 렉시컬 환경: 엔진이 이 규칙을 지키기 위해 내부적으로 관리하는 객체
• 엔진은 스코프 체인을 따라 변수를 검색
• this는 호출 방식에 따라 결정되고, 렉시컬 스코프는 정의된 위치로 결정

 

📚 참고

변수의 유효범위와 클로저