var을 사용하면 안 되는 이유

나는 자바스크립트를 ES6 버전으로 배웠기 때문에 var 대신 let과 const만 썼다. 그냥 그렇게 써야한다니까 썼는데 어느날 문득 var을 쓰면 안 되는 이유가 궁금해졌다. 한줄로 요약하자면, 일반적으로 오류로 취급되어야할 문법들이 var을 사용하면 허용되기 때문에 느슨해진 JS의 기강을 잡기위해(?) let과 const를 만든 것... 이라고 할 수 있다. 더 자세히 알기 위해서는 먼저 호이스팅이라는 개념을 알아야한다.

 

호이스팅이란?

a라는 놈이 있구나~ 일단 기억해두고 나중에 부르면 값 바꿔줘야지~ 

함수가 실행되기 전에 함수 안의 변수를 scope의 최상단으로 끌어올리는 것을 말한다. 즉, JS는 실행 전에 어떤 변수가 쓰였는지 파악하고 선언과 동시에 undefined로 초기화 해버린다. 보통은 언어에서 변수를 쓸 때는 반드시 선언을 먼저 해줘야 오류가 나지 않기 때문에 익숙하지 않은 개념이다. 예시 코드를 보자. 맨 위부터 순차적으로 실행되므로 첫번째 줄에서는 아직 a에 대한 정보가 없다. 그래도 오류가 나지 않고 undefined 라고 출력이 된다. 이것이 var의 첫번째 문제점이다.

console.log(a)
var a=10

 

여기서 주의할 점이 있다. 함수 안의 변수만 지역변수로 호이스팅이 되고 나머지는 전역변수로 올려준다. 따라서 for문, if문 안에서 선언했다고 해도 얘네는 함수가 아니기 때문에 전역변수 취급을 받는다. 따라서 for(var i=0; ...) 속 i는 for문 밖에서도 쓸 수 있다. var의 두번째 문제점이다.

 

var은 중복인 변수 이름을 사용할 수 있다. 놀랍게도 아래와 같은 코드는 오류없이 동작한다. var의 세번째 문제점이다.

var a=1
var a=2

 

let을 사용하면 위의 세가지 문제점이 다 해결된다. 그렇다면 let은 호이스팅이 안 되는 걸까?? 아니다. let도 호이스팅된다. 하지만 제한이 있다. let에게는 TDZ(Temporal Death Zone)라는 개념이 도입됐는데, 호이스팅으로 변수들을 미리 기억하되 일시적으로 죽은 zone으로 취급하는 것이다. 아래와 같은 코드를 실행시키면 ReferenceError: Cannot access 'a' before initialization 라는 오류가 뜬다. 변수 a가 누군지 선언하는 코드가 나오기 전까지는 죽은놈이기 때문에 a에 접근할 수 없는 것이다.

console.log(a)
let a=1