[Java Script] 변수 호이스팅 (feat. var, let, const)

변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라한다(variable hoisting)

 

변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문에 참조에러가 발생되지 않는다.

 

변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립 고유의 특징

 

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let 과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않습니다. -MDN-

 

 

var, 함수 선언문이 호이스팅 대상이다.

*let, const, 함수 표현식은 해당되지 않는다.

 

그렇다면 정말 let, const는 호이스팅이 일어나지 않는 것일까? 결론 부터 말하자면 호이스팅이 일어난다

 

좀 더 자세히 이해하기 위해서는 Temporal Dead Zone(TDZ)에 대해서 알아야 한다.

 

TMZ란?

선언 전에 변수를 사용하는 것을 비 허용하는 개념상의 공간이다

 

코드를 통해 한번 알아보자

 

white; // throws `ReferenceError`
const white = '#FFFFFF';

white; // => '#FFFFFF'

 

 

const white ='#FFFFFF' 구문 전 줄 까지, white 변수는 TDZ에 있다.

 

TDZ에 있는 white 변수에 접근하게 되면, ReferenceError: Cannot access 'white' before initialization 자바스크립트 에러가 발생합니다.

 

 

const 변수, let변수, class구문, constructor 내부 super() 구문 등.. 이 TDZ의 영향을 받고

 

반대로 var,function, import 구문은 TDZ의 영향을 받지 않는다.

 

typeof 연산자는 변수가 현재 스코프 안에 선언되었는지 확인하는 경우 유용하다.

 

따라서 코드의 가독성과 유지보수를 위해서 호이스팅이 일어나지 않도록 한다!

- let, const를 지향하고, var을 지양하자.

(var는 암묵적으로 undefined로 초기화 된 상태에서 자바스크립트 코드를 읽기 때문에, TDZ에서 에러가 나지 않는다.)

- 변수, 함수명이 같은 상태로 호이스팅이 발생하면 변수가 함수값을 덮어쓰는 단점도 있다.

 

 

 

출처:

https://zereight.tistory.com/891

https://noogoonaa.tistory.com/78