var
ES6에서 let과 const가 등장하기 이전 javascript에서 변수 선언 방식은 var가 유일했다.
이미 var라는 변수 선언 방식이 존재함에도 불구하고 왜 let과 const라는 개념이 등장했을까?
그 이유를 알기 위해서는 var의 치명적인 몇가지 단점을 이해해야 한다.
1. 스코프
var로 선언한 변수는 함수-레벨 스코프(Function-level scope)이다. 함수 레벨 스코프는 함수 내의 코드만 지역 변수로 인정하고 함수 밖에서의 변수는 전역 변수로 취급한다.
아래의 예시를 살펴보자.
위 코드 for문의 괄호 안의 변수 i
는 함수 내에서 선언된 변수가 아니기에 전역 변수로 취급된다. 때문에 for문이 종료된 이후에도 i
를 호출할 수 있다.
2. 재선언 가능
var는 재선언이 가능하다. 이는 의도치 않은 변수값의 변경으로 이어질 수 있다.
3. 호이스팅 (Hoisting)
var로 선언한 변수는 선언 이전에 변수에 대해 참조할 수 있다.
위의 예시처럼 var로 선언한 변수는 선언하기 이전에 출력했음에도 오류가 아니라 undefined
가 출력된다. 반면 let과 const로 선언한 변수는 ReferenceError
가 출력되는 것을 확인할 수 있다.
ES6에서는 var의 이런 단점들을 보완하기 위해 let과 const라는 새로운 변수 선언 방식을 내놓았다.
let, const
1. 스코프
let과 const는 블록-레벨 스코프 (Block-level scope)이다.
함수-레벨 스코프(Function-level scope)와 다르게 블록-레벨 스코프 (Block-level scope)에서 선언된 변수는 해당 코드 블록(함수, for문, if문, while문 등)에서만 유효하다.
즉, 코드 블록 내부에서 선언된 변수는 지역변수이다.
2. 재선언 불가
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으로 바꾸는걸 고려해보자.