let / var
https://poiemaweb.com/es6-block-scope
https://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d
그니까
var 는
만약 var a = 10
var a = 11
var a = 12
이렇게 값이 변경되고, 호이스팅이 된다.
var 는 최근의 값이 과거의 값을 다 덮어버린다.
업데이트 된다
그리고
근데 let은
각 각이다.
http://www.daleseo.com/js-es2015-let-in-for/
https://www.youtube.com/watch?v=-xqJo5VRP4A
for 문에서>>>>>>>>>>>>
for (var i = 0 ; i < 3 ; i++){
console.log(i);
}
이렇게 var 로 포문을 짜면
실제로
콘솔로그에 어떻게 찍히냐면
0
1
2
이렇게찍히고 다시 i 의 값을 찍어보면
2 이렇게 나온다.
반복문이 실행될때마다
각각의 콘솔로그가 3번 만들어지고
사실 0 1 2 이렇게 다 찍히긴 한다 근데
호이스팅 때매 결국 업데이트(i를 공유하기떄문에 왜냐면 함수 스코프라서) 되서 2로 최종적으로 남는것이고,
그리고
let을 사용하면
for (let i = 0 ; i < 3 ; i++){
console.log(i);
}
반복문이 매번 실행될때마다
새로운 i 가 만들어진다
그래서 로그에 남는다라고 표현해야하나,,,아무튼
각각의 콘솔로그가 3번 만들어지고 i 가 3번 남게 되고
let은 호이스팅 되지 않고, 공유할수 없다(블락스코프라서)
그래서 각각의 i를 가져와 차례대로 출력할수있다.
그래서 let에서
i 가 0 일때 함수는 클로져를 통해 0을 가져오고,
i 가 1 일때 함수는 클로져를 통해 1을 가져오고,
i 가 2 일때 함수는 클로져를 통해 2을 가져오고,
이렇게 한다.
그러나
var 에서는
i = 0 f (0) // 처음은 0 번째 숫자0이고
i = 1 f (1) // 두번쨰는 이게 1로 바뀌면서
i = 0 f (1) // 첫번쨰껏도 1 로 바뀐다.
i = 1 f (1)
그다음
i = 2 f (2) 이렇게 되면서 또 다른것도 다 업데이트된다
i = 0 f (2)
i = 1 f (2)
i = 2 f (2)
이렇게 바뀐다.
즉, for문에서 var 과 let 의 공통적인 부분은
바로
각각의 setTimeout함수든, 그냥 콘솔로그든
for문안의 내용을 조건에 만족하는 숫자만큼 반복하고,
반복할때 각각 반복시 마다 각각의 영역이 만들어진다
그니까
첫번째 setTimeout 영역,
두번째 setTimeout 영역,
세번째 setTimeout 영역,
이런식으로 만들어지고
스택에 쌓이면서 큐로 넘겨주면서 타이머에 따라
후에 실행이 될떄 , 자기가 갖고있던 영역에서 i를 찾는데,
그게 사실 0 이 찍히고
그다음 반복떄 1
또 그다음 반복떄 2
이렇게 찍히긴하는데,
마지막으로 찍히는 반복숫자가 5면
처음 반복했던게 최근껄로 덮어씌워 지는 것이다.
오해하는부분이 for문이 이미 다돌아서 마지막 숫자를 참조하는게 아니라
사실은 각자 방이 있고 그방에서 실행 순서대로 차례차례 각각의 i를 다 부여
받긴하는데, var특성이 호이스팅이니까 다 부여받았던게 최근꺼로 걍 마지막에 다 업데이트가 되버리는거다. 그게 다 함수스코프라서 var의 특성이 호이스팅이라서 함수스코프는 호이스팅이 되니까 그런 이유다.
근데 let은 그냥 var처럼 각각 순서대로 방이 있고, 순서대로 실행이되서 숫자를 부여받고, 그냥 거기서 그러고 끝날뿐이다.
왜냐면 스코프가 블럭스코프고 , 블럭스코프는 호이스팅이 불가능하기떄문이다.
