호이스팅에 대해 알아보자

안녕하세요. 오늘은 자바스크립트의 독특한 개념 중 하나인 호이스팅(Hoisting)에 대해 알아보려고 합니다. 바로 들어가겠습니다.

호이스팅(Hoisting)

호이스팅이란 무엇인가?

호이스팅은 자바스크립트 엔진이 변수와 함수 선언을 코드의 최상단으로 끌어올리는 동작을 의미합니다. 이 때문에 변수가 선언되기 전에 사용할 수 있는 것처럼 보이는 현상이 발생합니다. 다만, 실제 값의 할당은 호이스팅되지 않습니다. 따라서 선언만 끌어올려지며 초기화는 원래 위치에서 이루어집니다.

변수 호이스팅

자바스크립트에서 변수를 선언할 때 var, let, const 키워드를 사용할 수 있습니다. 이들 중 var는 호이스팅될 때 약간 다르게 동작합니다.

var 키워드

var로 선언된 변수는 호이스팅되며, 선언 부분만 끌어올려지고 초기화는 원래 위치에서 수행됩니다.

console.log(hoistedVar); // undefined
var hoistedVar = 'I am hoisted!';
console.log(hoistedVar); // 'I am hoisted!'

위 코드에서 hoistedVar 변수는 선언이 호이스팅되어 undefined로 초기화됩니다. 따라서 초기화되기 전에는 undefined 값을 가집니다.

let과 const 키워드

let과 const로 선언된 변수는 호이스팅되지만, Temporal Dead Zone(TDZ)에 걸리므로 초기화 전에 접근할 수 없습니다.

console.log(hoistedLet); // ReferenceError: Cannot access 'hoistedLet' before initialization
let hoistedLet = 'I am hoisted!';

위 코드에서 hoistedLet 변수는 선언은 호이스팅되지만, 초기화되기 전까지는 사용할 수 없습니다.

함수 호이스팅

함수 선언은 변수와 달리 전체 함수가 호이스팅됩니다. 따라서 함수 선언문은 코드의 어느 위치에서든 호출할 수 있습니다.

함수 선언문

console.log(hoistedFunction()); // 'I am hoisted!'

function hoistedFunction() {
    return 'I am hoisted!';
}

위 코드에서 hoistedFunction 함수는 선언이 호이스팅되어 함수 호출이 가능해집니다.

함수 표현식

함수 표현식은 변수에 할당된 함수이므로, 변수 호이스팅 규칙을 따릅니다.

console.log(hoistedFunctionExpr()); // TypeError: hoistedFunctionExpr is not a function
var hoistedFunctionExpr = function() {
    return 'I am not hoisted!';
};

위 코드에서 hoistedFunctionExpr 변수는 호이스팅되지만, undefined로 초기화되므로 함수 호출이 불가능합니다.

호이스팅의 예제와 활용

호이스팅은 코드 작성 시 예기치 못한 동작을 유발할 수 있으므로, 이를 이해하고 주의 깊게 사용하는 것이 중요합니다.

함수 내 변수 호이스팅

함수 내에서 변수를 선언할 때, 해당 변수는 함수의 최상단으로 호이스팅됩니다.

function example() {
    console.log(hoistedVar); // undefined
    var hoistedVar = 'I am hoisted!';
    console.log(hoistedVar); // 'I am hoisted!'
}

example();

위 예제에서 hoistedVar 변수는 함수 내에서 호이스팅되어 함수의 최상단에서 선언된 것처럼 동작합니다.

블록 스코프와 호이스팅

블록 스코프를 사용하는 let과 const는 호이스팅되지만, TDZ에 의해 초기화되기 전에는 접근할 수 없습니다.

function blockScopeExample() {
    console.log(blockVar); // ReferenceError: Cannot access 'blockVar' before initialization
    let blockVar = 'I am block scoped!';
    console.log(blockVar); // 'I am block scoped!'
}

blockScopeExample();

위 예제에서 blockVar 변수는 블록 내에서 호이스팅되지만, TDZ로 인해 초기화 전에는 접근할 수 없습니다.

결론

호이스팅은 자바스크립트의 중요한 개념으로, 변수가 선언되기 전에 접근할 수 있는 것처럼 보이게 합니다. var로 선언된 변수는 선언이 호이스팅되어 undefined로 초기화되지만, let과 const로 선언된 변수는 TDZ로 인해 초기화 전에는 접근할 수 없습니다. 함수 선언은 전체가 호이스팅되어 어디서든 호출할 수 있지만, 함수 표현식은 변수 호이스팅 규칙을 따릅니다. 호이스팅을 올바르게 이해하고 사용하면 코드의 예기치 않은 동작을 방지하고, 가독성과 유지보수성을 높일 수 있습니다.

오늘도 제 글을 읽어주셔서 감사합니다. 다음 시간에 더 흥미로운 주제로 찾아뵙겠습니다.