클로저 문제에 대해 질문이 있습니다.

Question

아주 유명한 클로저 문제인데요
해당 코드에서 setTimeout의 콜백함수가 10번 생기게 되는데,
이 때 바깥의 func함수의 변수 i는 10개가 생기는 건가요?
아니면 한 개만 생기는건가요?

손정현 · Answer

안녕하세요!

우선 답변부터 드리자면 1개만 생기게 되는 것으로 알고있습니다.

i를 var로 선언하셨기 때문에 func 함수의 스코프로 할당이 되는데요. 이 때문에 setTimeout에 제공하는 arrow function 속 i도 func 스코프의 i를 뜻하게 됩니다.

만약 i를 let으로 선언하셨다면,

ex) for ( let i = 0; i < 10; i++ ) {
  setTimeout(() => {
    console.log(i)
  })
}

반복문이 한번 돌때마다 i는 block 스코프로 할당이되고 setTimeout에 제공하는 arrow function도 해당 block 스코프 속 i를 사용하게 됩니다.

그래서 var를 사용한 예시는 setTimeout의 콜백이 돌때는 이미 for 반복문이 다 돌고 난 뒤고 func의 스코프를 사용하기 때문에 console.log가 다 10을 찍는 반면, let을 사용한 예시는 for 반복문이 다 돌았어도 setTimeout의 콜백이 for 반복문의 개별 스코프를 사용하기 때문에 console.log가 0~9까지 올바르게 찍는 것을 알 수 있습니다.

이 개념은 JS의 호이스팅과 스코프 개념을 알고 계시면 이해가 더 빠르실 것 같습니다. 참고하시면 좋을법한 링크들 첨부합니다 :)
- https://ui.toast.com/weekly-pick/ko_20160311
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#lexical_scoping
- https://developer.mozilla.org/en-US/docs/Glossary/Hoisting
- https://www.freecodecamp.org/news/lexical-scope-in-javascript/

황민호 · Answer

func 함수의 변수 i는 하나만 됩니다. setTimeout의 콜백 함수가 10번 발생하면 매번 i의 값을 출력하게 되어 10이 됩니다. 이는 setTimeout 콜백 함수 내에서 i의 값이 클로저에 캡처되지 않기 때문에 항상 참조하게 됩니다.