호이스팅(Hoisting)

호이스트(Hoist)의 뜻은 무언가를 들어 올리거나 끌어 올리는 동작을 설명한다.
자동차를 강에서 올린다(Hoist)라고 할 수 있다.

JavaScript에서 호이스팅은 코드가 실행되기 전에 변수 및 함수 선언(이름)이 로컬 범위(유효 범위)의 맨 위로 들어 올려지거나 끌어올려지는 경우를 말한다.

var 선언문 호이스팅

• var로 선언된 변수는 호이스팅되며, 초기화는 선언된 위치에서 이루어진다.
• 따라서 선언 전에 변수에 접근하면 undefined가 반환된다.

console.log(name);  // undefined
var name = "ChatGPT";

위 코드는 호이스팅 때문에 아래와 같이 동작한다.

var name;
console.log(name);  // undefined
name = "ChatGPT";

let

• let으로 선언된 변수는 호이스팅되지만, 초기화는 변수가 선언된 위치에서 이루어진다.
• 그렇기 때문에 변수 선언 전에 그 변수에 접근하려고 하면 ReferenceError가 발생한다. 이를 임시적 사각지대(TDZ, Temporal Dead Zone)라고 한다.

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

const

• const로 선언된 변수도 let과 마찬가지로 호이스팅은 되지만, 변수가 선언된 위치에서 초기화된다.
• 또한 const는 선언과 동시에 초기화해야 합니다. 그렇지 않으면 SyntaxError가 발생한다.
• const 변수 역시 선언 전에 접근하면 ReferenceError가 발생한다.

// console.log(city);  // ReferenceError: Cannot access 'city' before initialization
const city = "Seoul";

function

함수가 밑에 선언되어 있어도, 제대로 작동한다.

func() //hositing test. 정상적으로 작동한다.

function func() {
  console.log('hositing test');
}

요약

• var로 선언된 변수는 호이스팅되고 자동으로 undefined로 초기화된다.
• let과 const로 선언된 변수는 호이스팅되지만, var가 undefined로 초기화된거와 달라, let과 const의 초기화는 변수가 실제로 선언된 위치에서 이루어진다. 따라서 선언 전에 접근하려면 오류가 발생한다.

호이스팅의 존재는 초보 개발자들에게 혼란을 줄 수 있기 때문에 변수나 상수를 사용하기 전에 항상 선언하고 초기화하는 것이 좋다.