[JS] Javascript 호이스팅(Hoisting)에 대해서

호이스팅은 자바스크립트에서 변수 및 함수 선언이 코드의 최상단으로 끌어올려지는 특징을 나타냅니다. 이 동작은 코드의 실행 전에 컴파일러에 의해 처리되며, 코드를 이해하고 예측하는 데 중요한 역할을 합니다.

1. 변수 호이스팅

console.log(myVariable); // 출력: undefined
var myVariable = 10;
console.log(myVariable); // 출력: 10

변수 myVariable이 선언 전에 참조되었지만, 자바스크립트는 이를 오류 없이 처리하고 undefined로 초기화합니다. 이것이 바로 변수 호이스팅입니다. 실제로는 아래와 같이 처리됩니다.

var myVariable;
console.log(myVariable); // 출력: undefined
myVariable = 10;
console.log(myVariable); // 출력: 10

2. 함수 호이스팅

hello(); // 출력: "Hello, hoisting!"

function hello() {
  console.log("Hello, hoisting!");
}

함수 선언도 마찬가지로 선언 전에 호출될 수 있습니다. 함수 선언문은 전체가 끌어올려지기 때문에 호출이 가능합니다. 하지만 함수 표현식은 호이스팅되지 않습니다.

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

var sayHi = function () {
  console.log("Hi!");
};

3. 호이스팅의 주의사항

호이스팅은 코드를 이해하고 디버깅하는 데 혼란을 줄 수 있습니다. 따라서 변수 및 함수는 사용하기 전에 정의하고, 호이스팅을 피하려면 let이나 const를 사용하는 것이 좋습니다.

console.log(myVar); // ReferenceError: myVar is not defined
let myVar = 5;

호이스팅은 자바스크립트의 독특한 특징 중 하나이므로 이를 이해하고 적절히 활용하는 것이 중요합니다. 코드를 읽을 때 호이스팅을 고려하여 변수와 함수의 위치를 파악하면 더 명확한 코드를 작성할 수 있습니다.