스코프 체인이란 무엇인가요?

스코프는 변수와 함수가 유효한(접근 가능한) 범위입니다. 스코프 체인은 어떤 변수를 참조할 때 엔진이 현재 스코프부터 바깥 스코프로 차례로 올라가며 변수를 찾는 연결 구조를 말합니다.

스코프의 종류

• 전역 스코프 — 코드 어디서든 접근 가능.
• 함수 스코프 — 함수 안에서 선언된 변수는 그 함수 안에서만 유효. (var는 함수 스코프)
• 블록 스코프 — {} 블록 안에서만 유효. let/const가 해당. (var는 블록 스코프를 따르지 않음)

let global = '전역';
 
function outer() {
  let outerVar = '바깥';
  if (true) {
    let blockVar = '블록';
    console.log(global, outerVar, blockVar); // 모두 접근 가능
  }
  // console.log(blockVar); // ReferenceError — 블록 밖
}

스코프 체인과 렉시컬 스코프

변수를 참조하면 엔진은 현재 스코프 → 바깥 스코프 → … → 전역 스코프 순으로 찾아 올라갑니다. 이 탐색 경로가 스코프 체인입니다. 안쪽에서 같은 이름을 선언하면 바깥 변수를 가립니다(섀도잉).

const x = 'global';
 
function outer() {
  const x = 'outer';
  function inner() {
    console.log(x); // 'outer' — 가장 가까운 스코프부터 찾음
  }
  inner();
}
outer();

자바스크립트는 렉시컬(정적) 스코프를 따릅니다. 즉 스코프는 함수가 어디서 호출되었는지가 아니라 어디서 정의되었는지(코드의 위치)로 결정됩니다. 위 예에서 inner는 어디서 호출되든 자신이 정의된 위치의 바깥 스코프(outer)를 기준으로 x를 찾습니다. 이 렉시컬 스코프가 클로저의 기반이 됩니다.