[JavaScript] var, let, const 비교 - var is used instead of let or const

 

 

인텔리제이를 작년에 처음 사용해봤는데 자바스크립트를 개발할 때 평소처럼 var을 사용했더니'var is used instead of let or const' 라는 메시지가 보여졌다.

 

메시지를 번역해보면 'var'대신 'let'이나 'const'를 사용하라는 것이다. sts를 사용할 땐 저런 메시지가 나오지 않았는데 왜  'var'대신 'let'이나 'const'를 사용하라는건지 서치해보았다!

 

es6부터는 var대신 새로운 변수 선언 방식을 사용할 수 있다. 물론 var사용을 못하는 건 아니지만  인텔리제이에서 새로운 표준에 맞게 개발하라는 경고 메시지를 띄어주는 것이다.

그리고 최근의 많은 자바스크립트 강좌에서도 가급적 var 대신에 let이나 const 키워드를 사용하여 변수를 선언하라고 가이드하고 있다고 한다!

( es6란? ECMA라는 국제 기구에서 만든 표준문서인 ECMAScript(=ES)의 6번째 개정판 문서에 있는 표준 )

---

 

var과 let, const의 차이를 살펴보자!

1.  var는 아래와 같이 같은 이름의 변수를 또 선언했는데도 에러가 발생하지 않고, 다른 값이 출력되는 것을 볼 수 있다.

따라서 변수의 중복 선언 가능하여 코드가 어떻게 작동될지  예측하기 어려운 경우가 발생할 수 있다. 

 

var value = 'test1'
console.log(value) // test1 출력

var value = 'test2'
console.log(value) // test2 출력

 

let이나 const의 경우 이미 선언되었다는 에러메시지가 나온다.  즉, 변수의 재선언이 되지 않는다!

개발자 도구로 보면 chrome의 경우 Uncaught SyntaxError: Identifier 'value' has already been declared 라는 에러메시지가 출력되고,  IE의 경우 SCRIPT1052: Let/Const 다시 선언 이라는 에러 메시지가 출력된다.

 

 

참고로  let, const은  immutable여부가 다르다!

• let의 경우 변수의 재선언은 불가능하고, 변수의 재할당은 가능하다.

let value = 'test1';
console.log(value); // test1 출력

value = 'test2';
console.log(value); // test2 출력

 

• const는 변수의 재선언, 변수의 재할당 모두 불가능하다.

const value = 'test1';
console.log(value); // test1 출력

value = 'test2';
console.log(value); // Uncaught TypeError: Assignment to constant variable.

 

 

2. 다음으로 var는 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환하고, let은 ReferenceErrorr가 발생하고, const는 

SyntaxErrorr가 발생한다.

자바스크립트에서 사용하는 var, let, const, function, class 등은 모두 호이스팅이 된다. var의 경우 호이스팅될 때 초기 값이 없으면 자동으로 undefined를 초기값으로 하여 메모리를 할당하기 때문에 선언 전에 변수를 사용하려고 하면 에러가 발생하지 않는다.
반면 let, const의 경우 초기 값이 없을 때 var처럼 자동으로 할당하지 않기 때문에 에러를 발생한다.

console.log(value1); // undefined
var value1;

console.log(value2); // Error: Uncaught ReferenceError: value2 is not defined
let value2;

consol.log(value3); //Uncaught SyntaxError: Missing initializer in const declaration
const value3;

 

즉,  var는 선언 단계와 초기화 단계가 한번에 이루어지며, let은 선언 단계와 초기화 단계가 분리되어 진행된다. 아래 예시를 참조하자!

변수가 선언되고 해당 변수에 값이 할당되기 전까지를 TDZ(Temporal Dead Zone)라고 하며, 변수는 선언 단계 -> 초기화 단계 -> 할당 단계를 거쳐 생성된다.

//선언단계와, 초기화 단게가 동시에 이루어져, 변수 선언 이전에 변수를 참조할 수 있다.
console.log(value) // undefined 출력

var value;
console.log(value) // undefined 출력

value = 'test1'; //할당 단계
console.log(value) // test1 출력

////////////////////////////////////////////////////

//선언 단계만 실행되어 아직 변수가 undefined로 초기화 되지 않아 변수 선언문 이전에 변수를 참조할 수 없다.
console.log(value) // ReferenceError: value is not defined

let value; //초기화 단계 실행
console.log(value) // undefined 출력

value = 'test1'; //할당 단계
console.log(value) // test1 출력

 

결론!

var는 hosting과 scope를 고려하여 코딩해야하고, 메모리 누수의 위험 및 예측하기 어려운 상황이 발생할 수 있으므로 재할당이 필요한 경우엔 let을 사용하고, 재할당이 필요없는 상수와 객체는 const를 사용해야겠다.

	var	let	const
grobal scope	yes	no	no
script scope	no	yes	yes
function local scope	yes	yes	yes
block scope	no	yes	yes
재선언	yes	no	no
재할당	yes	yes	no

scope는 개발자 도구에서 자세하게 확인 가능하므로 개발자 도구에서 디버깅해보자!

 

 

[자바스크립트] var를 사용할 때 발생하는 문제들