호이스팅, var, 클로저 문제

var

함수 스코프

호이스팅이 일어나서 선언문이 모두 위로 올라가서 해석된다.

선언만 되었지 값은 정의 되지 않아서 undefined 상태

console.log(a);
var a = 1;
console.log(a);

undefined

1

이 콘솔에 찍힐 것이다.

var a;
console.log(a);
a = 1;
console.log(a);	

호이스팅이 된 이후 코드 해석은 이런 식으로 일어난다.

const, let도 호이스팅이 되지만 TDZ(Temporal Dead Zone)로 인해 값을 가져올 수 없다, 즉 에러가 발생한다.

(const, let도 호이스팅이 되어서 선언문이 위로 먼저 해석되지만 TDZ 때문에 그 선언된 값에 접근할 수 가 없다.)

---

// var이 함수 스코프라서 비동기 함수에서 클로저 문제 발생,
// 비동기 함수 실행전에 var이 함수 스코프이기 때문에
// 포문의 i 변화를 함수 스코프가 아닌 것들에 준다.
// 즉, i = 0일 때 setTimeout를 등록하고,
// 이후 i = 1이 될 때 전에 등록한 setTimeout에서 사용될 i는 0를 유지하지 못하고
// 1이 되며 포문에서 증가하는 i가 다른 것에 영향을 주게 된다.(=> 함수 스코프이니까).
// 따라서 비동기 함수가 실행할 때는 포문 순회가 이미 끝난 상태, i = 5일 때 5번 실행된다.
for (var i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i)
    }, 1000);
}

// var를 쓰더라도 (함수 스코프이니까) 함수로 감싸줘서 i가 증가하더라도 함수 스코프가 막아준다.
for (var i = 0; i < 5; i++) {
    (function(j) {
        setTimeout(() => {
            console.log(j)
        }, 1000);
    })(i);
}

// let를 쓰면 문제 없음.
for (let i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i)
    }, 1000);
}