인프런 커뮤니티 질문&답변
작성한 질문수
함수들을 배열에 저장하는 부분에서 let i로 선언한 값들이 어떻게 함수내에 저장되는지 잘 이해가 안갑니다.
작성
·
246
2
let funcs = []
for (let i = 0; i < 10; i++) {
funcs.push(function() {
console.log(i)
})
}
funcs.forEach(function(f) {
f()
})forEach로 f함수를 실행시키는 부분에서 i의 스코프가 어디서 살아 있는 건가요?
제가 이해하기로는 funcs = [ ..., function() { console.log(i) }, ...]로 i에 대한 값은 없이 함수만 저장되어 있고 forEach로 실행시키는 부분에서는 for문 밖에서 실행시키기 때문에 for 문의 스코프에 영향을 받지 않을 것이라 예상되는데 만약 i가 for 문의 스코프에 영향을 받는다면 어떤 방식으로 받는 것인지, 그것이 왜 메모리 측면에서 효율적인지 알고 싶습니다!
답변 3
2
위 답변은 틀렸습니다. 제대로 이해하려면 강의를 다시 봐주시기 바랍니다.
아래는 위 답변에서 잘못된 내용을 정정하여 기재합니다.
---------------------------------------------------------------------
for문에서 i 값이 변경되는 매 루프마다 각각 새로운 블록스코프가 형성됩니다.
즉 아래와 같은 내용이 반복되는 형태로 생각하면 됩니다.
for (let i = 0; i < 10; i++) {
funcs.push(function() { console.log(i); });
}
// ==================
let i = 0;
{
funcs.push(function(){ console.log(i); });
i = 1;
}
{
funcs.push(function(){ console.log(i); });
i = 2;
}
{
funcs.push(function(){ console.log(i); });
i = 3;
}
...1
1
for문에서 i 값이 변경되는 매 루프마다 각각 새로운 블록스코프가 형성됩니다.
즉 아래와 같은 내용이 반복되는 형태로 생각하면 됩니다.
for (let i = 0; i < 10; i++) {
funcs.push(function() {
console.log(i)
})
}
// ==================
{
let i = 0;
funcs.push(function(){ console.log(i); });
}
{
let i = 1;
funcs.push(function(){ console.log(i); });
}
{
let i = 2;
funcs.push(function(){ console.log(i); });
}
...i 값이 for문 종료 이후에도 for문의 scope의 영향을 받는 경우와 같은 개념은
실행컨텍스트와 클로저에 대한 내용입니다. 이에 대해 학습이 필요하시다면
시중의 교재 또는 제 다른 강의인 '자바스크립트 흐름파악하기' 강좌를 참고하시기 바랍니다.
메모리 측면에서 효율적이라는 내용은 아래의 코드(ES5 하에서의 코드)와 비교하면 그렇다는 것입니다.
for (var i = 0; i < 10; i++) {
(function (i) {
funcs.push(function(){ console.log(i); });
})(i);
}이 경우 i를 전달하기 위해 매번 즉시실행함수를 한 번 더 감싸기 때문에 상대적으로 성능이 저하될 수밖에 없겠죠.