[javascript] 변수 및 함수 호이스팅(hoisting)에 대해 알아보자.

14 Dec 2023

자바스크립트에서 호이스팅은 변수 및 함수 선언이 스코프 내에서 상단으로 끌어올려지는 동작을 의미합니다. 이는 코드 내에서 선언된 변수 및 함수를 해당 스코프의 시작 부분으로 이동시킨다는 것을 의미합니다.

변수 호이스팅

변수 선언은 해당 스코프의 최상단으로 끌어올려지지만, 할당 구문은 호이스팅되지 않습니다. 따라서, 변수를 선언하기 전에 참조하면 undefined가 반환됩니다.

예를 들어,

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

위 코드는 실제로 다음과 같이 해석됩니다.

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

함수 선언은 전체가 호이스팅되며, 함수 표현식은 호이스팅되지 않습니다. 함수 표현식은 변수 이름만 호이스팅되며, 함수 자체는 호이스팅되지 않습니다.

예를 들어,

myFunction(); // "Hello, World!"

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

위 코드는 함수 선언이 호이스팅되므로 문제 없이 실행됩니다. 하지만 함수 표현식의 경우 호이스팅이 되지 않습니다.

myFunction(); // TypeError: myFunction is not a function

var myFunction = function() {
  console.log("Hello, World!");
};

함수 호이스팅은 코드를 이해하는 데 도움이 되지만, 코드를 읽을 때 더욱 주의 깊게 살펴봐야 합니다. 호이스팅으로 인해 의도하지 않은 동작이 발생할 수 있기 때문에 주의가 필요합니다.

호이스팅은 자바스크립트가 실행되기 전에 처리되므로 올바르게 이해하고 사용해야 합니다.

더 자세한 내용은 아래 참고 자료를 참고하세요.