JavaScript의 Hoisting 호이스팅이란 무엇인가?

JS에는 호이스팅이란 것이 있다.

호이스팅 호이스팅.. 뭘까?

 

 

Hoisting 호이스팅?

자바스크립트는 함수의 코드를 실행하기에 앞서 함수와 변수의 메모리 공간을 선언 전에 미리 할당한다고 한다.

이때 var로 선언한 변수는 호이스팅 시에 undefined로 변수를 초기화 해버리는데 이때문에 할당이 이루어지지 않은 변수를 사용하려하면

의도하지 않는 값인 undefined가 출력될 수 있다. 분명 나는 원하지 않았다.

 

즉, 호이스팅이란 변수의 선언 시점에 따른 할당의 차이가 있다고 이해하면 쉽다.

변수는 선언, 할당, 선언과 동시에 할당을 할 수 있는데 

예를 들자면,

 

var nickName; // undefined
nickName = '군침이싹도네'; // 할당

var nickName = '군침이싹도네'; // 선언과 동시에 할당

와 같은 코드가 있다고 하자.

변수를 선언만 하고 초기화를 해주지 않으면 사용하는 시점에 undefined 가 출력된다.

 

 

호이스팅이 왜 중요한가?

그렇다면 호이스팅이 왜 중요할까?

 

자바스크립트는 말그대로 스크립트로 순차적으로 코드를 읽어들이게 된다.

이때, 함수 선언문은 호이스팅이 가능하지만 함수 표현식은 호이스팅이 불가능해서 런타임 시에 할당되는데

var 라는 타입은 함수의 블록만을 지역스코프로 사용하기 때문에 원하는 순간에 제대로 할당되지 않아 undefined가 호출될 수 있다.

또한 변수 중복선언으로 의도하지 않는 곳에서 의도하지 않은 값이 변할 수 있다.

 

 

그래서 등장한 let과 const

이러한 이유로 ES6에서 let과 const이 등장하였다.

둘은 공통점과 각각의 차이점이 있어 필요한 곳에 적절하게 사용하면 되겠다.

 

let과 const의 공통점과 차이점

1. 변수 중복선언 불가

 - let으로 중복선언은 불가능하지만 재할당은 가능하다.

 - const는 let과 달리 선언과 초기화를 동시에 해야한다.

 - const는 재선언, 재할당이 불가능하지만 원시 값이 아닌 객체 재할당은 가능하다.

 

2. 블록 레벨 스코프

var a = 1;

if(true) {
 var a = 5;
 }
 
 console.log(a); // output: 5

let a = 1;

if(true) {
 let a = 5;
 }
 
 console.log(a); // output:1

차이점이 보이는가?

var는 가장 바깥의 스코프에서 이미 선언이 되었는데도 불구하고 if문 안에서 또 선언이 되었기 때문에 값이 5로 할당되었다.

그러나 let은 블록 레벨이기 때문에 바깥의 a 값과 if문 내부에서 재선언된 a와는 변수의 지역스코프가 달라 1이 출력되었다.

 

3. 변수 호이스팅

 1. let은 선언과 초기화가 분리되어 실행된다.

 따라서 초기화가 되기전에 접근시 참조에러가 발생한다.

 즉, 일시적 사각지대가 존재한다 (Temporal Dead Zone: TDZ)

console.log(nickName); // undefined
let nickName = 'Ho it!';

 

 2. const는 선언과 초기화가 동시에 이루어진다.

 let의 경우 선언은 런타임 전에 이루어져 존재는 하지만 초기화가 되지 않았기 때문에 undefined가 발생하지만,

 const는 선언과 초기화가 동시에 이루어져야 하기 때문에 런타임 이전에는 실행될 수 없다.

 초기화 진행 전이므로 'cannot access 'nickName' before initialization.' 이라는 에러를 뱉어낸다. (퉤!)

console.log(nickName); // cannot access 'nickName' before initialization.
const nickName = 'Ho it!';