jeongeun.devlog
[JavaScript] 호이스팅(Hoisting)이란?

[JavaScript] 호이스팅(Hoisting)이란?

jeongeun's photo
jeongeun
·

3 min read

Table of contents

ㅤ

호이스팅이란?

호이스팅(Hoisting)이란 자바스크립트 코드가 실행 되기 전에 변수와 함수 선언이 실행 컨텍스트에서 최상단으로 끌어올려지는 것처럼 동작하는 자바스크립트의 특징이다. 호이스팅을 사용하면 선언 위치와 관계없이 해당 변수나 함수를 사용할 수 있는 것처럼 보일 수 있다. 하지만 선언만 호이스팅 될 뿐이고, 변수의 값 할당까지 끌어올려지지는 않는다. 이런 특징은 오류나 의도하지 않은 동작으로 이어질 수 있다.

ㅤ

변수 호이스팅

var 호이스팅

var로 선언된 변수는 선언만 호이스팅된다. 초기화는 변수 선언이 실제로 실행될 때 이루어지므로, 초기화 이전에 접근하면 값은 undefined이다.

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

이 코드에서 var myVar는 호이스팅되어 첫 번째 console.log에서 undefined로 평가된다.

ㅤ

let과 const 호이스팅

let과 const도 호이스팅되지만, 초기화되기 전에는 변수에 접근할 수 없다. 이로 인해 초기화 전에 변수를 참조하면 ReferenceError가 발생하는데 Temporal Dead Zone (TDZ)이라는 개념 때문이다.

  • Temporal Dead Zone (TDZ): 코드에서 변수가 선언된 시점부터 초기화되기 전까지의 구간으로, 이 구간에서 변수에 접근할 수 없다. 이는 let과 const가 보다 안전하게 동작하도록 보장해준다.
console.log(myLet); // ReferenceError: Cannot access 'myLet' before initialization
let myLet = 10;

console.log(myConst); // ReferenceError: Cannot access 'myConst' before initialization
const myConst = 20;

위의 코드의 경우, 변수 선언은 호이스팅되었지만 초기화는 변수 선언이 실제로 실행될 때까지 이루어지지 않는다.

결과적으로, 호이스팅은 변수와 함수 선언이 코드의 최상단으로 이동한 것처럼 작동한다. 그러나 var는 선언만 호이스팅되기 때문에 초기화되기 전까지는 undefined로 평가된다. 반면, let과 const는 호이스팅되더라도 Temporal Dead Zone(TDZ) 구간에 있기 때문에 초기화 이전에 접근하면 ReferenceError가 발생한다.

선언 방식선언 호이스팅초기화 호이스팅TDZ 적용
varOXX
letOXO
constOXO
함수 선언OOX

ㅤ

함수 호이스팅

함수 선언은 전체가 호이스팅된다. 따라서 함수 선언문을 코드 상단에 작성하지 않아도, 선언 이전에 해당 함수를 호출할 수 있다.

console.log(myFunction()); // "Hello, World!"

function myFunction() {
  return "Hello, World!";
}

위의 코드는 함수 선언이 호이스팅되어 정상적으로 실행된다.

console.log(myFunction()); // TypeError: myFunction is not a function
var myFunction = function () {
  return "Hello, World!";
};

반면, 함수 표현식은 변수에 할당된 값처럼 동작하므로, 선언 전에 호출하면 오류가 발생한다.ㅤ

ㅤ

결론

  • let과 const 사용하기: var는 예기치 않은 동작을 유발할 가능성이 있어서, 최신 자바스크립트 코드에서는 let과 const를 사용하는 것을 권장한다.

  • 선언과 초기화의 위치를 명확히 하기: 변수를 선언과 동시에 초기화하면 TDZ에서 발생할 수 있는 접근 오류(ReferenceError)를 방지할 수 있어 변수를 보다 안전하게 사용할 수 있다. 또한, 변수 선언을 코드의 상단에 위치시키면 가독성을 높이고 의도치 않은 오류를 예방할 수 있다.

  • 함수 표현식과 함수 선언 구분하기: 함수 선언은 자유롭게 호출할 수 있지만, 함수 표현식은 선언 이후에만 사용할 수 있다.

ㅤ

참고

ㅤ

ㅤ

JavaScript