이 글은 zeroCho blog : ES2015(ES6) Const, Let의 내용을 복습하기위해 다시 정리한 것입니다.
var let const의 차이는 무엇일까요?
기존 var과의 가장 큰 차이점은, const와 let은 함수스코프를 따르지 않고 블록스코프를 따른다는 것입니다. 함수 본문 내에서 var로 선언한 변수는 선언 위치와 상관없이 함수 본문이 시작되는 지점에서 정의되는데 이렇게 변수가 끌어올려 지는 현상을 ‘호이스팅(hoisting)’이라고 부릅니다.
1
2
3
4
5
6
7
8
9
10
11
if (true) {
var test = true;
}
alert(test); // true(if 문이 끝났어도 변수에 여전히 접근할 수 있음)
if (true) {
let test = true;
}
alert(test); // Error: test is not defined
블록스코프란 해당 변수를 해당 블록에서만 접근할 수 있는 것을 말합니다.
var은 블록스코프가 아닌 함수스코프라서 if 블록과는 상관없이 접근할 수 있지만, const와 let은 블록 바깥에서는 접근할 수 없습니다.
1
2
3
4
5
6
7
function sayHi() {
alert(phrase); //undefined
var phrase = "Hello";
}
sayHi();
변수를 선언한 곳보다 더 위에서 해당 변수에 접근할 수 있는 경우가 있습니다. 따라서 위의 예는 error가 아닌 undefined가 alert창에 띄게 됩니다. 위 예제는 아래 코드처럼 동작하게 됩니다.
1
2
3
4
5
6
7
8
9
function sayHi() {
var phrase; // 선언은 함수 시작 시 처리됩니다.
alert(phrase); // undefined
phrase = "Hello"; // 할당은 실행 흐름이 해당 코드에 도달했을 때 처리됩니다.
}
sayHi();
const와 let을 사용할 때는 선언한 곳보다 위에서 접근하는 것이 금지됩니다.
1
2
3
4
5
6
7
function sayHi() {
alert(phrase); //Uncaught ReferenceError: Cannot access 'phrase' before initialization
let phrase = "Hello";
}
sayHi();
var는 변수 선언 방식에 있어서 큰 단점을 가지고 있습니다.
이미 선언한 변수를 아래에서 한 번 더 선언하면, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있습니다. 코드량이 많아 진다면 앞서 선언한 변수의 값이 쉽게 바뀔 우려가 있습니다.
ES6 이후, 이를 보완하기 위해 추가 된 변수 선언 방식이 let 과 const 입니다.
var 로 선언된 변수와는 달리 let 로 선언된 변수를 선언문 이전에 참조하면 참조 에러(ReferenceError)가 발생합니다.
이는 let 로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문입니다.
이처럼 let과 const는 변수 재선언이 되지 않습니다.
그렇다면 let 과 const 의 차이점은 무엇일까요?
이 둘의 차이점은 immutable 여부입니다. let 은 변수에 재할당이 가능합니다. 아래에서 해당 변수에 새로운 값을 정의할 수 있습니다. 반면, const는 변수 재선언, 변수 재할당 모두 불가능합니다.
1
2
3
4
const a = hello;
a = world; // Uncaught TypeError: Assignment to constant variable.
let b = hello;
b = world; // world
const는 다시 대입하는 것만 막지, const에 할당된 객체나 배열의 요소를 바꾸는 것은 막지 않습니다. 즉 데이터의 주소값만 고정합니다.
1
2
3
const c = [1, 2, 3];
c[0] = 4;
c; // [4, 2, 3]
출처:
zeroCho blog : ES2015(ES6) Const, Let
1