javascript/var를 더이상 사용하지 않는 이유

참고

모던자바스크립트 Deep Dive

https://velog.io/@wksh229/JavaScript-var-%EC%93%B0%EC%A7%80%EB%A7%88-%EC%A0%9C%EB%B0%9C

https://batcave.tistory.com/39

https://valueengine.tistory.com/15

 

 

---

 

 

var의 특징

 

var는 variable(변수)의 준말로, Javascript ES5에서는 var 키워드만이 변수를 선언하는 유일한 방법이었다. 그러나 ES6부터는 let, const 키워드를 지원하면서 var의 사용을 지양하고있다.

var에는 다음과 같은 특징이 있다.

1. function scope(함수 내부에 있다면 선언 위치에 관계없이 사용이 됨)
2. var 키워드 생략 허용
3. 중복 선언 허용
4. 변수 호이스팅

 

하지만 var의 이런 특징들로 인해 문제점들이 발생한다.

 

---

 

var의 문제점

 

1. function-level scope

 

일단 자바스크립트에서의 스코프에는 전역스코프, 지역스코프로 나눌 수 있다.

- 전역 스코프(global scope) : 코드 어디에서든 참조할 수 있음

- 지역 스코프(local scope) : 정의된 블록 내에서만 참조 가능

 

즉 전역 변수는 전역 스코프를 갖는 변수로 전역에서 참조할 수 있으나,

지역변수는 지역 스코프를 갖는 변수로 그 지역 및 지역의 하부에서나 참조할 수 있게 된다. 

 

var 키워드는 function-level scope(함수 레벨 스코프), let 키워드는 block-level scope(블록 레벨 스코프)를 갖고 있으며, 둘다 지역스코프에 속한다.

 

1) 함수 레벨 스코프 - var : 함수 블록 내에서 선언한 변수만 지역 스코프로 인정해주며, 함수 자신과 하위 함수에서만 참조 가능. 그 이외의 블록에서 선언하면 전역변수로 취급함. 

2) 블록 레벨 스코프 - let : 블록(if문, for문, while문 등) 내에 선언된 지역변수는 블록 내부에서만 접근하게 해줌

 

즉, 함수 레벨 스코프를 따르는 var 키워드는 아래와 같이 함수가 아닌 다른 블록이라면 그 밖에서도 블록 내 var 변수를 참조할 수 있게 되어버린다. 아래의 경우에는 함수 내 외 전부 var a를 선언하고 값을 출력한 모습이다.

var a = 10;

function abcd() {
    var a = 'var';
    console.log(a);
}

abcd(); // 지역변수 
console.log(a); // 전역변수

 

 

function 내에서도 a가 선언되었으나 그나마 함수 내에서만 var a = 'var'로 할당한 지역변수인 a이기 때문에,

함수가 종료되고 나서는 사라지고 전역변수 a의 값인 10이 출력된 모습이다.

 

문제는 function 외에 if문, for문 등의 다른 블록들에서 선언하게 되면 다음과 같이 전역변수로 사용된다

 

for(var i = 0; i < 5; i++){
  console.log(i)
}
console.log('for문 끝');
console.log(i);

i++;
console.log(`i의 값은 ${i}`);

 

 

이처럼 var를 사용해 변수를 선언할 경우 내 의도와 관계없이 전역변수의 남발로 이어질 수 있다.

 

 

2. 중복 선언 허용

 

변수를 중복선언을 할 경우, 미리 선언해둔 다른 변수의 이름을 깜빡하고 또 사용한다면 그 값이 결국 달라질 수 있다.

 

var aibao = "panda";
console.log(aibao);
var aibao = "wolf";
console.log(aibao);

 

위의 예시는 4줄밖에 안되는 코드라 당연히 파악할 수 있지만, 만약에 1000줄이 넘어가는 긴 코드에서 내가 aibao에게 'panda'라는 값을 할당한 것을 까먹고 또 'wolf'라는 값을 할당하는 경우가 생길 수도 있다.

 

 

let의 경우 aibao는 이미 선언되었다며 에러가 발생하지만, var로 선언한 aibao는 아래와 같이 늑대가된다... 

 

 

 

 

3. 변수 호이스팅

 

호이스팅(hoisting)

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것

=> 즉, 변수가 선언된 시점보다 먼저 실행되는 현상

 

사실 var뿐만 아니라 let, const, function 등 모든 식별자들이 호이스팅이 되지만, var만 문제인 이유가 있다.

 

console.log(aibao); // undefined
var aibao = "panda";
console.log(aibao); // panda

 

 

1행 : 처음에 console.log(aibao);가 실행되기 이전,

        var aibao="panda";가 호이스팅되어 aibao가 변수 객체에 등록되고 값은 undefined로 초기화된다. 

2행 : 이후 var aibao = "panda"로 값이 할당되고,

3행 : 마지막에 console.log(aibao);에서 panda로 출력된다.

 

 

물론 let도 호이스팅이 되지만, var와는 달리 위 이미지와 같은 참조에러가 발생한다.

javascript는 변수 선언 초기화 작업이 분리되어 진행되는데, var와 달리 let은 선언이 안된 상태에서 값에 접근할때의 문제를 방지하기 위해 TDZ(Temporal Dead Zone, 일시적 사각지대)로 에러를 발생한다. 

 

 

---

 

 

이러한 이유들이 있어 var는 이제 사용하지 않으며, 굳이 쓸 필요조차 없어졌다.