Hoisting에 대한 정리

이번 글에서는 호이스팅에 대해 찾아본 것을 정리할 것이다.

Hoisting이란 무엇인가?

Hoisting(호이스팅)이란, 선언문이 맨 위로 움직이는 자바스크립트(JS)의 표준이 되는 움직임을 말한다.

그렇다면 선언문이란 어디까지를 뜻하는 것일까?

var x//<-여기까지 선언문! = 3;

Var Keyword

JS의 Variable(var) 키워드는 그 값이 사용된 이후에 선언될 수 있다는 특징을 가진다.

//Ex1
x = 3;

console.log(x);

var x;

//Ex2
var x;
x = 3;

console.log(x);

위 예시에서 출력되는 값을 동일하다.

 

Ex1에서 x가 선언되기전에 값을 할당하고 출력이 될 수 있었던 이유는 호이스팅 덕분이다.

호이스팅은 현재 Scope 내부에 존재하는 모든 선언문을 Scope 내부의 최상단으로 이동시킨다.

 

때문에 Ex1의 var x;는 사실상 Ex2의 var x;와 같은 위치에 자리하고 있는 것과 같다.

 

let and const Keywords

let과 const 키워드 모두 호이스트되는 것은 var과 동일하다.

하지만 var과 다른 점이 있는데,

이것은 Temporal Dead Zone(TDZ)와 관련이 있다.

 

var 키워드는 선언/초기화가 모두 호이스트되고,

let/const 키워드는 선언문만 호이스트 된다.

 

let과 const는 위 이유로 TDZ가 발생한다.

 

https://lifeandit.tistory.com/55

코딩할때 개선할 점 모음

위 포스팅 9번에 TDZ에 대한 설명이 되어있다.

 

선언까지 되어있는 값을 호출하면 에러를 출력한다.

선언/초기화까지 되어있는 값을 호출하면 undefined를 출력한다.

선언/초기화/할당까지 되어있는 값을 호출하면 할당된 것을 출력한다.

 

//Ex1
carName = "Hyundai";
let carName;

//Ex2
carName = "Volvo";
const carName;

따라서 위 두 예시는 참조 에러(ReferenceError)가 발생한다.

 

p.s)

function 키워드는 TDZ가 존재하지 않아 어디에 있든 호이스트 되어 함수를 호출하여 사용할 수 있다!

 

출처

https://www.w3schools.com/js/js_hoisting.asp

JavaScript Hoisting