let 키워드에 대해서

• var키워드를사용하여 전역 변수를 선언 할 때해당 변수를 전역 객체로 취급을 한다.

• 웹 브라우저에 표현 하는 전역객체는 window

var a = 10;
console.log(window.a); // 10

let키워드를 사용하여 변수를 선언하면 해당 변수가 전역 개체로 취급 하지 않는다.

let b = 20;
console.log(window.b); // undefined

for 루프 JavaScript let 및 콜백 함수

for (var i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i);
    }, 1000);
}

같은 숫자 출력을 5번 한다

ES5 에서 IIFE 패턴 을 사용해서 해결은 할 수는 있다. 하지만 복잡하다

for (var i = 0; i < 5; i++) {
    (function (j) {
        setTimeout(function () {
            console.log(j);
        }, 1000);
    })(i);
}

-> 1,2,3,4,5 출력

let키워드에서 사용 했을 경우

for (let i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i);
    }, 1000);
}

1 , 2, 3 , 4 , 5 출력

재선언

var 키워드는 재선언을 하더라도 에러 나지 않는다.

var counter = 0;
var counter;
console.log(counter); // 0

let 키워드를 재선언을 하면 에러가 난다

let counter = 0;
let counter;
console.log(counter);

// 이 코드는 에러난다

호이스팅

자바스크립트 엔진은 let키워드로 된 변수를 블록 맨위로 올린다. 하지만 변수를 초기화 하지는 않는다

따라서 초기화 되지 않는 변수를 참조하면 에러가 난다.

{
    console.log(counter); // 
    let counter = 10;    
}
// 이 코드는 에러가 난다

TDZ

TDZ는 블록 시작부터 변수 선언이 처리 될 때까지의 시간.

{ // enter new scope, TDZ starts
    let log = function () {
        console.log(message); // messagedeclared later
    };

    // This is the TDZ and accessing foo 
    // would cause a ReferenceError

    let message= 'Hello'; // TDZ ends
    log(); // called outside TDZ
}

{ // TDZ starts
    console.log(typeof myVar); // undefined
    console.log(typeof message); // ReferenceError
    let message; // TDZ ends
}

요약

• let키워드를사용하여 선언 된 변수는블록 범위이며 어떤 값으로도 초기화되지 않으며 전역에 연결 되지 않는다.
• let키워드를사용하여 변수를 다시 선언하면 오류가 발생한다
• let키워드를사용하여 선언 된 변수의 시간적 데드 존은초기화가 평가 될 때까지 블록에서 시작한다