[JavaScript] var, let, const ?

ECMAScript2015에서 let과 const가 등장한 이후로 개발자들이 var 대신 let, const를 주로 활용하고 있습니다.

자바스크립트의 장점이자 어찌보면 단점이라고도 생각되는 유연성을

let과 const가 그 단점을 보안해주는 역할을 합니다.

 

이제 var와의 차이점을 하나씩 알아보겠습니다.

---

var : function-scoped 

let, const : block-scoped

var는 함수를 기준으로 스코프가 생성이 되며, let과 const는 블록을 기준으로 스코프가 생성됩니다.

 

if(true){
var a = 2;
}
console.log(a)

if(true){
let a = 2;
}
console.log(a)

위에 var로 선언한 a변수는 정상적으로 콘솔에 나타나는 반면,

let으로 선언한 a변수는 에러가 발생합니다.

그 이유는 let과 const는 if라는 중괄호 안에서만 사용이 가능하기 때문이죠.

---

전역객체에 저장 X

var a = "global";
let b = "global";

console.log(window.a);
console.log(window.b);

또한 var로 선언한 전역변수는 전역객체에 저장이 되는 반면,

let과 const로 선언한 전역변수는 전역객체에 저장이 되질 않습니다.

그렇기에 아래 결과는 a는 정상적으로 출력이 되고, b는 undefined가 나오게 됩니다.

---

선언문이 실행되기 전에 사용 X

console.log(a);
var a = 3;

console.log(a);
let a = 3;

var로 선언했을 때에는 호이스팅을 통해 undefined가 할당이 되어 undefined가 출력이 됐었습니다.

하지만, let과 const는 선언문이 실행되기 전까지는 초기값이 할당이 되질 않아

let a = 3; 처럼 초기값을 주기 전에 a를 호출하게 되면 초기값이 없기 때문에  접근할 수 없게 되어

에러가 발생합니다.

---

temporal dead zone(TDZ)

처음엔 let과 const는 호이스팅이 안되는거 아닌가? 라는 생각을 했었는데 호이스팅은 됩니다.

temporal dead zone(TDZ)라는게 있습니다.

TDZ는 초기화되지 않은 변수가 있는 곳이라는 의미입니다.

let letValue = 'out Scope';
function hoistedLet() {
  // letValue가 TDZ에 영향을 받는 순간
  console.log('letValue', letValue); // ReferenceError
  let letValue = 'inner scope'; // letValue가 초기화 됨으로써, TDZ가 끝나게 됩니다.
};
hoistedLet()

(코드출처)

 

위에서 만약 호이스팅이 되지 않았다면 'out Scope'가 실행이 되었겠지만,

호이스팅이 작동이 되어 hoistedLet()함수 내에 있는 letValue 변수가 호이스팅이 되었지만 초기값이 없기 때문에

ReferenceError가 발생하게 됩니다.

 

let과 const는 초기값이 지정되기 전까지는 TDZ에서 대기합니다.

---

재선언 X

 

let과 const는 var와 다르게 '재선언'이 불가능 합니다.

var a = 3;
var a = 3;

let b = 3;
let b = 3;

const c = 3;
const c = 3;

var에서는 저렇게 해도 에러가 나지 않았지만,

let과 const에서는 에러가 발생하게 됩니다.

---

let과 const 차이 재할당 여부

let a = "String";
const b = "String";
console.log(a);
console.log(b);

a = "String1";
console.log(a);
b = "String1";
console.log(b);

let은 재할당이 가능합니다.

처음에 "String"으로 선언을 한 후에 다시 "String1"으로 재할당을 하더라도

에러가 나질 않지만, const는 에러가 발생하게 됩니다.

 

---

ECMAScript2015 이후에는 변수 선언 시 아래  방식으로 많이 이용합니다.

- var는 사용하지 않는다.

- const를 default로 사용을 한다.

- 재할당이 필요로 할 때에만 let으로 변경하여 사용한다.