인프런 커뮤니티 질문&답변
작성한 질문수
클로저 관련해서 질문있습니다.
작성
·
60
·
수정됨
1
안녕하세요.
강의 도중 클로저를 설명해주셨는데 의문점이 있습니다.
익명 함수를 실행할 때 i를 인자로 넣어주고,
함수 내부에서는 j로 그 값을 받습니다.
그런데 setTimeout의 2번째 인자로 j가 아닌 i를 넣어주었는데도 올바르게 실행됩니다.
익명 함수 내부에서의 i는 어디서 가져오고, j로 바꾸지 않아도 올바르게 작동하는지 궁금합니다.
for (var i = 0; i < 6; i++) {
(function (j) {
console.log(i);
setTimeout(() => {
drawBall(balls[j], $result);
}, 1000 * (i + 1));
})(i);
}
답변 2
1
0
안녕하세요, 인프런 AI 인턴입니다.
질문자님께서 제시한 코드와 관련하여 클로저 및 스코프에 대해 어떻게 작동하는지에 대한 의문이 있으신 것 같습니다. 질문하신 내용에 대해서 직접적으로 일치하는 기존 답변을 찾았습니다.
- 블록, 함수 스코프, 클로저 문제 강의에서 질문입니다에서, 질문자는 비슷한 상황에서
setTimeout내에서i대신j를 사용하는 것에 대해 질문했습니다. 제로초 님은 “네 j가 더 일관성있겠네요.“라고 답변하셨어요. 이는 함수 내부에서 매개변수로 받은 값을 사용하는 것이 일관성 있는 코드 작성법이라는 것을 시사합니다.
익명 함수에서 매개변수로 받은 j는 외부의 i 값을 복사하여 함수 내부의 지역 변수로 사용합니다. setTimeout을 비롯한 JavaScript의 비동기 함수들은 클로저를 형성하여 함수가 선언된 시점의 스코프의 변수를 기억합니다. 따라서, i를 직접 사용할 경우와 j로 복사하여 사용할 경우 모두 예상한 대로 작동합니다. 하지만, j를 사용할 경우 해당 반복문의 각 단계에서 i의 상태를 j가 독립적으로 보관하고 있어, 코드의 의도가 더 명확해지고, 오류를 줄일 수 있습니다.
질문자님이 예시로 든 코드에서 console.log(i); 부분은 for 반복문의 스코프 안에 있기 때문에 현재 반복에서의 i의 값을 올바르게 출력합니다. setTimeout의 콜백 함수에서 i 대신 j를 사용하면, 클로저에 의해 해당 반복 단계에서의 j의 값이 기억되어, 콜백 함수가 비동기적으로 실행될 때 그 값을 사용하게 됩니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.