Javascript는 수년에 걸쳐 발전해 왔습니다. 중요한 변화 중 하나인 let은 ES6(ECMAScript 2015)에서 새로 추가됐습니다. 이번 포스팅에서는 let, var, const의 차이점을 자세히 알아보고 어떤 것을 언제 사용해야 하는지 알아보겠습니다.

🍨 Scope(범위)

🍧 scope란?

식별자(함수, 변수, 객체 등)이 유효한 범위(👉scope 설명)

🍧 var

선언된 변수는 함수 범위입니다. 즉, 함수 내에서 var를 사용하여 변수를 선언하면 해당 함수 내에서만 액세스할 수 있습니다. 또한 함수 내에서 똑같은 변수를 다시 선언할 수도 있죠. 함수 바깥에 선언하면 전역 변수가 됩니다.

function example() {
    var x = 10;
    if (true) {
        var x = 20; // same variable!
    }
    console.log(x); // Outputs: 20
}

🍧 let

ES6에 도입된 'let'으로 선언된 변수는 블록 범위입니다. 즉, 가장 가까운 중괄호 '{}'(함수, if-else 블록 또는 루프) 내에서만 액세스할 수 있습니다.

function example() {
    let x = 10;
    if (true) {
        let x = 20; // different variable!
    }
    console.log(x); // Outputs: 10
}

🍧 const

let과 마찬가지로 const는 블록 범위 이지만 추가적인 제한사항이 있습니다. 그 것에 대해선 아래에서 자세히 다루도록 하죠.

function example() {
    const x = 10;
    if (true) {
        const x = 20; // different variable!
    }
    console.log(x); // Outputs: 10
}

🍨 재할당 및 불변성

🍧 var, let

var a = 10;
a = 20;

let b = 30;
b = 40;

둘 다 재할당을 허용합니다.

🍧 const

이름에서 알 수 있듯이 const로 선언된 변수는 상수이기 때문에 재할당할 수 없습니다. 그러나 이것이 변경 불가능하다는 의미는 아닙니다.

const obj = { key: 'value' };
obj.key = 'newValue'; // This is fine

obj = { newKey: 'newValue' }; // This will throw an error

위의 코드를 보면 참조는 변경할 수 없지만 Object.freeze()를 사용하여 완전히 고정시키지 않는 한 객체 자체는 수정할 수 있습니다.

🍦const object 참조에 관하여

object와 배열은 이름이 참조하는 값의 주소를 가리키고 있기 때문에 참조는 변경할 수 없지만 참조하는 값은 변경할 수 있습니다.

🍨 Hoisting(호이스팅)

var, let, const 선언은 모두 포함된 함수 또는 블록의 맨 위로 끌어올려집니다. 하지만 차이점이 있죠.

🍧 var

var로 선언된 변수를 초기화하지 않으면 undefine으로 호이스팅되고 초기화됩니다.

console.log(a); // Outputs: undefined
var a = 10;

🍧 let, const

블록의 맨 위로 끌어올려지지만 초기화되지는 않습니다.

console.log(b); // Throws a ReferenceError
let b = 10;

🍦호이스팅이 발생하는 이유

호이스팅은 자바스크립트 실행 컨텍스트와 관련된 동작입니다. 코드가 실행될 때 자바스크립트 엔진은 두 단계로 코드를 처리합니다.
1. 생성 단계: 변수와 함수 선언은 메모리에 저장됩니다. 변수는 undefined로 초기화 됩니다.
2. 실행 단계: 코드가 줄 단위로 실행됩니다. 변수에 값을 할당하고 함수 참조 및 호출을 수행합니다.
호이스팅은 생성 단계에서 발생하는 현상입니다.

🍨 전역 개체 속성

전역 범위에서 변수를 선언하면 var는 전역개체에 새 속성을 생성합니다.

var c = 10;
console.log(window.c); // Outputs: 10

그러나 let과 const는 그렇지 않습니다.

let d = 10;
console.log(window.d); // Outputs: undefined

🍨 결론

ES6의 출현으로 블록 범위 지정 및 예측 가능성이 향상되었으므로 let 및 const 대신 var를 사용하지 않는 것이 좋습니다. 변수가 변경될 것으로 예상되면 let을 사용하고 참조를 일정하게 유지하려면 const를 사용하세요. 더 읽기 쉽고 예측 가능한 코드를 작성하는 데 도움이 됩니다.