[JavaScript] var를 지양해야 하는 이유

var를 지양해야 하는 이유

• 재선언이 가능하므로 코드에 에러가 생길 수 있다.

var은 같은 변수명으로 재선언이 가능합니다. 이로 인해서 코드가 길어졌을 때 의도치 않게 같은 변수명을 선언했을 경우 밑에 선언된 var의 변수의 데이터가 할당되게 됩니다.

var age = 22;
var age = 23;
var age = 24;
var age = 25;

console.log(age); // 25

만들었던 프로젝트의 코드가 몇천 줄이 넘어갈 때 100번째 줄에서 var age를 선언하고 3500번 줄에서 다시 한번 var age를 선언하게 된다면 3500번 줄에서 재 선언한 age의 데이터가 할당되게 됩니다. 그러면 결괏값이 의도치 않게 다른 값을 출력할 수 있게 되고 이 오류를 찾기 위해서 코드를 다시 한번 살펴봐야 합니다. 물론 age의 변수만 찾아서 할 수 있지만 ES6에 나온 let 키워드를 사용하면 재선언이 불가능하므로 코드를 작성할 때 미리 파악하고 다른 변수명을 작성할 수 있습니다.

중복 선언을 해도 오류가 나타나지 않는 것이 큰 특징입니다.

let age = 22;
let age = 23;
let age = 24;
let age = 25;

console.log(age); // SyntaxError: Identifier 'age' has already been declared

let으로 하면 이렇게 이미 age라는 변수명이 이미 선언돼있다고 오류를 출력하게 됩니다.

 

• scope에 차이
  • var은 function scope
  • let과 const는 block scope

var 변수 = 'global';

if (변수 == 'global') {
  var 변수 = 'local';

  console.log(변수); // local
}

console.log(변수); // local

이처럼 var을 처음에 변수 = 'global'을 선언과 할당을 했지만 if라는 block안으로 들어와서 재 할당을 함으로써 변수는 'local'로 변경되고 block 밖에서도 'local'이 출력되게 됩니다. 그 이유는 var은 function scope이기 때문에 그렇습니다. 이와 같이 var은 다시 한번 의도치 않은 오류를 범하게 되는 것입니다.

var 변수 = 'global';

function test() {
  var 변수 = 'local';

  console.log(변수);
}
test(); // local
console.log(변수); // global

말했듯이 var은 function scope이기 때문에 function안에서 재 선언 후 할당하면 전혀 다른 변수명으로 인지하게 됩니다.

let 변수 = 'global';

if (변수 == 'global') {
  let 변수 = 'local';

  console.log(변수); // local
}

console.log(변수); // global

let은 block scope이기 때문에 제가 의도했던 대로 local과 global이 출력하게 됩니다. 물론 상황에 따라서 잘 사용하면 되지만 코딩하는 시간도 오래 걸릴 텐데 오류가 생기게 되면 시간을 또 써야 하는 일이 생기기 때문에 var를 지양해야 할 것 같습니다.

 

• 호이스팅

호이스팅은 런타임 시 선언한 변수를 최상단으로 끌어올리는 것을 말합니다. 이로 인해서 코드 결과를 예측하기가 힘들어지게 됩니다. 

console.log(변수); // undefined

var 변수 = '22';

console.log(변수); // 22

let과 const로 선언했다면 맨 윗줄에 변수 출력은 에러가 나타나게 됩니다. 하지만 var는 호이스팅이 존재하기 때문에 데이터는 할당되지 않고 선언만 했다고 간주하게 됩니다. 

test(); // 호이스팅

function test() {
  console.log('호이스팅');
}

test(); // 호이스팅

하지만 함수는 밑에서 작성했지만 결괏값을 출력하게 됩니다. 이러한 결과물이 나타나기 때문에 코드가 많아졌을 때 런타임 결과를 예측하기가 힘들어집니다.

---

오늘은 var를 지양해야 하는 이유에 대해서 다뤄봤는데 혹시나 틀린 내용이 있거나 지적할 내용이 있다면 댓글로 남겨주시기 바랍니다.