호이스팅(Hoisting)

호이스팅은 자바스크립트의 독특한 동작 방식으로, 변수와 함수 선언이 실제 코드가 실행되기 전에 해당 범위의 최상단으로 끌어올려지는 현상을 의미한다. 호이스팅은 변수 선언과 함수 선언 모두에 적용되지만, 변수의 초기화는 호스팅되지 않는다. 이로 인해 코드가 실제로 작성된 순서와 다르게 동작할 수 있다.

---

변수 호이스팅

var

var로 선언된 변수는 선언 부분이 호이스팅되지만, 초기화 부분은 호이스팅되지 않는다. 따라서 초기화 이전에 변수를 참조하면 undefined 값을 가지게 된다.

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

let / const

let과 const로 선언된 변수는 호이스팅되지만, 초기화되기 전까지 접근할 수 없다.
이를 “Temporal Dead Zone(TDZ)”이라고 한다.

console.log(b); // 접근이 불가능하여 ReferenceError
let b = 10;

console.log(c); // 위와 마찬가지로 접근이 불가능하여 ReferenceError
const c = 20;

---

함수 호이스팅

선언문 방식의 함수

선언문 방식 함수의 경우 선언이 완전히 호이스팅된다. 따라서 함수가 선언되기 전에 호출할 수 있다.

console.log(plus(2, 3)); // 5

function plus(x, y) {
	return x + y;
}

표현식 방식의 함수

함수 표현식은 변수 호이스팅과 유사한 결과를 보인다.

var

console.log(sub1(5, 3); // TypeError
 
var sub1 = function(x , y) {
	return x - y;
}

var로 선언된 변수는 호이스팅은 되지만, 초기화되기 전까지는 undefined값을 가지므로 초기화되기 전의 로그는 TypeError를 발생시킨다.

const(or let)

console.log(sub2(5, 3); // ReferenceError
 
const sub2 = function(x , y) {
	return x - y;
}

const로 선언된 변수는 호이스팅되나, 초기화되기 전까지 접근할 수 없다. 따라서 로그에서는 ReferenceError를 발생시킨다.