01 · Concept

스코프와 실행 컨텍스트

스코프는 변수의 접근 범위를, 실행 컨텍스트는 코드 실행에 필요한 환경 정보를 담고 있습니다.

JavaScript는 렉시컬 스코핑을 따르며, 함수가 선언된 위치에 따라 스코프 체인이 결정됩니다.this는 함수의 호출 방식에 따라 동적으로 바인딩되며, 화살표 함수는 상위 스코프의 this를 상속합니다.IIFE는 전역 스코프 오염을 방지하는 전통적인 패턴입니다.

02 · Interactive Demo

this 바인딩과 스코프 체인 시각화

각 바인딩 방식을 선택하고 실행하여 this가 어떻게 결정되는지 확인하세요.

const obj = {
  name: 'Kim',
  greet() {
    console.log(this.name);
  }
};

obj.greet();        // 'Kim'
const fn = obj.greet;
fn();               // undefined (strict mode)
this →호출한 객체 (obj)
Scope Chain
Global Scope
window = WindowglobalVar = 'global'
Function Scope (outer)
outerVar = 'outer'this = → caller
Block Scope (if / for)
blockVar = 'block'let/const = 블록 내 한정
Function Scope (inner)
innerVar = 'inner'[[Scope]] = → outer → global
03 · Code Example

코드 예시

실제 코드로 동작 원리를 확인하세요.

const globalVar = 'global';

function outer() {
  const outerVar = 'outer';

  function inner() {
    const innerVar = 'inner';
    // inner → outer → global 순서로 탐색
    console.log(innerVar);  // 'inner'  (자신의 스코프)
    console.log(outerVar);  // 'outer'  (외부 스코프)
    console.log(globalVar); // 'global' (전역 스코프)
  }

  inner();
}

outer();
04 · Interview Point

면접 핵심 질문

스코프는 변수에 접근할 수 있는 범위입니다. JavaScript에는 전역 스코프, 함수 스코프, 블록 스코프가 있습니다. 스코프 체인은 현재 스코프에서 변수를 찾지 못하면 상위 스코프로 올라가며 탐색하는 메커니즘입니다. 이는 렉시컬 스코핑(정적 스코핑)에 기반하여, 함수가 선언된 위치에 따라 스코프 체인이 결정됩니다.
실행 컨텍스트는 코드가 실행되기 위한 환경 정보를 담고 있는 객체입니다. Variable Environment(변수 환경), Lexical Environment(렉시컬 환경), this 바인딩으로 구성됩니다. 코드 실행 시 전역 실행 컨텍스트가 생성되고, 함수 호출마다 새로운 실행 컨텍스트가 콜 스택에 push됩니다. 함수 종료 시 pop되어 이전 컨텍스트로 돌아갑니다.
일반 함수의 this는 호출 방식에 따라 동적으로 결정됩니다 (메서드 호출, call/apply/bind, new 등). 반면 화살표 함수는 자체 this를 갖지 않고, 선언 시점의 상위 스코프 this를 그대로 사용합니다 (렉시컬 this). 따라서 call, apply, bind로도 화살표 함수의 this를 변경할 수 없습니다.
IIFE(Immediately Invoked Function Expression)는 선언과 동시에 실행되는 함수입니다. 주요 목적: 1. 전역 스코프 오염 방지 — 변수를 함수 스코프 내에 격리 2. 모듈 패턴 — 캡슐화된 프라이빗 상태와 퍼블릭 API 구현 3. 초기화 코드 — 한 번만 실행되는 설정 로직. ES6 모듈(import/export)이 도입되면서 사용 빈도가 줄었지만, 라이브러리 번들링이나 레거시 환경에서 여전히 활용됩니다.