안녕하세요 infowindow에 listdata를 불러오지 못해 문의드립니다

지도/로컬 API
#1 
var map = new kakao.maps.Map(mapContainer, mapOption);

var geocoder = new daum.maps.services.Geocoder();

var listData = [
    {
        content: '<div style="width:150px;text-align:center;padding:1px 0;">가람마을점</div>',
        groupAddress: '경기 파주시 가람로 47(와동동)'
    },
    {
        content: '<div style="width:150px;text-align:center;padding:1px 0;">가평점</div>',
        groupAddress: '경기 가평군 가평읍 가화로 55-10'
    }
];

for (var i=0; i < listData.length ; i++) {
  
geocoder.addressSearch(listData[i].groupAddress, function(result, status) {

     if (status === daum.maps.services.Status.OK) {

        var coords = new daum.maps.LatLng(result[0].y, result[0].x);

        var marker = new daum.maps.Marker({
            map: map,
            position: coords
        });

        var infowindow = new daum.maps.InfoWindow({
            content: listData[i].content
        });
        infowindow.open(map, marker);


         map.setCenter(coords);
     }
 })


 };

var infowindow = new daum.maps.InfoWindow({
content: listData[i].content
})
여기에서 content: listData[0]으로 하니 작동은 되는걸 확인했는데
listData[i]로 하니 아예 인포윈도우가 뜨질 않네요
어떻게 해야 뜨게할수 있을까요??

#2

콘솔로 i를 출력해보면 2(listData.length)가 출력되고,
listData의 2번째 값이 없기 때문에 listData[2].content 값을 참조할 수 없어 생긴 문제입니다.
아래 답변처럼 for문 내 es6 문법인 let/const를 사용하거나 forEach문을 사용해서 스코프 유지를 해주세요.
https://devtalk.kakao.com/t/topic/55564/3

또한, 비동기 순차 처리가 필요한 경우는 아래 답변 참고해주세요.
https://devtalk.kakao.com/t/topic/115312/2