자바스크립트에서 호이스팅은 변수 또는 함수 선언이 스코프의 최상단으로 끌어올려지는 동작을 의미합니다. 이는 코드 실행 전에 변수 및 함수 선언이 메모리에 할당되기 때문에 변수를 선언하기 전에 참조할 수도 있습니다.

호이스팅의 동작

호이스팅은 var 키워드로 선언된 변수 및 함수에 적용됩니다. 예를 들어,

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

위 코드는 실제로 엔진에 의해 아래와 같이 해석됩니다.

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

myVar은 선언되었지만 아직 값이 할당되지 않았으므로 undefined가 출력됩니다. 이는 호이스팅으로 인해 변수 선언이 코드의 최상단으로 이동되었기 때문에 발생합니다.

let과 const의 동작

하지만 let과 const 키워드로 선언된 변수는 호이스팅되지만 일시적인 사각지대(Temporal Dead Zone)에 갇히게 되며 선언 전에 접근하면 에러가 발생합니다.

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

let과 const는 블록 스코프를 지원하며 호이스팅 때문에 발생하는 예기치 않은 동작을 방지해줍니다. 또한, const로 선언된 값은 재할당이 불가능하므로 안정적인 코드를 작성할 수 있습니다.

호이스팅은 자바스크립트의 동작 방식 중 하나이며, var보다는 let과 const를 사용하여 예측 가능하고 안전한 코드를 작성하는 것이 좋습니다.

참고자료:

• MDN Web Docs: Hoisting
• MDN Web Docs: let
• MDN Web Docs: const