var 키워드는 ES5까지 변수를 선언할 수 있는 유일한 방법이었습니다.var 키워드로 선언된 변수는 아래와 같은 특징이 있는데요, 이는 다른 언어와는 다른 특징으로 주의를 기울여야 합니다. 아래는 var 키워드의 특징입니다.
1.함수 레벨 스코프(Function-level Scope)
- 함수의 코드 블록만을 스코프로 인정합니다.
따라서 전역 함수 외부에서 생성한 변수는 모두 전역 변수입니다. 이는 전역 변수를 남발할 가능성을 높입니다. - for문의 변수 선언문에서 선언한 변수를 for문의 코드 블록 외분에서 참조 할 수 있습니다.
var foo = 123;
console.lof(foo); // 123
{
var foo = 456; //전역 변수
}
console.log(foo); // 456
- 블록 레벨 스코프를 따르지 않는 var 키워드의 특성상 코드 블록 내의 변수 foo는 전역 변수이다. 그런데 이미 동일 이름의 전역 변수가 선언되어 있다.
var 키워드를 사용하여 선언한 변수는 중복 선언이 허용 되기 때문이다.(아래에서 계속)
2.변수 중복 선언 허용
- 의도하지 않은 변수 값의 변경이 일어날 가능성이 큽니다.
var x = 1;
console.log(x); //1
//변수의 중복 선언
var x = 100;
console.lod(x); //1003.var 키워드 생략 허용
- 암묵적인 번역 변수를 만들 가능성이 큽니다.
4.변수 호이스팅
- 변수를 선언하기 이전에 참조할 수 있습니다.
- var 키워드로 선언된 변수는 선언 단계와 초기화 단계가 한번에 이루어집니다. 즉, 스코프에 변수를 등록(선언단계)하고 메모리에 변수를 위한 공간을 확보한 후, undefined로 초기화(초기화단계)합니다. 따라서 변수 선언문 이전에 변수에 접근하여도 스코프에 변수가 존재하기 때문에 에러가 발생하지 않습니다.
다만 undefined를 반환합니다. 이후 변수 할당문에 도달하면 비로소 값이 할당됩니다. 이러한 현상을 변수 호이스팅(Variable Hoisting)이라 합니다.
대부분의 문제는 전역 변수로 인해 발생합니다. 전역 변수는 간단한 애플리케이션의 경우, 사용이 편리하다는 장점이 있지만 불가피한 상황을 제외하고는 사용을 지양해야 합니다. 전역 변수는 유효 범위(Scope)가 넓어서 어디에소 어떻게 사용할 것인지 파악하기 힘들고 의도하지 않게 변경될 수 있어서 코드의 복잡성을 높이는 원인이 됩니다. 따라서 변수의 스코프는 짧을수록 좋고 이러한 단점을 보안하기 위해 ES6에서는 let과 const 키워드를 도입 되었습니다.
