변수 var이 권장되지 않는 이유
변수 var은 아래와같은 특징을 가지고있다. 이로인해 발생되는 문제점들을 설명한다.
1. 함수 레벨 스코프
2. var 키워드의 생략 가능
3. 변수 중복 선언 허용
4. 변수 호이스팅
1. 함수 레벨 스코프
함수 내에서 선언된 변수는 함수 내에서만 유효하다. 함수 외부에서 선언한 변수는 모두 전역 변수가 된다. 브라우저 환경에서 이 전역 변수는 전역 객체의 프로퍼티가 되어 전역 객체의 생명 주기를 따르게 된다. 즉, 전역변수는 웹페이지를 닫을때까지 메모리를 차지하게 되며 이는 메모리 리소스 관리에 비효율적이다.
let 과 const는 블록 레벨 스코프를 따른다. 이는 변수의 생명 주기를 단축시킬수 있어 메모리 관리에 효율적이다.
2. var 키워드 생략가능
키워드를 생략하여 변수들을 선언하다보면 의도치 않은 전역 변수들을 양산할 수 있다.
3. 변수 중복 선언 허용
var 로 선언된 변수는 같은 스코프 내에서 중복 선언 시 자바스크립트 엔진에 의해 자체적으로 해석하여 동작한다.
초기화문이 있을경우 var 키워드가 없는 것처럼 동작되고 초기화문이 없는 선언문은 무시된다.
var a = 1;
var b = 1;
var a = 100; // 초기화문이 있어 a = 100; 으로 해석됨
var b =; // 초기화문이 없어 무시
console.log(a,b); // 100 , 1이는 개발시 의도치 않게 동일한 변수명을 선언하여 먼저 선언된 변수 값이 변경되는 문제점을 유발할 수 있다.
4. 변수 호이스팅
호이스팅(Hoisting)이란?
변수,함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 방식 ( 이때 함수 표현식은 Hoisting 되지 않는다 )
- 모던 자바스크립트 Deep Dive , p42
* 함수 선언식과 표현식:
// 함수 선언식 function declaration () { ... } // 함수 표현식 const expression = function () { }; // or const expression = () => { };
JavaScript내에서 모든 변수는 Hoisting이 이루어지지만 var은 let과 다르게 선언 단계와 초기화 단계가 동시에 이루어진다. (단, 선언단계때 먼저 undefined로 초기화됨) 참조
이는 코드자체의 가독성을 떨어뜨리고, 다음과 같이 변수의 초기화순서에 혼란을 일으킨다.
a = "Hello";
function func() {
console.log(a);
var a = "Nice to meet you" // 함수내 최상단에서 undefined로 선언
console.log(a);
}
func();
// undefined
// Nice to meet you
참고자료
- 변수 호이스팅과 전역변수의 문제점 : 모던 자바스크립트 Deep Dive p42, p208
- 변수의 생명 주기 : 모던 자바스크립트 Deep Dive p201
