var, let, const 키워드의 역할과 차이점은 무엇인가?

변수란 데이터(data)를 저장할 수 있는 메모리 공간을 말하고,
var, let, const 모두 자바스크립트에서 변수를 선언할 때 쓰이는 키워드들이다.

ES5까지 var를 이용해서 변수를 정의했고 ES6부터 const와 let을 이용하는 새로운 변수 정의 방법이 생겼다.

var와 let은 변하는 어떤 값을 정의할 때 쓰고, const는 변하지 않는 값, 상수를 정의할 때 쓰인다.

그럼 기존 var 키워드가 있는데 let, const 키워드가 새로 나온 이유는 뭘까?

var가 가진 문제 1: 함수 스코프

var로 선언된 변수는 함수 스코프를 가진다. 스코프란 변수의 유효 범위를 의미한다. 그래서 함수 안에 선언된 변수를 함수 바깥에서 사용하면 참조 에러가 난다.

그리고 var 변수를 최상위에서 선언하면 전역변수가 되는데, var 키워드 없이 선언되어도 전역변수가 된다는 점이 특이하다.

for문, while문, switch 문, if 문 등 그 안에서 정의 된 변수가 반복문, 조건문이 끝난 이후에도 계속 남는 문제점이 있다.

var가 가진 문제 2: 재선언을 허용

var 키워드를 사용하면 여러 번 변수를 다시 선언 할 수 있다.
let 키워드로 동일한 범위에서 let을 두 번 사용하여 동일한 변수를 선언하면 오류다.
var는 여러번 동일한 변수를 선언해도 이미 선언된 변수는 무시된다.

var가 가진 문제 3: 호이스팅

var로 정의된 변수는 그 변수가 속한 스코프의 최상단으로 끌어올려진다.
변수가 정의된 시점보다 먼저 변수를 사용하게 될 경우 호이스팅으로 인해 변수의 정의만 끌어올려지고 값은 원래 정의했던 위치에서 할당된다.

에러가 발생하지 않고 사용될 수 있는 이러한 특징은 직관적이지 않고, 단점이라고 할 수 있다.

var의 문제를 해결하는 const, let

const, let은 블록 스코프다

블록스코프에서는 블록을 벗어나면 변수를 사용할 수 없다.
조건문이나 반복문에서 생성된 변수를 블록 바깥에서 사용하려고 하면 에러가 발생하는데, 오히려 이런 상황에서 에러가 발생하는 것이 직관적이며 이해하기도 쉽다.

const, let에서의 호이스팅

const 또는 let으로 정의된 변수도 호이스팅된다. 하지만 var와 다르게 변수가 정의된 시점보다 먼저 변수를 사용할 수 없다. 변수가 정의된 위치와 호이스팅된 위치 사이에서 변수를 사용하려고 하면 에러가 발생하기 때문이다.

Uncaught ReferenceError: Cannot access 'foo' before initialization

이 구간을 임시적 사각지대(temporal dead zone)라고 한다.
즉, TDZ 구간에 있는 변수 객체는 선언은 되어있지만 아직 초기화가 되지않아 변수에 담길 값을 위한 공간이 메모리에 할당되지 않은 상태 이다.

임시적 사각지대에서 변수를 사용하지 못한다면 호이스팅의 역할은 무엇일까?
호이스팅으로 어떤 지역 스코프에서 의도치 않게게 더 상위 스코프의 같은 변수를 참조하는 오류를 발생하지 않게 하기 위함?

const는 변수를 재할당 불가능하게 만든다.

const로 정의된 변수는 재할당이 불가능하다. 반대로 let, var로 정의된 변수는 재할당할 수 있다. 재할당 불가능한 변수는 프로그램의 복잡도를 상당히 낮춰주기 때문에 되도록이면 재할당 불가능한 변수를 사용하는게 좋다.
다만 const로 정의된 객체의 내부 속성값은 수정 가능하다는 점을 주의해야 한다.