자바스크립트에서의 var, let, const 키워드

var 키워드의 문제점

변수 중복 선언 허용 #

var은 변수 선언의 중복이 허용되어 실수를 유발할 가능성이 매우 높다.

var x=1;
var x=100;
var y=1;
var y;

console.log(x); //100  제일 마지막으로 초기화된 변수적용
console.log(y); //1  변수에 값이 할당되지 않으면 무시한다.

변수 호이스팅 #

변수 호이스팅에 의해 var로 선언한 변수는 변수 선언문 이전에 참조할 수 있다. 이는 에러를 발생시키지 않아 프로그램의 흐름상 맞지도 않고 가독성을 떨어뜨린다.

이는 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언 단계와 초기화 단계가 한번에 진행된다.

console.log(foo); //undefined

foo = 123;

console.log(foo); // 123
var foo;

let 키워

var 키워드의 단점을 보완하기 위해 ES6에서 새로운 변수 선언 키워드를 도입했다.

변수 중복 선언 금지 #

let으로 중복 변수를 선언하면 문법 에러가 뜬다.

블록 레벨 스코프 #

let으로 선언한 변수는 모든 코드 블록(함수, if문, for문 등)을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.

let foo=1; // 전역변수
{
    let foo=2;// 지역변수
    let bar=3;// 지역변수
}
console.log(foo); // 1
console.log(bar); // error

변수 호이스팅 #

let으로 선언한 변수는 변수 호이스팅이 발생하지 않는 것처럼 동작한다.

선언 단계와 초기화 단계가 분리되어 진행된다. 즉 자바스크립트 엔진에 의해 암묵적으로 선언 단계가 먼저 실행되지만 초기화 단계는 변수 선언문에 도달했을 때 실행된다. 변수 초기화가 실행되기 이전에 참조하려 하면 참조 에러가 발생한다. 이는 스코프의 시작 지점부터 초기화 단계 시작 지점까지 변수를 참조할 수 없다. 이러한 구간을 일시적 사각지대라고 부른다.

console.log(foo); //error
let foo;

그렇다고 해서 호이스팅이 발생하지 않는다는 것은 아니다.

let foo=1;
{
    console.log(foo); // error
    let foo=2;
}

위 예제에서 호이스팅이 발생하지 않는다면 foo를 출력할 때 1이 출력되어야 하지만, 참조 에러가 발생한다. 즉 호이스팅을 하는데 발생하지 않는 것처럼 동작한다는 것이다.

const 키워드

const 키워드의 특성은 let 키워드와 대부분 동일하다.

선언과 초기화 #

const 키워드로 선언한 변수는 선언과 동시에 초기화해야 한다.

재할당 금지 #

var, let은 변수의 재할당이 자유로우나 const는 선언한 변수는 재할당이 금지된다.