JAVASCRIPT) 호이스팅(Hoisting)

안녕하세요! 오늘은 JavaScript에서 중요한 개념인 호이스팅(Hoisting)에 대해 알아보겠습니다.
JavaScript를 처음 접할 때 호이스팅이라는 개념은 다소 혼란스러울 수 있습니다. 그러나 이를 이해하면 코드가 어떻게 실행되는지 더 명확히 알 수 있고, 예기치 않은 동작을 방지할 수 있습니다. 이번 글에서는 호이스팅의 정의, 동작 원리, 사용 방법, 그리고 실전 예시를 통해 호이스팅을 자세히 설명하겠습니다.

호이스팅(Hoisting)이란?

호이스팅은 JavaScript 엔진이 변수와 함수 선언을 코드의 최상단으로 끌어올리는 동작을 말합니다. 즉, 코드가 실행되기 전에 변수와 함수 선언이 “호이스팅” 되어 해당 스코프의 최상단으로 이동한 것처럼 동작합니다.

변수 호이스팅

JavaScript에서 변수는 var, let, const 키워드를 사용해 선언할 수 있습니다. 이들 키워드는 각기 다른 방식으로 호이스팅됩니다.

var 키워드

var로 선언된 변수는 함수 스코프를 가지며, 선언과 초기화가 호이스팅됩니다. 그러나 초기화는 호이스팅되지 않습니다.

console.log(x); // undefined
var x = 5;
console.log(x); // 5

위 코드는 다음과 같이 해석될 수 있습니다:

var x;
console.log(x); // undefined
x = 5;
console.log(x); // 5

let과 const 키워드

let과 const로 선언된 변수는 블록 스코프를 가지며, 선언은 호이스팅되지만 초기화는 호이스팅되지 않습니다. 따라서 선언 전에 접근하려 하면 ReferenceError가 발생합니다.

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

위 코드는 다음과 같이 해석될 수 있습니다:

let y; // 선언은 호이스팅됨
console.log(y); // ReferenceError
y = 10;
console.log(y); // 10

const의 경우도 동일하게 동작하지만, const는 반드시 선언과 동시에 초기화되어야 합니다.

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

함수 호이스팅

함수 선언도 호이스팅됩니다. 이는 함수 선언이 변수 선언보다 우선적으로 호이스팅된다는 것을 의미합니다. 따라서 함수 선언은 코드 내 어디서든 호출할 수 있습니다.

console.log(add(2, 3)); // 5

function add(a, b) {
    return a + b;
}

위 코드는 다음과 같이 해석될 수 있습니다:

function add(a, b) {
    return a + b;
}

console.log(add(2, 3)); // 5

반면, 함수 표현식은 변수 호이스팅의 영향을 받습니다.

console.log(subtract(5, 2)); // TypeError: subtract is not a function

var subtract = function(a, b) {
    return a - b;
};

위 코드는 다음과 같이 해석될 수 있습니다:

var subtract;

console.log(subtract); // undefined
console.log(subtract(5, 2)); // TypeError

subtract = function(a, b) {
    return a - b;
};

호이스팅의 실전 예시

호이스팅을 이해하면 코드의 실행 흐름을 더 잘 파악할 수 있습니다. 다음은 호이스팅을 고려하지 않고 작성된 코드의 예시입니다.

function example() {
    console.log(a); // undefined
    var a = 10;
    console.log(a); // 10
    
    console.log(b); // ReferenceError
    let b = 20;
    console.log(b); // 20
}

example();

이 코드는 호이스팅을 고려하여 다음과 같이 해석됩니다:

function example() {
    var a;
    let b;

    console.log(a); // undefined
    a = 10;
    console.log(a); // 10

    console.log(b); // ReferenceError
    b = 20;
    console.log(b); // 20
}

example();

호이스팅을 피하는 방법

호이스팅으로 인한 혼란을 피하려면 다음과 같은 방법을 사용할 수 있습니다:

• 변수는 상단에서 선언: 변수를 사용하는 코드의 상단에서 변수를 선언합니다.
• let과 const 사용: 가능하면 var 대신 let과 const를 사용하여 블록 스코프를 활용합니다.
• 함수 표현식 사용: 함수 선언보다는 함수 표현식을 사용하여 변수 호이스팅의 영향을 받지 않도록 합니다.

// 변수는 상단에서 선언
let a = 10;
const b = 20;

function example() {
    console.log(a); // 10
    console.log(b); // 20
}

example();

// 함수 표현식 사용
const add = function(a, b) {
    return a + b;
};

console.log(add(2, 3)); // 5

결론

JavaScript의 호이스팅은 변수와 함수 선언이 스코프의 최상단으로 끌어올려지는 동작을 의미합니다. 이를 이해하면 코드의 실행 흐름을 더 명확히 알 수 있고, 예기치 않은 동작을 방지할 수 있습니다. 호이스팅을 고려하여 코드를 작성하면 가독성과 유지보수성이 향상됩니다.

이 블로그 글이 JavaScript의 호이스팅을 이해하는 데 도움이 되었기를 바랍니다. 추가적인 질문이나 도움이 필요하다면 언제든지 댓글로 남겨주세요. 여러분의 JavaScript 여정을 응원합니다!