변수 선언과 호이스팅

자바스크립트의 변수 선언과 할당

 

자바스크립트는 변수를 만드는 키워드가  3가지가 있다 var, let, const 이 세가지의 차이는 재선언과 재할당의 차이이다.

 

var - 재할당 재선언이 가능하다

let - 재할당은 가능하고 재선언은 불가능하다

const - 재할당과 재선언이 모두 불가능하다

 

위 정도의 차이만 알고 사용하면 간단하다. var는 es5 문법이고 es6에서 let과 const가 나타났다. let과 const를 사용하면 에러를 줄일 수 있고 const는 변하지않는 상수이다보니 키워드만보고도 어떠한 용도로 쓰였을 지 예상을 할 수 있다고 한다.

 

또한 변수에는 호이스팅이라는것이 존재하는데 이는 변수선언 단계가 최상위로 끌어올려지는듯한 현상을 말한다.

이게 무슨말이냐 하면

 

자바스크립트는 위에서 아래로 코드를 한줄씩 읽어내리는 언어이다. 그러면 아래 코드를 한번보면

console.log(score); // undefined가 출력된다.

var score; // 선언
score = 80; // 할당

console.log(score); // 80이 출력된다.

위와같이 맨 윗줄에서 이미 score라는 변수를 콘솔창에 찍었을 때 undefined가 출력되는걸 볼 수 있다.

 

호이스팅이 일어나지 않았다면 레퍼런스에러가 나야했을것이다. (식별자가 존재하지않는다는 에러)

그러나 변수에서 호이스팅이 일어났기에 score에 초기화단계에서 undefined가 할당이 되어있는 상태이므로 undefined가 출력이된것이다.

 

그 후 score = 80 으로 할당을 해줌으로써 마지막줄에 80이 출력되는걸 볼 수 있을것이다.

 

위와같이 아래줄에 있음에도 불구하고 맨 위로 끌어올려진듯한 현상을 호이스팅이라한다.

호이스팅은 var,let,const,function,function*,class 키워드를 사용해 선언하는 모든 식별자가 호이스팅이된다.

모든 선언문은 런타임 이전단계에서 실행되기 때문이다.

 

다만 let과 const는 레퍼런스에러가 발생할텐데 그 이유는 let과 const는 변수 선언문에 도달해야 초기화단계가 이루어지기 때문이다. 선언단계와 초기화단계 그 사이에 TDZ라는 (Temporal Dead Zone) 이라는 일시적 사각지대가 존재하기 때문이다.