호이스팅의 기본 개념
변수나 함수 선언을 코드의 최상단으로 끌어올리는 것처럼 동작하는 특성
자바스크립트 엔진이 코드를 실행하기 전에 변수와 함수 선언을 메모리에 저장하는 방식 때문에 발생
따라서, 코드 상에서 선언 전에 변수나 함수를 참조할 수 있게 됨
→ 자바스크립트 엔진은 실행 전에 코드를 스캔하면서 변수와 함수 선언을 메모리에 저장하기 때문
변수 호이스팅의 예시와 주의점
변수 호이스팅은 var, let, const 키워드를 사용할 때 각각 다르게 동작함
var로 선언된 변수는 호이스팅되어 undefined로 초기화되지만,
let과 const는 호이스팅되어도 초기화되지 않음
이로 인해 참조 에러(ReferenceError)가 발생할 수 있음
console.log(x); // undefined
var x = 5;
console.log(x); // 5
console.log(y); // ReferenceError: y is not defined
let y = 5;왜냐하면 var는 호이스팅되어 undefined로 초기화되지만, let과 const는 초기화되지 않기 때문
함수 호이스팅의 이해
함수 선언문의 경우, 호이스팅으로 인해 코드의 어느 위치에서든지 함수를 호출할 수 있음
하지만 함수 표현식은 변수 호이스팅의 규칙을 따르기 때문에, 선언 전에 호출하려고 하면 참조 에러가 발생
console.log(sum(5, 3)); // 8
function sum(a, b) {
return a + b;
}
console.log(multiply(5, 3)); // TypeError: multiply is not a function
var multiply = function(a, b) {
return a * b;
};왜냐하면 함수 선언문은 호이스팅으로 인해 코드의 어느 위치에서든 호출할 수 있지만,
함수 표현식은 변수 호이스팅의 규칙을 따르기 때문
호이스팅을 피하는 방법
변수 선언은 코드의 최상단에서, 함수 선언은 가능한 사용하기 전에 하는 것이 좋음
var 대신 let이나 const를 사용하여 변수를 선언하는 것이 현대 자바스크립트 개발에서 권장되는 방식
호이스팅으로 인한 혼란을 최소화할 수 있기 때문
결론
코드의 동작을 예측 가능하게 만들고, 버그를 방지하기 위해 호이스팅의 동작 방식을 이해하고 적절히 대응하는 것이 중요