모던 자바스크립트에는 var, let, const형의 변수가 존재한다.
ECMA5이하의 버전에서는 var형 변수가 사용이 되었고 ECMA6로 버전업이 되면서 let, const형 변수가 추가되었다.
ECMA6에서 let형 변수가 추가된 이후로 var형 변수는 사용하지 말라는 것이 권고사항이다.
우선 var형을 왜 사용하지 말라는 것인지에 대해 알아보자.
console.log(varVariable); //undefined
var varVariable = 10;
console.log(varVariable); //10
var varVariable;
console.log(varVariable); //10
var varVariable = 20;
console.log(varVariable); //20;
위의 소스코드를 보면 변수가 선언된 구문이 실행되기 이전에 console.log를 이용하여 해당 변수를 출력하고 있다.
자바 언어로 코딩을 하게 되면 변수를 선언한 뒤에 변수를 출력해야 한다.
위의 경우처럼 변수가 선언되기 이전에 변수를 호출하려고 하면 에러가 발생하게 된다.
하지만 자바스크립트의 var형 변수의 경우에는 위와 같은 사용이 가능하다.
그 이유는 변수 호이스팅 때문인데 변수 호이스팅이란 변수를 끌어올렸다는 말이다.
자바스크립트는 소스가 순차적으로 실행되기 이전에 소스코드상에 var형으로 선언된 변수가 있다면
우선 var형 변수 선언문을 제일 우선적으로 실행하여 메모리 공간을 할당한다.
var varVariable = 10; 구문이 실행되는 것이 아니라 var varVariable가 우선적으로 실행된다
실질적으로 console.log(varVariable); //undefined 해당 구문이 undefined로 출력 될 수 있는 이유는
var varVariable; //undefined
console.log(varVariable); //undefined
구문과 같기 때문이다.
그리고 또 다른 문제점은 변수가 중복 선언이 가능하다는 것이다.
위의 소스코드를 보면 연속적으로 var varVariable 와 같은 방식으로 변수 선언을 연속적으로 하고 있다.
위와 같은 문법이 허용되기 때문에 소스코드에 버그가 숨어들기 딱 좋다.
var varVariable = 10;
console.log(varVariable); //10
var varVariable;
console.log(varVariable); //10
위의 소스코드를 보면 두번째 console.log(varVariable)의 경우 새롭게 var varVariable 형 변수를 선언 했기 때문에 undefined가 출력되어야 할 것 같지만 10이 출력 된다.
var varVariable구문은 소스코드가 실행되기 이전에 변수 호이스팅으로 이미 메모리가 할당 되어있기 때문이다.
이미 변수가 선언되어 사용되고 있지만 소스코드가 많은 파일의 경우에 해당 변수가 선언되어 있는지를 모르고 밑에서 해당 변수를 선언 한 뒤에 조작한다거나 할 경우 충분히 문제가 생기거나 버그를 찾기 어려울 수 있다.
var형 변수의 경우 중복선언도 되고 선언하기 전에 호출도 되고 하는 등의 이유로 ECMA6부터는 권장하지 않는 것이다.
ECMA6부터 도입된 let형 변수와 const형 변수는 어떻게 다른지 알아보자.
//console.log(letvariable);//ReferenceError
let letvariable = 10;
console.log(letvariable);
//let letvariable = 20; //SyntaxError
우선 let형 변수의 경우 위의 var형 소스코드처럼 사용하려고 하면 위와 같이 에러가 발생한다.
ReferenceError에러가 발생한 이유는 변수가 선언되기 이전에 참조할 수 없기 때문이다.
SyntaxError에러가 발생한 이유는 변수를 선언하고 재선언을 하려고 했기 때문이다.
위와 같이 var형 변수에서 문제가 되는 부분이 let형 변수에서는 사용 불가능하다.
//console.log(constVariable) //ReferenceError:
//const constVariable; //SyntaxError
const constVariable = 20;
console.log(constVariable)
// const constVariable = 30; //SyntaxError:
//constVariable = 30; //TypeError
cosnt형 변수의 경우 let 변수와 다른 차이점이 있다면 변수 생성시 값을 초기화 하지 않으면 에러가 발생한다.
변수가 선언된 이후에 다른 값을 할당하려고 하면 에러가 발생한다.
const는 상수이기 때문에 한번 값을 할당하면 변경할 수 없다.
이것으로 ECMA6부터는 왜 let형과 const형 변수를 사용해야 하는지에 대해 알게 됐을 것이다.