섹션15. 클로저 응용 수업 질문

Question

15장 클로저 응용 수업부분에서 0~4의 결과가 나올수 있게 혼자서 코드 연습을 해보다가 다음과 같이 작성 하여도 0~4의 결과가 나올 수 있음을 확인하였습니다. 수업에 있는 코드와는 다르게 제가 작성한 코드에서는 inner function을 사용하지는 않았지만, arr[i]가 함수가 아닌 결과값인 id만 저장하는 것 처럼 되었습니다.(arr[i]=id) 이렇게 작성하여도 위에 있는 수업내용과 같다고 할 수 있는 건가요? 아니면 수업에서는 closure의 응용을 보여주기 위해 일부러 inner function을 사용한 건가요? 고수님들 도와주세요! 이건 수업시간에 배운 코드 이구요 이건 제가 연습한 코드 입니다! var arr = []; for(var i = 0; i < 5; i++){ arr[i]=function (id){ return id; }(i); } for (var index in arr){ console.log(arr[index]); }

draw · Answer

이미 오래지나서 제 답변이 유의미할 지는 모르겠지만 수업내용과는 좀 차이가 있습니다. 작성자분께서 작성하신 코드는 arr[i] 에 함수를 할당하고 i를 전달인자(parameter)로 주고 바로 할당한 함수를 실행한 코드입니다. for (var i = 0; i < 5; i++) { arr[i] = i; } 결국 배열에 직접 값을 할당한 이 코드랑 같은 셈죠. 영상에서는 배열에 함수를 담아 사용할 때의 상황을 소개하고 있는데, arr[i] 에 함수를 할당 한 후 함수를 호출하였을 때 5만 계속 를 리턴하는 예상밖의 문제가 발생하죠.  그리고 그 해결책으로 Closure를 사용한 것입니다. 또한, 이건 var를 사용할 때의 문제점이기도 합니다. 문제 발생의 이유는 당시 배열에 할당된 함수가 전역변수 i를 계속해서 참조하고 있기 때문입니다. var는 function scope이기 때문에 for에서 선언하면 전역변수로써 기능해버리죠. arr[0] = function () { return i; // 전역 변수 i를 계속해서 참조. } ... arr[1] = function () { return i; }