[모던자바스크립트 DeepDive] 스코프

스코프란?

• 스코프(scope)는 식별자(변수·함수·클래스 등)가 유효한 범위를 말한다.
• 자바스크립트 엔진은 스코프를 통해 “동일한 이름의 식별자가 여러 개 있을 때, 어떤 것을 참조해야 할지” 결정한다.
• “코드가 어디서 실행되며 주변에 어떤 코드가 있는지”를 렉시컬 환경(Lexical Environment)이라 부르고, 이를 구현한 것이 실행 컨텍스트다.
• 모든 코드는 실행 컨텍스트 안에서 평가·실행되며, 스코프는 이 실행 컨텍스트와 깊은 관련이 있다.

var x = 'global';    // 전역 스코프
function foo() {
  var x = 'local';   // foo 함수 스코프
  console.log(x);    // local
}
foo();
console.log(x);      // global

• 전역과 함수 내부에 선언된 x는 이름은 같아도 서로 다른 스코프의 별개 변수다.
• 스코프 덕분에 같은 이름으로 충돌 없이 코드 작성이 가능하다.

---

스코프의 종류

1. 전역 스코프(Global Scope)

   • 코드 가장 바깥(전역)에서 선언된 변수는 어디서든 참조할 수 있다.

2. 지역 스코프(Local Scope)

   • 함수 몸체 안에 선언된 변수는 그 함수와 그 하위(중첩) 함수에서만 참조할 수 있다.

var a = 1;           // 전역 스코프
function outer() {
  var b = 2;         // outer 지역 스코프
  function inner() {
    var c = 3;       // inner 지역 스코프
    console.log(a, b, c);  // 1, 2, 3
  }
  inner();
}
outer();

---

🔗 스코프 체인(Scope Chain)

• 중첩 함수(nested function)가 있을 때, 내부 함수의 스코프는 외부 함수 스코프를 “상위 스코프”로 참조한다.
• 이 스코프들의 계층 구조를 스코프 체인이라고 부른다.

var x = 'global';
function outer() {
  var y = 'outer';
  function inner() {
    var x = 'inner';
    console.log(x, y);  // inner, outer
  }
  inner();
}
outer();

1. inner가 x를 찾으면

   • 현재(inner) 스코프 → x = 'inner' 발견

2. inner가 y를 찾으면

   • 현재 스코프엔 없고 → 상위(outer) 스코프 → y = 'outer' 발견

3. 전역 스코프까지 올라가면 전역 변수도 참조 가능

자바스크립트 엔진은 실행 전 이 구조를 렉시컬 환경으로 실제 생성한다.
변수 선언 시 키가 등록되고, 할당 시 값이 저장된다.
스코프 체인은 실행 컨텍스트의 렉시컬 환경끼리 단방향 링크로 연결된 형태다.

---

함수 레벨 스코프 vs 블록 레벨 스코프

• 함수 레벨 스코프: var 키워드는 함수 몸체만 지역 스코프라고 인정한다.
• 블록 레벨 스코프: let, const는 모든 {} 블록을 새로운 스코프로 인식한다.

if (true) {
  var v = 'func-scope';
  let l = 'block-scope';
}
console.log(v); // 'func-scope'
console.log(l); // ReferenceError

---

렉시컬 스코프(Lexical Scope)

• 렉시컬 스코프는 “함수가 어디서 정의됐는지”에 따라 상위 스코프를 결정하는 방식이다.
• 자바스크립트는 렉시컬 스코프를 따른다.

var x = 1;
function foo() {
  console.log(x);
}
function bar() {
  var x = 2;
  foo();
}
bar(); // 1

1. foo는 전역에서 정의됐으므로 상위 스코프는 전역
2. bar에서 호출해도 foo는 여전히 전역 x를 참조한다.

---

📌 핵심 정리

• 스코프: 식별자가 유효한 범위
• 스코프 체인: 중첩된 스코프들 간의 연결고리
• 함수 vs 블록 스코프: var는 함수, let·const는 블록
• 렉시컬 스코프: 정의 시점에 상위 스코프 결정