var는 함수레벨의 스코프이고 중복선언이 가능하다.
가장 간단한 예시로는 아래의 코드로 설명할 수 있다.
var a = 10;
console.log(a) // 10
var a = 20;
console.log(a) // 20
var 로 선언한 변수는 동일한 이름으로 여러 번 중복해서 선언이 가능하고 마지막에 할당된 값이 변수에 저장된다. 위의 코드를 보면 에러없이 각자 다른 출력값을 보여주는 것을 볼 수 있다.
이러한 점은 변수를 유연하게 사용할 수 있다는 장점이 될 수도 있지만, 선언해둔 변수의 존재를 잊고 값을 재할당하는 등의 실수가 발생할 가능성이 크고, 특히 코드량이 많아졌을 때, 동일한 변수명이 여러 번 선언되었다면 어디 부분에서 문제가 발생하는지 파악하기 힘들고 값이 바뀔 우려가 있다.
이를 보완하기 위해 ES6부터 추가된 변수 선언 방식이 let 과 const이다.
let은 블록레벨의 스코프이고 재할당은 가능하지만 중복선언은 불가하다.
let 역시 간단한 코드로 설명할 수 있다.
let a = 10;
console.log(a); // 10
let a = 20;
console.log(a);
// Uncaught SyntaxError: Identifier 'a' has already been declared
a = 20;
console.log(a); // 20
var 와 다르게 let 은 해당 변수가 이미 선언되었다는 에러 메시지가 출력되고, 중복 선언이 불가능하다는 것을 볼 수 있다.
a = 20 과 같이 변수 선언 및 초기화 이후 반복해서 다른 값을 재할당은 가능하다.
const는 블록레벨의 스코프이고 재할당과 중복선언이 불가능하다
const a = 10;
console.log(a); // 10
const a = 20;
console.log(a);
// Uncaught SyntaxError: Identifier 'a' has already been declared
a = 20;
console.log(a);
// Uncaught TypeError: Assignment to constant variable
스코프
🙌 아래는 함수레벨 스코프(var)에 대한 예시이다.
function hi() {
if (true) {
var a = 5;
console.log(a); // 5
}
console.log(a); // 5
}
func(); // 5
console.log(a); // ReferenceError: a is not defined
🙌 블록레벨 스코프(let, const)
function hi() {
if (true) {
let a = 5;
console.log(a); // 5
}
console.log(a); // ReferenceError: a is not defined
}
console.log(a); // ReferenceError: a is not defined
✈ 호이스팅
먼저 말할 것은, 호이스팅은 var / let / const 모두에게서 일어난다는 것이다.
하지만 호이스팅에서 var와 let,const의 차이점은 분명히 존재한다.
🙌 var의 호이스팅
console.log(a); // undefined
var a = 5;
console.log(a); // 5
🙌 let,const의 호이스팅
console.log(a); // ReferenceError: a is not defined
let a = 5;
console.log(a); // 5