• 카테고리

    질문 & 답변
  • 세부 분야

    프로그래밍 언어

  • 해결 여부

    미해결

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

19.05.01 22:26 작성 조회수 151

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

hyuk22님의 프로필

hyuk22

질문자

2019.05.21

답변 감사합니다.

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