▶ JavaScript Tutorial

JavaScript Hoisting

JavaScript Hoisting: 변수와 함수의 호이스팅 이해

JavaScript Hoisting(호이스팅)은 JavaScript의 특성 중 하나로, 변수와 함수 선언이 코드 실행 전에 해당 스코프의 상단으로 끌어올려지는 것처럼 동작하는 현상을 말합니다. 이로 인해 변수를 선언하기 전에 사용할 수 있는 것처럼 보이기도 하지만, 실제 동작 방식은 다릅니다. 호이스팅은 변수와 함수 선언의 이해와 예상치 못한 오류 방지에 중요한 개념입니다.

이 가이드는 JavaScript에서 호이스팅이 어떻게 동작하는지, 그리고 var, let, const, 함수 선언에서 각각의 호이스팅 동작 방식을 설명합니다.

1. JavaScript에서의 호이스팅이란?

JavaScript에서 변수와 함수 선언은 코드가 실행되기 전에 해당 스코프의 상단으로 끌어올려집니다. 하지만 호이스팅은 변수와 함수의 선언부만 끌어올려지고, 초기화나 할당은 실제 코드가 도달했을 때 이루어집니다.

1.1. 예시: 기본적인 호이스팅

console.log(a);  // 출력: undefined (변수가 선언은 되었지만, 아직 초기화되지 않음)
var a = 10;

위 코드를 실행할 때 a 변수 선언은 호이스팅되므로 console.log(a)를 호출할 때 에러는 발생하지 않지만, **값은 undefined**로 출력됩니다. 이 현상은 변수가 선언은 되었으나 초기화되지 않은 상태이기 때문에 발생합니다.

호이스팅은 다음과 같이 동작합니다:

var a;
console.log(a);  // 출력: undefined
a = 10;

2. 변수 호이스팅

변수를 선언할 때 사용하는 var, let, **const**는 각각 호이스팅 방식이 다릅니다. 이 섹션에서는 각 변수 선언 방식의 호이스팅 동작 방식을 설명합니다.

2.1. `var`의 호이스팅

*var*로 선언된 변수는 호이스팅되어 선언부만 상단으로 끌어올려지고, 초기화는 해당 라인에서 이루어집니다. 초기화되기 전에 변수에 접근하면 **undefined*가 반환됩니다.

2.1.1. `var` 호이스팅 예시

console.log(x);  // 출력: undefined (선언은 되었으나 초기화되지 않음)
var x = 5;
console.log(x);  // 출력: 5 (초기화 완료)

호이스팅이 일어난 코드는 실제로 다음과 같이 처리됩니다:

var x;  // 선언부가 호이스팅됨
console.log(x);  // 출력: undefined
x = 5;  // 초기화
console.log(x);  // 출력: 5

2.2. `let`과 `const`의 호이스팅

*let*과 **const*도 호이스팅되지만, 초기화 전에는 접근할 수 없습니다. 이를 **TDZ(Temporal Dead Zone)**라고 합니다. 선언 전에 변수를 사용하려고 하면 **ReferenceError*가 발생합니다.

2.2.1. `let` 호이스팅 예시

console.log(y);  // 오류: y는 초기화되기 전에 접근할 수 없음
let y = 10;

이 코드는 다음과 같은 방식으로 동작합니다:

// let y;  (선언은 호이스팅되지만, TDZ에 의해 접근 불가)
console.log(y);  // ReferenceError 발생
y = 10;

2.2.2. `const` 호이스팅 예시

const 역시 TDZ에 의해 선언 전에 접근할 수 없으며, 초기화와 선언이 동시에 이루어져야 합니다.

console.log(z);  // 오류: z는 초기화되기 전에 접근할 수 없음
const z = 20;

이 코드는 다음과 같이 동작합니다:

// const z;  (선언은 호이스팅되지만, TDZ에 의해 접근 불가)
console.log(z);  // ReferenceError 발생
z = 20;

3. 함수 호이스팅

함수 선언과 함수 표현식에서 호이스팅은 다르게 동작합니다.

3.1. 함수 선언의 호이스팅

*함수 선언(Function Declaration)**은 전체 함수가 호이스팅됩니다. 즉, 함수 선언 전에 함수를 호출할 수 있습니다.

3.1.1. 함수 선언 예시

greet();  // 출력: Hello!

function greet() {
    console.log("Hello!");
}

위 코드는 아래와 같이 해석됩니다:

function greet() {
    console.log("Hello!");
}

greet();  // 출력: Hello!

3.2. 함수 표현식의 호이스팅

*함수 표현식(Function Expression)**은 변수가 호이스팅되지만, 함수 자체는 변수에 할당될 때까지 초기화되지 않기 때문에 선언 전에 함수를 호출하면 **TypeError*가 발생합니다.

3.2.1. 함수 표현식 예시

sayHi();  // 오류: sayHi는 함수가 아님

var sayHi = function() {
    console.log("Hi!");
};

위 코드는 다음과 같이 해석됩니다:

var sayHi;  // 변수만 호이스팅됨
sayHi();  // TypeError 발생: sayHi는 아직 함수가 아님
sayHi = function() {
    console.log("Hi!");
};

4. 호이스팅 동작 방식 요약

4.1. `var`의 호이스팅

변수 선언만 호이스팅되며, 초기화는 해당 라인에서 이루어짐.
초기화되기 전까지 변수는 undefined 값을 가짐.

4.2. `let`과 `const`의 호이스팅

선언은 호이스팅되지만, **초기화 전까지 TDZ(Temporal Dead Zone)**에 의해 접근 불가.
선언 전에 변수를 사용하려고 하면 **ReferenceError*가 발생.

4.3. 함수 선언의 호이스팅

전체 함수 선언이 호이스팅되며, 함수 선언 전에 호출 가능.

4.4. 함수 표현식의 호이스팅

변수만 호이스팅되며, 함수가 변수에 할당되기 전에는 **TypeError*가 발생.

5. 호이스팅의 예외 처리와 올바른 사용법

호이스팅은 JavaScript의 고유한 특성으로, 잘못 사용하면 예상치 못한 오류가 발생할 수 있습니다. 이를 방지하기 위한 몇 가지 모범 사례를 소개합니다.

5.1. 변수를 선언 전에 사용하지 않기

변수를 선언하기 전에 사용하지 않는 것이 중요합니다. 코드의 가독성을 높이기 위해 변수는 사용되기 전에 명확하게 선언해야 합니다.

let a = 10;
console.log(a);  // 출력: 10

5.2. 함수 표현식을 사용하기 전에 선언하기

함수 표현식을 사용할 때는 선언 후에 호출하는 것이 좋습니다. 이는 코드의 가독성과 예측 가능성을 높여줍니다.

const sayHello = function() {
    console.log("Hello!");
};

sayHello();  // 출력: Hello!

요약

호이스팅은 변수와 함수 선언을 코드의 최상단으로 끌어올리는 JavaScript의 동작 방식입니다.
*var*는 선언만 호이스팅되고, 초기화되기 전까지 undefined 상태입니다.
*let*과 **const*는 호이스팅되지만 TDZ(Temporal Dead Zone)에 의해 초기화되기 전까지 접근할 수 없으며, **ReferenceError*가 발생할 수 있습니다.
함수 선언은 전체 함수가 호이스팅되므로, 함수 선언 전에 호출할 수 있습니다.
함수 표현식은 변수만 호이스팅되며, 초기화되기 전까지 호출할 수 없고 **TypeError*가 발생할 수 있습니다.

호이스팅을 이해하고 올바르게 사용하면 예상치 못한 오류를 방지하고, 코드의 가독성과 안정성을 높일 수 있습니다.

코딩 스쿨 JavaScript