TIL_77_var, let, const

ES6 이전에는 변수 선언은 var 뿐이었다. 하지만 ES6 에서 let 과 const가 추가되어 이를 이용하여 변수 선언을 할 수 있게 되었다.
차이점을 알아보도록 하자.

var, let, const

1. var는 함수 레벨 스코프이고 let 과 const 는 블럭 레벨 스코프이다.
2. var로 선언한 변수는 선언 전에 사용해도 에러가 나지 않지만, let, const 는 에러가 발생한다.
3. var는 이미 선언되어있는 이름과 같은 이름으로 변수를 또 선언해도 에러가 나지 않지만, let 과 const는 이미 존재하는 변수와 같은 이름의 변수를 또 선언하면 에러가 난다.
4. var, let은 변수 선언시 초기값을 주지 않아도 되지만 const는 반드시 초기값을 할당해야 한다.
5. var, let은 값을 다시 할당할 수 있지만, const는 한번 할당한 값은 변경할 수 없다. (단, 객체 안에 프로퍼티가 변경되는 것까지는 막지 못한다.)

2번의 차이점을 보고, "그럼 var는 호이스팅이 되고 let, const는 호이스팅이 안되기 때문에 그러는 건가?" 라고 생각할 수도 있지만 그것은 아니다.
자바스크립트에서 사용하는 var, let, const, function, class등의 선언 키워드들은 모두 호이스팅이 된다.

(그래서 호이스팅이 뭔데..? 그것 또한 벨로그에 정리할 예정이다.....)

var의 경우 호이스팅이 되면서 초기값이 없으면 자동으로 undefined 를 초기값으로 하여 메모리를 할당한다. 그래서 var의 경우 선언 전에 해당 변수를 사용하려고 해도 메모리에 해당 변수가 존재하기 때문에 에러가 발생하지 않는다.

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

그런데 let 과 const의 경우 호이스팅이 되면서 초기값이 없다면, var처럼 자동으로 초기값을 할당하지 않는다. (const 의 경우 선언 시 초기값을 할당하지 않으면 문법 에러가 난다.) 그래서 값이 할당되기 전까지 메모리를 할당하지 않기 때문에 선언 전에 (정확히는 값이 할당되기 전에) 사용하려고 하면, 메모리에 해당 변수가 존재하지 않아서 에러를 발생시킨다.
이처럼, 변수가 선언되고 해당 변수에 값이 할당되기 전까지를 TDZ(Temporal Dead Zone) 이라고 한다.

console.log(num); // Uncaught ReferenceError: num is not defined
let num =1;
console.log(num); // 1

//호이스팅 되었을 때
let num;
console.log(num); // 값이 할당되기 전이므로 아직 num은 메모리에 존재하지 않음. TDZ.
num = 1;
console.log(num); // 1

5번 차이점의 경우에는 const로 선언한 변수에 객체를 할당했을 때 const 변수가 가리키고 있는 객체 자체를 변경하는 것은 불가능하지만 해당 객체 내의 프로퍼티가 변경되는 것까지 불가능하다는 것은 아니다. 아래의 코드를 봐보자.

const obj = { first: 1 };

// 에러 발생
obj = 1; // Uncaught TypeError: Assignment to constant variable.

// 에러 발생하지 않음.
obj.first = 2;
obj.second = 2;
delete obj.first;

위와 같이 const 변수가 가리키는 값 자체를 변경하려고 하면 에러가 발생하지만, 객체 내의 프로퍼티의 추가, 변경, 삭제를 하는 것은 문제가 없다. 만약 객체의 프로퍼티도 변경되지 않게 객체를 선언하고 싶다면, Object.freeze() 메소드를 사용할 수 있다. (Object.freeze()는 얕은 동결이기 때문에 객체 안에 있는 또 다른 객체의 프로퍼티 변경까지는 동결하지 못한다.)

var의 경우 버그 발생과 메모리 누수의 위험등이 있기 때문에 지양하는 것이 좋다.

var 는 변수 재선언이 가능.

var variable = '변수선언함';
console.log(variable); // 변수선언함

var variable = '또 변수선언함';
console.log(variable); // 또 변수선언함

변수 선언을 여러번해도 에러없이 각기 다른 값이 출력된다. 필요할 때마다 변수를 사용할 수 있다는 편리하다는 장점이 될 수도 있지만, 같은 이름의 변수명을 남용하는 문제를 야기할 가능성이 높아지기에 단점이 더 크다. 이를 보완하기 위해 추가된 것이 let 과 const 이다.

let 변수 재선언 불가능, 변수 재할당 가능.

let variable = '변수선언함';
console.log(variable); // 변수선언함

variable = '변수 재할당함';
console.log(variable); // 변수 재할당함

let variable = '또 변수선언함';
console.log(variable); // SyntaxError: Identifier 'variable' has already been declared

변수의 재할당은 가능하지만 재선언은 되지 않는다. 위와 같은 에러 문구를 확인할 수 있다.

const 변수 재선언 불가능, 변수 재할당 불가능.

const variable = '변수선언함';
console.log(variable); // 변수선언함

variable = '변수 재할당함';
console.log(variable); // TypeError: Assignment to constant variable.

const variable = '또 변수선언함';
console.log(variable); // SyntaxError: Identifier 'variable' has already been declared

constant (상수)의 의미 그대로 한 번만 선언이 가능하고 값을 재할당을 통해 바꿀 수도 없다.

재할당이 필요없는 경우에는 const를 사용해, 불필요한 변수의 재사용을 방지하고 재할당이 필요한 경우에는 let을 사용하는 것이 좋다.