var를 쓰면 안되는 이유

es6 (es 2015)가 등장하기 이전에는 자바스크립트에서 변수를 선언하기 위한 방법은 var 밖에 없었다. let과 const는 es6에서 등장했다.

let, const : 블록 스코프
var : 함수 스코프

var에는 다음과 같은 문제들이 있다.

1. 함수스코프
함수스코프이기 때문에 다음과 같은 문제가 있다.

function abc() {
    for(var i=0;i<10;i++){
        console.log(i);
    }
    console.log(i)  //i 값 출력됨.
}

보통 i를 let으로 선언했다면 for문 밖에서 i에 접근하는 것은 말도 안되는 일이다. 하지만 i는 var로 선언했기때문에 abc 함수 내부의 어디에서도 접근이 가능한 변수가 되어서 for문 밖에서도 출력이 된다.

2. 전역 스코프를 오염시킨다

var number = 0;
function hello() {
    console.log('함수');
}

이렇게 선언해뒀을때 브라우저의 window객체의 프로퍼티로 들어가게된다. 참고로 함수도 마찬가지이다.

window 객체에서 접근이 가능하다. 이는 굉장히 위험할 수 있다. window가 사전에 가지고 있었던 프로퍼티를 덮어씌워버릴 수도 있기 때문이다. 전역이 오염되는 것을 막기 위해서는 아래와 같이 모듈화를 하는 방법이 있다.

모듈화를 통해 막았다고 하더라도 var에는 수많은 단점이 있다.

3. 호이스팅
해당 var 함수가 속한 스코프의 최상단으로 끌어올려짐
4. 재할당 가능
같은 이름의 변수가 여러번 정의될 수 있음
5. const와 같이 재할당이 불가능하도록 할 수 없음.

 

결론

let을 쓰자!