호이스팅(Hoisting)
호이스팅(Hoisting)
호이스팅(Hoisting)은 JavaScript에서 변수 및 함수 선언이 스코프의 맨 위로 끌어올려지는 동작을 말합니다. 이는 코드가 실행되기 전에 JavaScript 엔진에 의해 처리됩니다. 호이스팅은 코드의 작성 순서와는 상관없이 변수와 함수를 사용할 수 있는 이점을 제공합니다.
호이스팅은 주로 선언(Declaration)과 할당(Assignment)을 구분하는 데 사용됩니다. 변수 및 함수 선언은 호이스팅되지만, 할당은 호이스팅되지 않습니다. 즉, 변수 및 함수 선언은 스코프의 맨 위로 끌어올려지지만, 할당은 그 자리에 남아 있습니다.
변수 호이스팅의 예시를 살펴보겠습니다:
1
2
3
console.log(x); // undefined
var x = 5;
console.log(x); // 5
위 코드는 호이스팅되었기 때문에 오류 없이 실행됩니다. 첫 번째 console.log(x)에서 x가 선언되지 않았지만, 호이스팅에 의해 var x;가 스코프의 맨 위로 끌어올려져 undefined가 됩니다. 그 후에 x에 5가 할당되고, 두 번째 console.log(x)에서 x의 값인 5가 출력됩니다.
함수 호이스팅의 예시를 살펴보겠습니다:
1
2
3
4
5
hello(); // "Hello, World!"
function hello() {
console.log("Hello, World!");
}
위 코드에서도 함수 hello()의 선언이 호이스팅되어 hello()를 호출하기 전에도 정상적으로 실행됩니다.
하지만 함수 표현식(Function Expression)은 호이스팅되지 않습니다:
1
2
3
4
5
hello(); // TypeError: hello is not a function
var hello = function() {
console.log("Hello, World!");
};
위 코드에서 변수 hello는 호이스팅되지만, 할당 부분이 호이스팅되지 않기 때문에 hello()를 호출하면 TypeError가 발생합니다.
호이스팅은 JavaScript를 이해하고 코드를 작성하는 데 중요한 개념입니다. 그러나 호이스팅을 최대한 이용하는 대신 코드의 가독성과 유지보수성을 위해 변수 및 함수 선언을 코드의 맨 위에 명시적으로 작성하는 것이 좋습니다. 이렇게 함으로써 코드의 동작이 명확해지고 예기치 않은 동작을 방지할 수 있습니다.
제 포스팅을 봐주셔서 감사합니다.