차이점 1. 선언, 초기화, 할당
선언
자바스크립트는 우리가 쓴 코드를 실행하기 전, 코드 전체를 훑으면서 문제가 없는지 확인하는 과정을 거친다.
이를 실행 컨텍스트라고 하는데, 선언 단계는 해당 단계에서 진행이 된다. 이를 통해 변수 나 혹은 함수가 선언된 것들을 쭉 살펴보게 된다.
초기화
초기화 단계는 변수의 값을 저장하기 위한 메모리 공간을 확보하고 단계이다. 이 단계에서 기존 var 의 경우, 할당이 이루어지기 전까지 undefined 을 메모리 공간의 초기값으로 집어넣게 된다. 이것이 var 가 선언이 늦어도 호출에서 에러가 나타나지 않는 이유이며, 호이스팅이 가능한 이유이다. 선언과 초기화가 동시에 이루어져, 메모리 공간의 undefined 이 참조가 가능한 상태이기 때문이다.
호이스팅
코드가 실행하기 전, 변수 혹은 함수 선언 자체가 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상을 말한다. 자바스크립트 엔진이 코드를 실행하기 전, 실행 컨텍스트 과정에서, 코드 실행에 필요한 모든 선언을 해당 스코프에 등록하게 되는데, 이때 선언문 보다 호출이 먼저 나와도 마치 먼저 나와있던 거 마냥 문제 없이 작동하는 현상이다.
호이스팅 과정은 var 에서만 일어난다고 여기는 경우가 많은데, 그건 아니다. let, const 에서도 호이스팅은 발생한다. 더 정확히 말하자면 let, const 에서도 호이스팅이 일어나기 때문에 선언 보다 먼저 호출하는 경우 참조 에러를 일으키는 것이다. let 과 const 는 var 와 달리 선언과 초기화가 동시에 일어나지 않는다. var 를 사용하며 선언+초기화가 동시에 이루어지는 것을 통해 에러 발생이 많아지자, es6 업데이트 당시 이를 대응하기 위한 수단으로 let, const를 생성하여 변수와 초기화가 동시에 이루어지지 않는 방법을 고안했다. 그것이 TDZ 이다.
할당
변수에 실제 값을 할당한다. var 의 경우 메모리 주소의 undefined 값을 실제 값으로 바꾸게 되고, let 은 선언과 초기화가 잘 이루어졌다면, undefined 인 상태를 실제 값으로 바꾸게 될 것이다.
const 는 조금 다르다. 상수값 변하지 않는 값에 사용되는 const 는 선언+초기화+할당이 한꺼번에 이루어져야한다. 이 3가지가 모두 함께 일어나지 않으면 에러가 나타난다.
차이점 2. 스코프
var 는 총 2가지의 스코프를 가지고 있다. 함수 스코프 혹은 글로벌 스코프이다. 함수 내부에서 사용되는 변수가 아니라면 모든 데이터는 글로벌 스코프에 저장되고 참조한다. 이 부분이 개발을 할 때 큰 문제를 발생시킨다. 현재 내가 사용하는 변수가 누군가 사용했는지 등을 찾아봐야 하기 때문이다. 또한 추후에 누가 또 사용하지 말라는 법도 없다. 더불어 var 는 재선언, 재할당도 가능하여 악영향을 증폭시켰다.
이 문제를 해결하기 위해 es6 에서 만들어진 것이 블록 레벨 스코프이다. 함수를 제외한 모든 변수가 더이상 글로벌 스코프에 저장되는 것이 아닌, 블록 스코프에서 저장이 되는 것이다. 이를 통해, 동일한 변수명을 사용하더라도, 블록 계층이 다르면 에러 없이 사용할 수 있게 되었다. 또한 let, const 의 경우 재선언이 불가능하도록 상수를 저장하는 const 의 경우 재할당이 불가능하게 하였다.
요약
| var | let | const | |
|---|---|---|---|
| 선언, 초기화, 할당 | 선언+초기화 / 할당 | 선언 / 초기화 / 할당 | 선언+초기화+할당 |
| 호이스팅 | undefined | 레퍼런스 에러 | 레퍼런스 에러 |
| Global 스코프 | 저장됨 | 안됨, 전역에서 선언하는 경우, 해당 모듈 스코프에 저장됨 | 안됨, 전역에서 선언하는 경우, 해당 모듈 스코프에 저장됨 |
| function 스코프 | 저장됨 | 저장됨 | 저장됨 |
| block 스코프 | 안됨, global 스코프에 저장됨 | 저장됨 | 저장됨 |
| 재선언 | 가능 | 불가능 | 불가능 |
| 재할당 | 가능 | 가능 | 불가능 |
참고
JavaScript - var VS let VS const
[10분 테코톡] 태태,샐리의 var let const 비교
let, const | PoiemaWeb
let vs const vs var (TDZ)
JavaScript의 let과 const, 그리고 TDZ
TDZ(Temporal Dead Zone)를 통해 밝혀진 let과 const의 호이스팅(hoisting)
[javascript] 변수의 선언 할당 초기화 / var let const 완벽 비교 정리
호이스팅에 대한 오해와 진실
