변수를 선언하는 세가지의 방법이고, ES6로 넘어오면서 let과 const가 생겼다.
기존 var 의 문제점이 3가지가 있었는데
-
중복선언이 가능하며 그로 인해 예기치 못한 값을 반환할 수 있다.
-
함수 외부에서 선언한 값이 전역으로 선언된다.
var a = 1
if (true) {
var a = 5
}
console.log(a) // output: 5
함수 외부에서 a를 전역으로 선언하고 함수 내부에서 중복으로 선언되면서 함수 외부에 있는 콘솔도 5로찍힌 모습이다.
- 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다.
자바스크립트에서는 코드를 순차적으로 한줄씩 실행하는데, 호이스팅을 통해 변수선언문을 먼저 실행한다.
하지만 선언까지만 실행하고 할당은 런타임중에 실행된다.
변수를 선언할때 변수의 존재를 알리는 선언단계와 변수를 저장할 메모리를 확보하고 암묵적으로 undefined를 할당하는
초기화 단계가 있는데, 초기화 단계 이전에 변수에 접근하면 undefined가 뜬다.
let과 const는 이러한 단점을 보완했는데 일단
let은 중복선언이 불가능하지만 재할당은 가능하다.
const는 중복선언이 불가능하고 재할당조차 불가능하다.
원시값의 재할당은 불가능하지만 객체의 재할당은 가능하다
const a = { name : 'inho' }
a.name = 'hoho'
console.log(a) // output : { name : hoho }와 같이 const로 선언한 객체의 값은 재할당이 가능하다.
또한 let과 const는 코드블록을 지역스코프로 인정하는 블록레벨스코프를 따른다.
let a = 1
if (true) {
let a = 5
}
console.log(a) // output: 1
와 같이 함수 내부의 선언을 지역스코프로 인정해서 함수 외부의 콘솔이 1이 나온다.
그리고 마지막으로 선언과 초기화가 분리되어서 초기화 전에 선언된 값에 접근하면 undefined가 뜨던 var와는 달리
let은 선언과 초기화가 분리되긴 하지만 초기화단계전에 변수에 접근하면 에러가뜬다.
const는 선언과 초기화가 동시에 진행된다. 그렇기 때문에 런타임 이전에 실행될 수는 없다.
지금까지는 그냥 저냥 별생각없이 썼었는데 이런 디테일한 차이점이 있다는게 놀랍고 처음에는
이해도 잘 안갔지만 계속 보다보니까 무엇이 다른건지 알게된 것 같다.
