호이스팅과 스코프체이닝

섭승이·2025년 1월 19일

자바스크립트 프론트엔드면접

자바스크립트

목록 보기

4/4

저번 글에서 클로저, 실행 컨텍스트, 렉시컬 환경에 대해 다뤘는데 이번 글에서는 호이스팅과 스코프 체이닝에 대해 더 자세하게 다룰 예정입니다!

호이스팅

자바스크립트에서 실행 컨텍스트 생성 시 렉시컬 스코프 내의 선언이 끌어올려 지는 게 호이스팅이다.

호이스팅의 원리

변수 선언과 함수 선언이 호이스팅됩니다.
변수의 경우 선언만 호이스팅되고, 값의 할당은 이루어지지 않습니다.

따라서 var과 let, const, 함수 선언은 각각 다르게 동작하게 됩니다!!

var의 호이스팅

var로 선언된 변수는 선언만 끌어올려지고, 초기화는 실제 코드 실행 위치에서 이루어집니다. 초기화 전에는 undefined로 접근됩니다.

let, const의 호이스팅

let과 const도 선언은 호이스팅되지만, 초기화 전에는 Temporal Dead Zone(TDZ) 때문에 접근할 수 없습니다.

Temporal Dead Zone(TDZ)

TDZ는 temporal dead zone의 약자로 자바스크립트에서 변수가 선언되기 전까지 그 변수에 접근할 수 없는 구역을 말합니다. let, const를 사용해 변수를 선언할 때 발생하며, 이 변수가 실제로 선언되기 전에 접근하면 Reference Error가 발생합니다.

함수 선언과 함수 표현식

함수 선언은 전체 호이스팅됩니다. 따라서 선언 이전에 호출이 가능합니다.
함수 표현식은 변수 호이스팅처럼 동작합니다.

console.log(add(2, 3)); // 5
function add(a, b) {
  return a + b;
}

console.log(multiply(2, 3)); // TypeError
var multiply = function (a, b) {
  return a * b;
};

스코프 체이닝(Scope Chaining)

특정 변수를 참조할 때, 해당 변수가 정의된 스코프를 찾기 위해 스코프의 계층 구조를 따라 올라가는 과정

스코프의 종류

전역 스코프 (Global Scope): 코드 어디서나 접근 가능한 스코프.
함수 스코프 (Function Scope): 함수 내부에서만 접근 가능한 스코프.
블록 스코프 (Block Scope): {} 블록 내부에서만 접근 가능한 스코프 (let, const).

스코프 체이닝의 동작

현재 스코프에서 해당 변수를 찾습니다.
없다면, 상위 스코프로 올라갑니다.
전역 스코프에 도달할 때까지 찾고, 그래도 없다면 ReferenceError가 발생합니다.

let globalVar = "global";

function outer() {
  let outerVar = "outer";

  function inner() {
    let innerVar = "inner";

    console.log(globalVar); // "global" (전역 스코프에서 찾음)
    console.log(outerVar);  // "outer" (바로 상위 스코프에서 찾음)
    console.log(innerVar);  // "inner" (현재 스코프에서 찾음)
  }

  inner();
}

outer();