(JS) var를 지양해야하는 이유

JS가 탄생할 당시에는 변수를 선언할 때 사용할 수 있는 예약어가 var밖에 없었다.

 

 

하지만 JS는 점차 발전했고, ES6(ECMA Script 2015)의 발표에서 let과 const가 추가되었다.

 

 

 

제목에서 말했듯, var를 지양하고 let, const를 사용해야하는 이유가 뭘까? 어떤 문제가 있는걸까?

 

 

 

🧐선언 문제

---

아래 코드를 보자.

 

var computer = "mac";
var computer = "mac2";
var computer = "mac3";

console.log(computer);

 

이 코드를 실행하면 어떻게 될까?

 

 

Java와 C++이라면 상상도 하지 못할 일이 발생한다.

 

 

에러가 없이 실행이 되는 것도 모자라서, mac3라는 문구가 출력된다.

 

완전히 동일한 변수 이름으로 다른 값을 넣어 선언 했음에도 잘 동작하는 것이다.

 

 

그럼 아래의 코드를 보자.

 

let computer = "mac";
// let computer = "mac2"; -> 에러 발생

const com = "mac";
// com = "mac2"; -> TypeError 발생

 

let과 const의 경우 같은 변수 이름으로 변수를 선언하려 하면 에러를 발생시킨다.

 

그렇기 때문에 var보다 훨씬 안전하게 사용이 가능하다.

 

 

특히 const의 경우 재할당을 허용하지 않기 때문에 아주 안전하게 사용 가능하다.

 

 

 

🧐Scope 문제

---

var의 문제는 저런 선언의 문제만 있는 것이 아니다.

 

 

함수 혹은 block 단위에서도 문제가 발생한다.

 

 

아래 코드를 보자.

 

 

var global = "global";
if(global === "global") {
    var global = "region";
    
    console.log(global);
}

console.log(global);

 

이 코드의 첫 번째 출력 값과 두 번째 출력 값은 뭘까?

 

 

 

이상하게도 첫 번째 출력 값과 두 번째 출력 값 모두 region이다.

 

 

 

if 문 안에 있는 선언이 전역 변수의 값 까지 오염시킨 것이다.

 

 

아래 코드를 보자.

 

let global = "global";

if(global === "global") {
    let global = "region";
    
    console.log(global);
 }
 
 console.log(global);

 

이 코드는 기대한 것 처럼 

 

첫 번째 출력은 region, 두 번째 출력은 global로 잘 출력 되는 것을 알 수 있다.

 

 

 

 

이러한 문제가 있기 때문에

 

반드시 let, const를 사용하자.