[Javascript] var를 사용하지 않는 이유

🔥var를 사용하지 않는 이유

 ES6 이후 var를 사용함으로써 발생하는 문제를 해결하기 위해 새로운 변수 선언 방식인 let, const가 등장하였고, Javascript 코드에서 var의 선언 방식은 점차 사라지고 있다. 필자도 그러한 이유로 var 선언 방식을 거의 사용하지 않았다. var는 다음과 같은 문제를 갖는다.

 

💥변수명 중복 생성 가능

var name = "moonstar"
console.log(name)
//moonstar
var name = "blog"
console.log(name)
//blog

 위와 같은 같은 변수명에 서로 다른 값을 할당해도 문제없이 실행되는 모습을 볼 수 있다. 하지만 개발자의 실수로 같은 변수명을 선언하고 할당하는 경우, 기존의 변수에 할당되는 값이 변할 것이며, 그 변수를 사용하는 과정에서 다양한 문제를 일으킬 것입니다.

 

💥다른 선언 방식과 다른 Scope

var name = "moonstar";
function scopeTest() {
  console.log(name);
  var name; 
  name = "blog";
  console.log(name);
}
scopeTest();
//undefined
//blog

 var는 블록 단위의 Scope를 갖는 let, const와 다르게 함수 단위의 Scope를 갖는다. 우선 호이스팅(Hoisting)에 대해 알아보자.

 

⭐호이스팅(Hoisting)

 호이스팅(Hoisting)은 변수 선언 시 그 변수의 Scope 이내에서 최상단으로 올려버리는 현상이다. var로 선언된 변수의 Scope는 함수 단위이다. 호이스팅(Hoisting)을 통해 함수 내에 최상단으로 올린다. 따라서 위의 코드를 해석하면 다음과 같다.

var name = "moonstar";
function scopeTest() {
  //함수 단위의 Scope의 최상단
  var name; 
  console.log(name);
  name = "blog";
  console.log(name);
}
scopeTest();
//undefined
//blog

 

💥for 문 사용 시 문제점

for (var i = 0; i < 5; i++) {
    i;
}
console.log("i:", i);
//5

 for 문 안에 var로 변수를 선언하게 되면, Scope이 함수 단위가 아니기 때문에 전역 변수로 선언이 된다. 그러므로 위의 코드의 선언된 i는 for문이 끝나도 접근할 수 있고, 전역 변수가 남발될 수 있다.

---

💥정리

위와 같은 이유로 인해 var 사용은 지양되고 있다. 다음 포스팅에서는 var의 대안으로 등장한 let, const에 대해 알아보고 두 개의 선언 방식이 어떻게 var의 문제를 해결하였는지 보도록 하겠습니다.