ES6는 var 키워드의 단점을 보완하기 위해 let과 const 키워드를 도입하였다.
var let const 를 아래와 같은 세 가지 기준으로 비교할 수 있다.
- 1)변수 값의 변환
- 2)변수의 유효범위
- 3)호이스팅
1) 변수 값의 변환
var를 사용하면 변수 선언의 경우 할당되는 값이 유동적으로 변경될 수 있는 단점을 가지고 있다.
1
2
3
4
5
6
7
8
var name = "Marcus";
console.log(name);
var name = "Jogeonsang";
console.log(name);
output: Marcus
output: Jogeonsang
name이라는 변수를 2번 선언했는데도 에러가 나오지않고 각기 다른 값이 출력되는걸 볼 수 있다.
하지만 ES6 업데이트 이후로 추가된 변수 선언 방식인 let과 const는 var와 같은 선언 방식을 막고있다.
1
2
3
4
5
6
let name = "Marcus";
console.log(name);
let name = "Jogeonsang";
console.log(name);
output: Identifier 'name' has already been declared
let을 사용했을 경우에는 name이 이미 선언되었다는 에러 메시지가 나오는걸 볼 수 있다. let만 케이스로 집어넣었지만 const도 마찬가지로 변수 재할당이 안된다는 특징을 가지고있다.
그럼 let과 const는 어떤 차이가 있을까? let과 const의 차이점은 변수의 immutable여부이다.
let은 변수에 재할당이 가능하지만, const는 변수 재선언, 재할당 모두 불가능하다. 예시를 살펴보자.
let
1
2
3
4
// let
let testCase = 'let' // output: let
let testCase = 'let2' // output: Uncaught SyntaxError: Identifier 'testCase' has already been declared
testCase = 'let3' // output: let3
const
1
2
3
const testCase = 'const' // output: const
const testCase = 'const2' // output: Uncaught SyntaxError: Identifier 'testCase' has already been declared
testCase = 'const3' // output: Uncaught TypeError:Assignment to constant variable.
2) 변수의 유효범위
var는 기본적으로 function scope를 가지게되고 let, const는 block scope를 가지게된다.
var
1
2
3
4
5
6
7
8
var foo = "This is String.";
if(typeof foo === 'string'){
var result = true;
} else {
var result = false;
}
console.log(result); // result : true
let과 const
1
2
3
4
5
6
7
8
var foo = "This is String.";
if(typeof foo === 'string'){
const result = true;
} else {
const result = false;
}
console.log(result); // result : result is not defined
3) 호이스팅
var, let, const 모두 호이스팅은 된다. 하지만 차이점은 존재한다. 자세한 내용은 여기를 참고하자.