var, let, const의 차이
- 공통점 ) var, let, const는 모두 변수를 선언할 때 사용하는 키워드이다.
let, const는 var의 단점을 보완하기 위해서 ES6에 도입된 키워드이다.
var의 단점 및 특징
- 함수 레벨 스코프만 지원한다. (블록 레벨 스코프 ❌)
- var가 선언된 곳이 함수 내부이기만 하면, 블록에 선언되었더라도 함수 내부 어디서든 접근 가능하다.
-
var로 선언한 변수들은 값의 재할당 및 재선언이 가능하다.
-
hoisting이 된다.
선언부가 가장 위로 끌어올려진다. 선언만 끌어올려지기 때문에 출력하면 값은 undefined가 되나, const, let과 같이 참조 오류는 발생하지 않는다.
const & let
✅ const, let은 속한 스코프의 최상단으로 호이스팅은 되지만, 선언되고 초기화되기 전까지는 temporal dead zone(TDZ - 안전장치) 영역에 속하게 됨.
✅ 블록 스코프(속한 블록 내부로 제한됨.)를 가진다.
const
- const는 선언과 동시에 반드시 값을 할당해줘야한다.
- 재할당이 불가능하여 상수에 주로 사용한다.
let
- let은 선언과 값 할당을 분리해서 할 수 있다.
- 값의 재할당도 가능하다.
관련 개념
스코프
변수의 유효 범위
호이스팅
변수 선언문 (var, let, const), 함수 선언문 등이 해당 스코프의 선두로 옮겨진 것처럼 동작하는 특성.
- var 키워드는 선언만 끌어올려지기 때문에 출력하면 값은 undefined가 되나, const, let과 같이 참조 오류는 발생하지 않는다.
- let 키워드는 선언문 이전에 참조하면 일시적 사각지대에 빠져 참조 에러가 발생한다.
TDZ(Temporal Dead Zone)
스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없는데, 이 구간을 일시적 사각지대(TDZ)라고 부른다.
- var 키워드를 통한 변수 선언은 선언 단계(스코프에 변수 등록)와 초기화 단계(메모리에 변수 공간 확보 후, undefined로 초기화)를 한 번에 진행한다.
- let 키워드를 통한 변수 선언은 선언 단계와 초기화 단계가 분리되어 진행된다.
- let 키워드 또한 호이스팅(스코프의 선두에서 선언 단계가 실행됨-변수 등록)은 일어나지만, 초기화 단계는 변수 선언문에 도달했을 때 발생하기 때문에 변수 선언문 이전에 변수를 참조하게 되면 ReferenceError가 발생한다.
💡 const는 선언과 동시에 반드시 값을 할당해줘야 하고, 재할당이 불가능하여 상수에 주로 사용한다.
let은 선언과 값 할당을 분리해서 할 수 있고, 값의 재할당도 가능하다. 그러나 재 선언은 불가능하다.
var로 선언한 변수들은 값의 재할당이 가능하며, 재선언도 가능하다.
var는 함수 스코프를 가진다. 선언부가 함수 안이기만 하면, 블록에 선언되었더러도 함수 내부 어디든 돌아다닐 수 있음. 반면, const, let은 블록 스코프(속한 블록 내부로 제한됨.)를 가진다. const, let은 속한 스코프의 최상단으로 호이스팅은 되지만, 선언되고 초기화되기 전까지는 temporal dead zone 영역에 속하게 된다.
참고 자료
https://www.youtube.com/watch?v=HsJ4oy_jBx0
https://www.yalco.kr/27_scope/
https://poiemaweb.com/es6-block-scope
