[Js] 클로저 활용 문제

1번과 2번의 차이를 설명하시오.

1.

var arr = []  for(var i = 0; i < 5; i++){   arr[i] = function(){    return i;   }  }    for(var index in arr) {    console.log(arr[index]());  }

 

2. 

var arr = []  for(var i = 0; i < 5; i++){    arr[i] = function(id) {      return function(){       return id;      }    }(i);  }  for(var index in arr) {    console.log(arr[index]());  }

 

크롬 디버깅에서 Console창에 출력시켜보고 왜 그런값이 나오는지 설명할 것

 

---

그 이유는 다음과 같다.

 

1. 배열에 function 자체(설계도)를 대입

var arr = []  for(var i = 0; i < 5; i++){   arr[i] = function(){    return i;   }  }    // 배열별로 function 자체(설계도)를 대입하여 값이 안 정해짐  // arr은 (5) [ƒ, ƒ, ƒ, ƒ, ƒ]  // 여기서 i값이 5라서 아래 함수 호출시에 index와 상관없이 5를 호출    for(var index in arr) {    console.log(arr[index]());  }

arr[index] = ƒ (){       return i;      }

 

2. 배열에 함수로 호출된 결과값을 대입

var arr = []  for(var i = 0; i < 5; i++){    arr[i] = function(id) {      return function(){       return id;      }    }(i);  }    // 배열별로 함수를 호출하여 이미 값이 정해짐  // arr은 (5) [ƒ, ƒ, ƒ, ƒ, ƒ]  // 여기서 i값이 5더라도 아래 함수 호출시에는 id가 리턴되기 때문에, index에 이미 저장되어있던 파라미터 값 기준으로 호출    for(var index in arr) {    console.log(arr[index]());  }

// 최종 i가 5지만 반복문 돌때 파라미터 값을 따로 가지고 있기 때문에 그값 기준으로 리턴됨 arr[index] = ƒ (){       return id;      }

 

출처 : https://opentutorials.org/course/743/6544