var 키워드로 선언한 변수의 문제점
변수 중복 선언 허용
var x = 1;
var y = 1;
var x = 100; // 중복선언
var y; // 초기화문이 없는 변수 선언문은 무시된다.
console.log(x); // 100
console.log(y); // 1함수 레벨 스코프
var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 즉, 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 전역 변수가 된다.
var i = 10;
for (var i = 0; i < 5; i++) {
console.log(i); // 0 1 2 3 4
}
console.log(i); // 5변수 호이스팅
변수 선언문 이전에 변수를 참조하는 것은 프로그램 흐름상 맞지 않고 가독성을 떨어뜨리고 오류를 발생시킬 여지가 있다.
let 키워드
변수 중복 선언 금지
let 키워드로 이름이 같은 변수를 중복 선언하면 문법 에러가 발생한다.
블록 레벨 스코프
let 키워드로 선언한 변수는 모든 코드 블록을 지역 스코프로 인정한다.
변수 호이스팅
let 키워드로 선언한 변수는 선언 단계와 초기화 단계가 분리되어 진행된다. 즉, 런타임 이전에 암묵적으로 선언 단계가 먼저 실행되지만 초기화 단계는 변수 선언문에 도달했을 때 실행된다.
초기화 단계에 도달하기 전에 변수에 접근하려 하면 참조 에러가 발생하고 이 구간을 일시적 사각지대라 부른다.
이처럼, 호이스팅이 발생하지 않는 것 처럼 동작하지만 모든 선언은 호이스팅한다.
전역 객체와 let
let 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아니다.
const 키워드
const 키워드는 상수를 선언하기 위해 사용한다. 하지만 반드시 상수만을 위해 사용하지는 않는다.
선언과 초기화
const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다.
const foo = 1;그렇지 않으면 문법 에러가 발생한다.
const 키워드로 선언한 변수는 let 키워드로 선언한 변수와 마찬가지로 블록 레벨 스코프를 가지며 변수 호이스팅이 발생하지 않는 것처럼 동작한다.
재할당 금지
const 키워드로 선언한 변수는 재할당이 금지된다.
상수
가독성 측면에서 바뀌지 않는 값을 const 키워드로 선언해서 사용하면 좋다.
const 키워드와 객체
const 키워드로 선언된 변수에 객체를 할당할 경우 객체는 재할당 없이 직접 변경이 가능하기에 값을 변경할 수 있다.
var & let & const
- ES6 환경에서는 var 키워드를 사용하지 않는다.
- 재할당이 필요한 경우에 한해 let 키워드를 사용하며 이때 변수의 스코프는 최대한 좁게 만든다.
- 변경이 발생하지 않고 읽기 전용으로 사용하는 원시 값과 객체에는 const 키워드를 사용한다.
