함수들을 배열에 저장하는 부분에서 let i로 선언한 값들이 어떻게 함수내에 저장되는지 잘 이해가 안갑니다.

Question

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 문의 스코프에 영향을 받는다면 어떤 방식으로 받는 것인지, 그것이 왜 메모리 측면에서 효율적인지 알고 싶습니다!

정재남 · Answer

위 답변은 틀렸습니다. 제대로 이해하려면 강의를 다시 봐주시기 바랍니다. 아래는 위 답변에서 잘못된 내용을 정정하여 기재합니다. --------------------------------------------------------------------- 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; } ...

hyuk22 · Answer

답변 감사합니다.

정재남 · Answer

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를 전달하기 위해 매번 즉시실행함수를 한 번 더 감싸기 때문에 상대적으로 성능이 저하될 수밖에 없겠죠.