[JavaScript] 호이스팅(hoisting)이 도대체 뭘까? 쉽게 이해하기

📖 들어가며

자바스크립트에서 코드의 실행 순서와 스코프를 이해하는 데 중요한 역할을 하는 중요한 개념 중 하나인 호이스팅(hoisting)에 대해서 알아보겠습니다.

호이스팅(hoisting)이란 ❓

호이스팅은 자바스크립트 엔진이 스크립트를 해석하고 실행하는 과정에서, 변수나 함수, 클래스 선언을 코드의 맨 위로 '끌어올리는' 것과 같은 현상을 말합니다.

보통 호이스팅에 대한 설명을 보면 '끌어올려진다'라고 대부분 설명이 되어 있는데 호이스팅이 실제로 코드를 물리적으로 최상단으로 옮기는 것은 아닙니다.

이는 자바스크립트 엔진의 내부 동작 방식을 설명하는 개념일 뿐입니다.

호이스팅은 실행 컨텍스트의 생성 단계에서 일어납니다.

실행 컨텍스트는 자바스크립트 코드가 실행되는 환경을 말합니다.
생성 단계에서는 변수 객체가 만들어지고, 스코프 체인이 형성되며, this 값이 결정됩니다.
변수 객체 내부에는 인자, 내부 변수, 내부 함수 등이 포함되어 있습니다.

자바스크립트의 변수

자바스크립트에서 변수는 var, let, const 키워드를 사용해 선언할 수 있습니다.

변수 생성 단계

자바스크립트 엔진이 실행 컨텍스트 Lexical Environment에 변수를 등록하는 과정에서 총 3가지 단계가 있습니다.

1. 선언(Declaration) 단계

특정 이름의 변수를 생성하는 과정입니다.

이 단계에서는 메모리에 변수를 위한 공간이 확보되며, 이 공간은 변수 이름으로 참조될 수 있게 됩니다.

2. 초기화(Initalization) 단계

선언된 변수에 기본값을 설정하는 단계입니다.

해당 단계에서 변수는 undefined로 초기화가 됩니다.

대신, var로 선언된 변수는 선언과 동시에 undefined로 초기화가 됩니다. 즉, 스코프에 변수를 등록(선언 단계)하고 메모리에 변수를 위한 공간을 확보한 후 undefined로 초기화합니다.

반면에, let과 const로 선언된 변수는 스코프에 변수를 등록(선언 단계)하지만 초기화 단계는 변수 선언문에 도달했을 때(코드 실행 후) 이뤄집니다.

console.log(name); // (선언 + 초기화 된 상태)
name = 'yong'; // (선언 + 초기화 + 할당 된 상태)
var name;
console.log(name);

// 호이스팅 발생함
console.log(text); // TDZ(Temporal Dead Zone)에 있어서 참조 에러 발생
let text; // 선언문에 도달하여 초기화 단계 실행

3. 할당(Assignment) 단계

초기화된 변수에 특정 값을 지정하는 단계입니다.

var 호이스팅

var로 선언된 변수는 함수 스코프에서 호이스팅 됩니다.

즉, 함수 내부 어디에서든 접근이 가능하며, 선언 전에 사용해도 에러가 발생하지 않고 undefined가 출력되는 결과를 확인할 수 있습니다.

console.log(name); // 'undefined'
var name = 'yong';

var 키워드의 특징은 var 키워드로 선언된 변수는 호이스팅에 의해 맨 위로 끌어올려질 때 자동으로 undefined 값으로 초기화가 됩니다.

그래서 선언문 전에 접근을 할 수 있는 상황이 발생한 것입니다.

호이스팅의 동작 과정은 예를 들면 아래와 같습니다.

name;
console.log(name);
name = 'yong';

let, const 호이스팅

let과 const로 선언된 변수도 호이스팅이 되는데, 블록 스코프에서 호이스팅이 됩니다.

하지만, var 키워드와는 다르게 선언 전에 접근하려 하면 참조 에러가 발생하게 되는데 이를 'TDZ - Temporal Dead Zone (일시적 사각지대)'라고 합니다.

자바스크립트는 TDZ에 들어가 있는 것들의 접근을 허용하지 않습니다.

console.log(name); // ReferenceError: Cannot access 'name' before initialization
let name = 'yong';

console.log(age); // ReferenceError: Cannot access 'age' before initialization
const age = 25;

let foo = 1;
{
  console.log(foo); // ReferenceError: Cannot access 'foo' before initialization
  let foo = 2;
  // 블록 스코프 안에서 호이스팅이 일어나기 때문에 참조 에러 발생
}

그리고 let은 var와 같이 재선언이 허용이 되지만,

const는 재선언이 허용되지 않기 때문에 const 키워드를 사용 시 선언과 동시에 할당을 해주어야 합니다.

// ✅
let num = 0;
console.log(num) // 0
num = 15;
---------------
// ❌
const name; // SyntaxError: Missing initializer in const declaration
console.log(name)
---------------
// ✅
const age = 15;
console.log(age) // 15

var, let, const 정리

var 키워드는 함수 스코프를 가지고 호이스팅 시 undefined로 초기화되고 같은 스코프 내에서 재선언이 가능한 방식 등 독특한 방식 때문에 혼란을 초래할 수 있습니다.

반면에, let과 const는 블록 스코프를 가지므로, 코드가 더 예측이 가능하고 이해하기 쉽습니다.

따라서, 현대 자바스크립트 개발에서는 var 대신에 let과 const를 사용하는 것이 권장되고 있습니다.

자바스크립트의 함수 선언

함수의 선언 방식에는 선언식과 표현식이 있습니다.

함수 선언식과 호이스팅

함수 선언식도 호이스팅의 대상이며 함수 전체가 호이스팅이 됩니다.

console.log(myFunction()); // "Hello, World!"
function myFunction() {
    return "Hello, World!";
}

함수 표현식과 호이스팅

함수 표현식은 변수에 할당된 함수를 의미하며, 변수 선언만 호이스팅이 되고 함수는 호이스팅이 되지 않습니다.

즉, 함수 표현식은 선언 전에 호출하면 에러가 발생합니다.

console.log(myFunctionExpression()); // TypeError: myFunctionExpression is not a function
var myFunctionExpression = function() {
    return "Hello, World!";
};

에러가 발생하는 이유와 호이스팅의 과정은 아래와 같습니다.

myFunctionExpression;
console.log(myFunctionExpression()); // TypeError: myFunctionExpression is not a function
myFunctionExpression = function() {
    return "Hello, World!";
};

클래스와 호이스팅

클래스의 선언도 호이스팅의 대상이지만, let과 const와 마찬가지로 호이스팅이 일어나도 'TDZ'에 들어가게 됩니다.
따라서 클래스 선언 이전에 해당 클래스를 참조하려고 하면 참조 에러가 발생합니다.

const toy = new Toy(); // ReferenceError: Cannot access 'Toy' before initialization
class Toy {}

📕 마무리

호이스팅을 이해하면 코드를 보다 효과적으로 작성하고 디버깅할 수 있습니다.

참고 문헌:

저작자표시 비영리 변경금지