var,let,const
Var,let,const
1.변수 선언 방식
선언 -> 초기화 -> 할당
변수=(variable)
var는 function-scoped이고, let, const는 block-scoped이다.
우선,var는 변수 선언 방식에 있어서 큰 단점을 가지고 있다.
var x = 'kkk'
console.log(x) // kkk
var x = 'zzz'
console.log(x) // zzz
변수를 이미 선언한 후에 한번 더 선언을 하였음에도 에러가 나오지 않고 다른 값이 출력된다.
그래서 ES6 이후, 이를 보완하기 위해 추가 된 변수 선언 방식이 let 과 const이다.
위의 구문을 let 으로 바꾸면
let x = 'kkk'
console.log(x) // kkk
let x='zzz'
console.log(x) /// Identifier 'x' has already been declared
이미 변수가 선언 되었다는 에러 메시지가 나온다(const 동일)
즉 변수 재선언이 되지 않는다.
let과 const의 차이는 immutable 여부이다.
let은 변수에 재할당이 가능하다. 그렇지만
let x = 'kkk'
console.log(x) // kkk
let x='zzz'
console.log(x)
console.log(x) /// Identifier 'x' has already been declared
name='zzz'
console.log(x) // ppp
const는 변수 재선언, 변수 재할당이 모두 불가능하다.
const x = 'kkk'
console.log(x) // kkk
const x = 'zzz'
console.log(x) // Uncaught SyntaxError: Identifier 'x' has already been declared
x = 'zzz'
console.log(x) // Uncaught TypeError: Assignment to constant variable
2.호이스팅
호이스팅(Hoisting)이란, var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성을 말한다.
자바스크립트는 ES6에서 도입된 let, const를 포함하여 모든 선언(var, let, const, function, function*, class)을 호이스팅한다.
하지만, var로 선언된 변수와는 달리 let으로 선언된 변수를 선언문 이전에 참조하면 참조에러(ReferenceError)가 발생한다.
console.log(wow); // undefined
var wow;
console.log(hoho); // Uncaught ReferenceError: hoho is not defined
let hoho;
이는 let으로 선언된 변수는 스코프의 시작에서 변수의 선언까지 일시적 사각지대(TemporalDead Zone; TDZ)에 빠지기 때문이다. 참고로, 변수는 선언 단계 > 초기화 단계 > 할당 단계에 걸쳐 생선되는데 var로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어진다. 하지만,
//스코프의 선두에서 선언 단계와 초기화 단계가 실행된다.
//따라서 변수 선언문 이전에 변수를 참조할 수 있다.
console.log(wow); // undefined
var wow;
console.log(wow); // undefined
wow = 10; // 할당문에서 할당 단계가 실행
console.log(wow); // 10
let으로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다.
//스코프의 선두에서 선언 단계가 실행된다.
//아직 변수가 초기화(메모리 공간 확보와 undefined로 초기화)되지 않았다.
//따라서 변수 선언문 이전에 변수를 참조할 수 없다.
console.log(wow); // ReferenceError: wow is not defined
let wow; // 변수 선언문에서 초기화 단계가 실행된다.
console.log(wow); // undefined
wow = 10; // 할당문에서 할당 단계가 실행
console.log(wow); // 10
3.정리
변수 선언에는 기본적으로 const를 사용하고, 재할당이 필요한 경우에 한정해 let을 사용하는 것이 좋다.
그리고 객체를 재할당하는 경우는 생각보다 흔하지 않다. const를 사용하면 의도치 않은 재할당을 방지해 주기 때문에 보다 안전하다.
1. 재할당이 필요한 경우에 한정해 let을 사용한다. 이때, 변수의 스코프는 최대한 좁게 만든다.
2. 재할당이 필요 없는 상수와 객체에는 const를 사용한다.