for loop의 선언식에서 let과 var의 차이
조회수 484회
안녕하시렵니까. 드디어 IE를 신경 안써도 되는 사이트에 취직했습니다. 이제 let
을 쓸 수 있게 된 것입니다. 촤하하
그런데 쓰다보니 이상한 현상을 발견했습니다만, 도무지 이해가 안돼 질문글 작성합니다.
질문 요약
for (let i = 0; i < n; ++i) {
...
}
for 반복문에서 선언식의 변수를 let
으로 선언하면 무슨 일이 일어나나요?
알고 있는 것
- var의 유효 범위는 함수 단위다.
- let의 유효 범위는 블록 단위다.
- let은 끌어올림 적용이 안된다.
- let 변수는 시점에 따라 TDZ(Temporal Dead Zone)가 발생할 수 있다.
너의 클로저는 이미 간파했다!
function getSomeWithVar() {
var n = 0;
var fn = () => {
console.log(n);
}
++n;
return fn;
}
function getSomeWithLet() {
let n = 0;
var fn = () => {
console.log(n);
}
++n;
return fn;
}
getSomeWithVar()(); // 1
getSomeWithLet()(); // 1
좋아요. 이건 알겠어요.
각각의 함수가 참조하는 n은 클로저니까 둘 다 1이 맞겠죠.
않이 그런데
function getSomeWithLet() {
var fn;
for (let i = 0; i < 2; ++i) {
fn = () => {
console.log(i);
}
}
return fn;
}
getSomeWithLet()(); // 1
엥? 2가 아니야? 두 번째 루프에서 증감식이 실행됐을텐데?
function getSomeWithVar() {
var fn;
for (var i = 0; i < 2; ++i) {
fn = () => {
console.log(i);
}
}
return fn;
}
getSomeWithVar()(); // 2
이건 2인데?
왜죠?
왜때문에 i
가 let
이면 증감식 실행 전의 값인걸까요?
구글은 아실지도 몰라
구글은 답을 주실지도 모릅니다. 검색해봤습니다:
https://stackoverflow.com/questions/42556873/closure-let-keyword-javascript
because you use let each anonymous function refers to a different instance of x. There is a different instance on each iteration of the loop. This happens because let has a block-level scope instead of the global function scope that var has.
예??? 각 루프가 서로 다른 인스턴스를 갖는다구요??? 그게 무슨 말이죠???
저는 그만 혼절하고 말았습니다
일단 영어를 제대로 해석했다는 가정 하에 레알참트루로 각 루프가 서로 다른 인스턴스에서 돌아간다면,
그렇다면 선언식의 let
변수는 어느 계층에 있다는 말이죠? 그리고 증감식은 도데체 어디에서 수행된다는 말입니까?
혹시 for 루프의 스코프가 있고, 그 하위에 또 다른 스코프(=인스턴스)가 생성되면서 해당 스코프에 let
변수가 로컬 변수로써 따로 할당된다는 말인걸까요?
상상회로를 돌려봤습니다
혹시 이런건 아닐까요?
- 대전제: 유효범위 = 블록 = 스코프 = 인스턴스
- 함수의 유효범위 깊이는 1이라 가정.
- 자바스크립트의 반복문은 각 루프마다 별도의 인스턴스를 갖는다. (깊이 2)
- 증감식은 반복문의 매 루프가 끝날 때 수행된다.
- 반복문의 선언식과 증감식은 깊이 2의 인스턴스에서 수행된다.
- 반복문의 매 루프는 한 단계 더 들어간 인스턴스에서 수행된다. 따라서 루프끼리는 서로 영향을 줄 수 없다. (깊이 3)
- 선언식의
let
변수는 깊이 2의 원본을 복사해 깊이 3의 인스턴스로 전달한다. (var
도 동일함) - 깊이 3의 인스턴스가 종료되면 익명함수가 참조하는
i
는 클로저 스코프에만 존재한다. - 다음 루프가 시작되면서 깊이 2의 인스턴스의
i
의 값이 증가하지만 깊이 3의 인스턴스에 있는i
는 증감식 수행 전의 값을 유지한다.
댓글 입력