Goal

javascript의 변수 선언 방법인
var let const의 차이점을 알아보고 적절한 선언 방식을 이해한다.

---

var

es6에서 let과 const가 등장하기 이전 javascript에서 변수 선언 방식은 var가 유일했다.
이미 var라는 변수 선언 방식이 존재함에도 불구하고 왜 let과 const라는 개념이 등장했을까?

그 이유를 알기 위해서는 var의 치명적인 몇가지 단점을 이해해야 한다.

1. 스코프

var로 선언한 변수는 함수-레벨 스코프(Function-level scope)이다. 함수 레벨 스코프는 함수 내의 코드만 지역 변수로 인정하고 함수 밖에서의 변수는 전역 변수로 취급한다.

아래의 예시를 살펴보자.

for (var i = 0; i < 5; i++) {
  console.log(i); // 0 1 2 3 4
}
console.log(i); // 5

위 코드 for문의 괄호 안의 변수 i는 함수 내에서 선언된 변수가 아니기에 전역 변수로 취급된다.

때문에 for문이 종료된 이후에도 i를 호출할 수 있다. 이는 전역 변수를 남발할 수 있는 가능성을 높이므로 var의 단점 중 하나로 볼 수 있다.

2. 재선언 가능

var는 재선언이 가능하다. 이는 의도치 않은 변수값의 변경으로 이어질 수 있다.

var number = 10;
var number = 5;

console.log(number); // 5

3. 호이스팅 (Hoisting)

var로 선언한 변수는 선언 이전에 변수에 대해 참조할 수 있다.

console.log(number); // undefined
var number = 10;

console.log(num);
const num = 10; // ReferenceError: num is not defined

위의 예시처럼 var로 선언한 변수는 선언하기 이전에 출력했음에도 오류가 아니라 undefined가 출력된다. 반면 let과 const로 선언한 변수는 RefernceError가 출력되는 것을 확인할 수 있다.

ES6에서는 var의 이런 단점들을 보완하기 위해 let과 const라는 새로운 변수 선언 방식을 내놓았다.

---

let, const

1. 스코프

let과 const는 블록-레벨 스코프 (Block-level scope)이다.

함수-레벨 스코프(Function-level scope)와 다르게 블록-레벨 스코프 (Block-level scope)에서 선언된 변수는 해당 코드 블록(함수, for문, if문, while문 등)에서만 유효하다.

즉, 코드 블록 내부에서 선언된 변수는 지역변수이다.

2. 재선언 불가

const number = 10;
const number = 5;

console.log(number); // SyntaxError: Identifier 'number' has already been declared

let num = 10;
let num = 5;

console.log(num); //// SyntaxError: Identifier 'num' has already been declared

let과 const로 선언한 변수는 재선언이 불가능하다.

3. 호이스팅

사실 let과 const도 호이스팅이 되고 있다.

var는 선언과 동시에 undefined로 초기화가 되지만 let과 const는 선언과 초기화 단계가 따로 진행된다.
선언과 초기화 단계의 사이 (TDZ)에 의해 ReferenceError가 발생하는 것이다.

---

let과 const의 차이

재할당

let과 const의 차이는 바로 재할당이 가능한가에 달려있다.

let으로 선언한 변수는 재할당이 가능하다. 반면 const로 선언한 상수는 재할당이 불가능하다.
때문에 let은 변수를 선언하는데 사용하고 const는 상수를 선언하는데 사용된다.

---

결론

1. var의 사용은 금지한다.
2. 나중에 변할 가능성이 있는 변수는 let으로 상수는 const로 선언하자.
3. 모르겠으면 일단 const로 선언하고 오류가 발생하면 let으로 바꾸는걸 고려해보자.