var, let, const 특징

자바스크립트 에서 변수 선언

자바스크립트 에서 변수는 var, let, const 세 가지 키워드로 선언 할 수 있다.
세 가지 키워드의 차이점을 알아보기 이전에, 자바스크립트는 다음과 같은 특징을 가지고 있다.
자바스크립트 엔진은 코드를 한 줄씩 순차적으로 실행하기 전에,
선언문 (변수 선언문, 함수 선언문 등)을 찾아내 먼저 실행시킨다.
즉, 변수 선언이 어디에 있든 상관 없이 해당 스코프의 최상단에서 먼저 선언하는 특징 (호이스팅) 을 가지고 있다.

호이스팅 간단한 예제

foo 라는 변수를 선언과 동시에 값을 할당해주었으나, 선언문은 런타임 이전에 호이스팅 되어 실행되므로 암묵적으로 undefined가 할당되어 다음과 같은 결과가 나온다.

    console.log(foo); // undefined
    var foo = 1;
    console.log(foo); // 1

var

var는 다음과 같은 특징을 가지고 있다.

1. 선언 단계와 초기화 단계가 동시에 이루어진다.
   • 호이스팅 되면서 undefined로 초기화 된다.

    console.log(foo); // undefined (호이스팅 되면서 초기화)
    var foo = 1;
    console.log(foo); // 1

2. 재할당/재선언이 가능하다.

    var foo = 1;
    console.log(foo); // 1

    // 재할당
    foo = 2; 
    console.log(foo); // 2

    // 재선언
    var foo = 3;
    console.log(foo); // 3

3. 함수 레벨 스코프를 가지고 있다.
   • 함수 내에서 할당 된 변수만 해당 함수의 지역 변수로 인정한다. 따라서, 함수 외부에서 선언한 변수는 전역 변수가 된다.

    var foo = 1;

    // 블록 레벨 스코프
    if (true) {
        var foo = 3;
    }

    console.log(foo); // 3

    // 함수 레벨 스코프
    (function() {
        var foo = 123;

        console.log(foo); // 123 (함수 레벨 스코프에서 선언/초기화 됨, 재선언x)
    })();

    console.log(foo); // 3 

let

let은 다음과 같은 특징을 가지고 있다.

1. 선언 단계와 초기화 단계가 분리되어 이루어진다.
   • 호이스팅이 이루어지면서 선언은 실행되지만, 초기화는 런타임에 이루어지므로 참조 에러가 발생한다.

    console.log(foo); // Uncaught ReferenceError: foo is not defined
    let foo;

2. 재할당은 가능하나, 재선언은 불가능하다.

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

    let foo = 3; // Uncaught SyntaxError: Identifier 'foo' has already been declared

3. 블록 레벨 스코프를 가지고 있다.
   • 블록 내 (if문, for문, 함수 등) 에서 할당 된 변수는 해당 블록의 지역 변수로 인정한다.

    let foo = 1;

    if (true) {
        let foo = 3;
    }

    console.log(foo); // 1

    // for문 조건에 사용되는 foo와 for문 내부에 사용되는 foo는 서로 다른 블록 스코프 이다.
    for (let foo = 0; foo < 10; foo++) {
        let foo = 3;
    }

    console.log(foo); // 1

const

const는 다음과 같은 특징을 가지고 있다.

1. 반드시 선언과 초기화를 동시에 진행해야 하며, let 과 마찬가지로 선언 단계와 초기화 단계가 분리되어 이루어진다.

    console.log(bar); // Uncaught ReferenceError: bar is not defined
    const foo = 1;
    console.log(foo); // 1

    const bar; // Uncaught SyntaxError: Missing initializer in const declaration

2. 재할당, 재선언이 불가능 하다.
   • 단, 원시값(string, number, boolean 등) 을 제외한 객체/배열 내의 값은 재할당이 가능하다.

    const foo = 1;
    const foo = 2; // Identifier 'foo' has already been declared
    foo = 3; // Uncaught TypeError: Assignment to constant variable.

    const bar = { baz: 123 };
    bar.baz = 456;
    console.log(bar.baz); // 456

    const baz = [1, 2, 3];
    baz[0] = 4;
    console.log(baz); // [4, 2, 3];

3. 블록 레벨 스코프를 가지고 있다.

    const foo = 1;

    if (true) {
        const foo = 3;
    }

    console.log(foo); // 1