✨ 변수 선언
자바스크립트에서 변수 선언 시 var, let, const를 사용할 수 있다.
어떤 때에 무엇을 사용해야 하는지 각각의 특징에 대해 살펴보겠다.
각각의 특징에 대해 알아보며 호이스팅이라는 개념이 나오는데,
호이스팅의 개념에 대해서도 알아보도록 하자.
✨ var, let, const
var
var는 ES6 이전에 자주 사용되었으나 현재는 잘 사용되지 않는다고 한다.
(ES6 : ECMAScript 6. 2015년에 도입된 자바스크립트 표준. ES6에서부터 let, const 도입)
var는 중복 선언이 가능하다.
var a = 1;
console.log(a); // 1
var a = 2;
console.log(a); // 2이렇게 이미 선언된 변수를 중복하여 선언하여도 에러가 발생하지 않는다.
var는 함수 스코프이기 때문에 함수 내에서 선언된 변수인 경우 함수 내에서만 사용이 가능하다.
function print() {
var a = 3;
console.log(a); // 3
}
console.log(a); // RefeferenceError 발생
함수 외에 선언된 경우 어디서든 선언이 가능한데 블록 스코프를 따르는 let과의 차이점이 무엇인가 했더니
var는 함수 스코프이기 때문에 예를 들어 함수 외의 for문에서 선언된 변수의 경우 전역 변수 취급되어 for문 밖에서도 사용이 가능하다는 점이었다.
for(var i = 0; i < 3; i++) {
console.log(i); // 0, 1, 2
}
console.log(i); // 2for문이나 if문은 함수가 아닌 제어문이므로 위와 같이 사용 가능.
var는 호이스팅으로 인해 선언 전에도 접근이 가능하다
console.log(a); // undefined 출력
var a = 3;
console.log(a); // 3호이스팅으로 인해 undefined로 초기화된 상태이기 때문에 선언 전에 참조하여도 오류가 발생하지 않는다.
let, const
let, const는 중복 선언이 불가하다.
let a = 3;
let a = 4; // SyntaxError 발생
const b = 3;
const b = 4; // SyntaxError 발생
let은 값 재할당이 가능하지만 const는 상수 선언 키워드이기 때문에 재할당이 불가하다.
const a = 1;
a = 3; // TypeError 발생
let, const는 블록 스코프로 {} 블록 내에서 선언될 경우 블록 내에서만 접근이 가능하다.
function print() {
let a = 3;
const b = 4;
console.log(a); // 3
console.log(b); // 4
}
console.log(a); // RefeferenceError 발생
console.log(b); // RefeferenceError 발생
let, const는 선언 및 초기화 이전에 접근이 불가하다.
호이스팅은 발생하지만 var와 다르게 동작하기 때문에 접근이 불가하다.
console.log(a); // RefferenceError 발생
let a = 3;
console.log(a); // 3
✨ 호이스팅 hoisting
호이스팅은 자바스크립트가 실행 전에 코드를 스캔하여 변수/함수 선언을 미리 메모리에 할당하는 것을 말한다.
호이스팅 때문에 선언 전에 접근이 가능해지는 것이다.
var로 선언된 경우 선언, 초기화 이전에 접근이 가능하지만 let,const는 접근이 불가한데
이는 let, const와 var는 호이스팅이 다르게 작동하기 때문이다.
let, const는 호이스팅 되어 TDZ라는 공간에 할당된다.
TDZ는 Temporal Dead Zone이라는 의미로 선언은 되었지만 초기화되지 않은 변수가 있는 공간이다.
var는 호이스팅 시 선언, 초기화까지 되지만
let, const는 선언은 되지만 초기화는 되지 않기 때문에 TDZ에 등록되기 때문에 초기화 전 접근이 불가한 것이다.
