[JS/Javascript] 호이스팅이란? ( Hoisting )

자바스크립트에서 호이스팅은 코드 실행 동안 발생하는 특이한 현상 중 하나이다. 호이스팅은 변수 및 함수 선언이 스코프의 최상위로 끌어올려지는 것을 의미한다. 이는 코드 실행 순서와 관련하여 초보자들에게 혼란을 주는 주제 중 하나이다.

호이스팅의 주요 개념은 선언(Declaration)과 할당(Assignment)을 구분하는 것이다. 선언은 변수나 함수를 만드는 것을 의미하고, 할당은 값을 할당하는 것을 의미한다. 호이스팅은 선언만 끌어올려지며, 할당은 원래의 위치에 그대로 남아 있다.

변수의 경우, 선언부만 호이스팅되며 초기화는 호이스팅되지 않는다. 이는 변수가 선언된 후에 초기화되기 때문이다. 함수의 경우, 함수 선언문은 전체가 호이스팅되며 함수 표현식은 변수에 할당되는 값만 호이스팅된다.

다음은 호이스팅에 대한 간단한 예제이다.

#예제1

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

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

notHoistedFunction(); // TypeError: notHoistedFunction is not a function
var notHoistedFunction = function() {
  console.log("This function is not hoisted.");
};

 

#예제2

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

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

notHoistedFunction(); // TypeError: notHoistedFunction is not a function
var notHoistedFunction = function() {
  console.log("This function is not hoisted.");
};

console.log(innerVariable); // ReferenceError: innerVariable is not defined
function outerFunction() {
  console.log(innerVariable); // undefined
  var innerVariable = "I am inside!";
  console.log(innerVariable); // "I am inside!"
}
outerFunction();

 

호이스팅은 코드의 가독성과 유지보수성을 향상시킬 수 있다. 그러나 이를 오해하거나 잘못 사용할 경우 예상치 못한 동작이 발생할 수 있으므로 주의해야 한다.

마지막으로, 호이스팅은 자바스크립트의 독특한 특성 중 하나이며, 코드 실행 순서를 이해하는 데 도움이 됩니다. 따라서 호이스팅에 대한 이해는 자바스크립트를 깊이 이해하고 효율적으로 코드를 작성하는 데 도움이 될 것이다.