[Map API, Web] 여러개의 마커에 클릭 이벤트 관련 질문입니다.(요약:마지막 이벤트가 모드 등록됩니다.)

안녕하세요. 저는 현재 지도 api를 사용하여 여러개의 이미지 마커를 찍었구

각각의 마커에 이벤트를 주려고 add리스너를 사용하였는데

제가 이해했던 구조상으로는 클릭이벤트를 각각의 마커에 넣어줬다고 생각했는데

콘솔을 찍어보니까 마지막으로 넣은 이벤트가 모든 마커에 등록 되어있었습니다.

어떤 문제가 있는지 많은 답변 부탁드립니다 ㅠ_ㅜ

list1에는 셋팅된 Marker가 들어가 있습니다.
아래처럼 콘솔을 찍어보면
클릭시에 이벤트가 list1.length로만 출력되고 있습니다.
이 함수 전까지의 값들은 디버깅을 통해서 확인을 했는데
kakao.maps.event.addListener <- 이친구의 구조가 잘 이해가 안가서 마지막 난관에 와있습니다.
모든 버튼이 3개 있다면 3개의 버튼 모두가 3이라는 수가 콘솔에 찍히고 있습니다.
list1에 Marker를 넣기전에 클릭이벤트를 넣어보기도 했는데 결국에 같은 결과를 보고 있습니다.
function setList1(map) {
for (var i = 0; i < list1.length; i++) {
list1[i].setMap(map);
kakao.maps.event.addListener(list1[i], ‘click’, function() {
console.log(i);
});
}
}

엄밀히 따지고 보면 마지막도 아니죠.
인덱스 0번부터 시작해서 list1.length-1 번째 까지가 의도하신 걸텐데,
list1.length 가 출력되니까 마지막에 등록된 이벤트가 아닙니다.
그냥 for문으로 마지막까지 값이 증가한 i가 이벤트 핸들러에서 사용된 거에요.
이벤트가 실행될 시점에서의 i값이 무엇일지 생각해 보시면 이해가 쉽습니다.

다른 분들도 해당 현상을 많이 겪고 질문하십니다.
이를 해결하기 위한 몇 가지 방법들이 있는데
저는 Array.forEach() 함수의 사용을 추천드리고 있습니다.

ES6 사용이 가능하다면
for문 안의 var ilet i 로 바꿔 주기만 하면 원하는 동작이 나옵니다.