[JavaScript] 호이스팅(Hoisting)

유얌얌·2024년 10월 24일

CS

목록 보기

6/15

호이스팅

변수나 함수 선언을 코드의 최상단으로 끌어올리는 것처럼 동작하는 특성
즉, 나중에 선언된 변수를 참조할 수 있다는 것

🫧 변수 선언의 실행 시점과 변수 호이스팅

변수 선언은 소스코드가 한 줄씩 순차적으로 실행되는 시점(런타임)이 아니라, 그 이전 단계에서 먼저 실행된다.
자바스크립트 엔진은 소스코드를 순차적으로 실행하기에 앞서 먼저 소스코드의 평가 과정을 거친다. (변수 선언을 포함한 모든 선언문을 소스코드에서 찾아 먼저 실행함)
평가 과정이 끝나면 비로소 변수 선언을 포함한 모든 선언문을 제외하고 소스코드를 한 줄씩 순차적으로 실행한다.
그렇기 때문에 변수 선언이 소스코드의 어디에 위치하는가와 상관없이 어디서든지 변수를 참조할 수 있다.

➜ 자바스크립트 엔진이 코드를 실행하기 전에 변수와 함수 선언을 메모리에 저장하기 때문에, 선언이 어디에 있던 변수나 함수를 참조할 수 있게 되는 것(호이스팅)!

🫧 변수 호이스팅의 예시와 주의점

변수 호이스팅은 var, let, const 키워드를 사용할 때 각각 다르게 동작한다.

var

var로 선언된 변수는 호이스팅되어 에러가 일어나지 않고, undefined 로 초기화된다.

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

let, const

ECMAScript 2015의 let과 const는 변수를 블록의 상단으로 끌어올리지만 초기화하지 않는다. 변수가 선언되기 전에 블록 안에서 변수를 참조하게 되면 ReferenceError를 발생시킨다.

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

🫧 함수 호이스팅

함수에서는 함수 선언으로는 호이스팅되지만, 함수 표현식으로는 호이스팅 되지 않는다. (함수 표현식은 변수 호이스팅의 규칙을 따르기 때문)

/* 함수 선언 */

foo(); // "bar"

function foo() {
  console.log("bar");
}

/* 함수 표현식 */

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

var baz = function () {
  console.log("bar2");
};

🫧 호이스팅을 피하는 법

호이스팅으로 인한 혼란을 피하기 위해서는 변수 선언은 코드의 최상단에서, 함수 선언은 가능한 사용하기 전에 하는 것이 좋다.
또한, 호이스팅으로 인한 혼란을 최소화하기위해 var 대신 let이나 const를 사용하여 변수를 선언하는 것이 현대 자바스크립트 개발에서 권장되는 방식이다.

🫧 결론

코드의 동작을 예측 가능하게 하고, 버그를 방지하기 위해 호이스팅의 동작 방식을 이해하고 적절히 대응하는 것이 중요하다. 이를 통해 더 깔끔하고 효율적인 코드를 작성할 수 있다.

예상질문

호이스팅이 뭘까요?

호이스팅은 변수나 함수 선언을 코드의 최상단으로 끌어올리는 것처럼 동작하는 특성을 말합니다. 즉, 나중에 선언된 변수를 참조할 수 있다는 것을 뜻합니다. 이는 자바스크립트 엔진이 런타임을 실행하기 전에, 선언문을 먼저 찾아낸 후 소스코드를 실행시키기 때문입니다. 참고로 var로 선언된 변수는 에러없이 호이스팅되어 undefined로 초기화되지만, let, const로 선언된 변수는 초기화되지않아 참조에러가 발생합니다. 또한 함수 선언식은 호이스팅 되지만, 함수 표현식은 호이스팅 되지않아 TypeError가 발생합니다.