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

 

 

Javascript에서 변수를 선언할 수 있는 키워드는 let입니다.(ES6에 추가된 문법)

let이전에는 var을 사용했지만 var 사용을 권장하지 않는 이유에 대해 알아보겠습니다.

 

 

변수 선언 후 중복 가능

var name = 'Hyoni';
console.log(name); //Hyoni

var name = 'Bob'; //Bob
console.log(name);

var를 사용하면 이미 선언된 변수를 중복해서 선언할 수 있습니다.

 

 

선언되지 않은 변수 참조 가능

console.log(age); // 출력: undefined
age = 4; // 값 할당
var age; // 변수 선언

정상적인 코드라면 변수를 선언하고 값을 할당한 뒤 출력해야 합니다.

 

위 코드는

출력했을 때 변수가 선언되어 있지만 값은 undefined라고 나옵니다.

 

대부분의 프로그래밍 언어에서는 변수를 선언하고 나서 값을 할당하는 것이 정상적입니다.

 

하지만 Javascript에서의 var는 선언도 하기 전에 값을 할당하는 것이 허용됩니다.

심지어 값을 할당하기 전에도 출력이 가능합니다.

 

이 코드를 let을 이용해 동일하게 한다면 "초기화 전에 'age'에 액세스 할 수 없다"라는 error가 발생합니다.

console.log(age);
age = 4;
let age;

보통은 이렇게 error가 발생하는 것이 정상적입니다.

 

하지만 var를 사용하면 값을 선언하기도 전에 사용할 수 있습니다. 

이것을 var hoistiong이라고 합니다.

 

 

var 호이스팅(hoistiong)

변수 선언들은 어느 코드가 실행되기 전에 처리하기 때문에

코드 안에서 어디에 선언했는지에 상관없이 최상위에 선언한 것과 동등합니다.

이것은 변수가 선언되기 전에 사용될 수 있다는 것을 의미합니다.

변수를 어디에 선언했는지에 상관없이 항상 제일 위로 선언을 끌어올려 주는 것을

"호이스팅(hoistiong)"이라고 합니다.

 

 

var를 사용하지 않는 또 다른 이유는 var는 함수 코드 블록({})만 scope로 인정합니다.

이는 함수 외부에서 선언된 모든 변수는 전역 변수인 것을 의미합니다.

 

**scope 대해서는 아래 포스팅을 참조하세요.

[Javascript] 스코프(scope) - 전역, 지역(함수, 블록)

 

 

var는 함수(function) scope입니다. (함수 블록 범위{})

var hello = 'global hello!'
function sayHello() {
  var hello = 'function hello!';
  console.log(hello);
}

sayHello(); // function hello!
console.log(hello); // global hello!

var는 블록({}) 단위의 scope이 아닌 함수(function) 단위의 scope를 가집니다.

 

위 코드를 보면

hello라는 변수의 유효범위가 함수 블록 안이라는 것을 알 수 있습니다.

 

 

var hello = 'hello';
if (true) {
  var hello = 'hello hello hello';
}

console.log(hello); // hello hello hello

위 코드는

var로 hello라는 전역변수를 선언하고

if 내부에 hello변수를 새로 선언하였습니다.

 

콘솔로 출력을 해보면 if 내부에서 선언한 'hello hello hello'가 출력된 것을 볼 수 있습니다.

hello의 값이 변경된 이유는

var로 선언한 변수의 scope은 블록({}) scope이 아닌 함수(function) 블록 scope이기 때문에

hello변수가 블록({}) 바깥에서도 변경된 것입니다.

 

 

변수를 선언할 때는 var를 지양하고 let과 const 사용을 권장합니다.