javascript forEach 사용시 주의사항

javascript forEach 사용시 주의사항

angularjs 로 프로젝트를 하던 중 정말 당황한 내용이 있어 정리합니다.

angularjs 라고는 해도 javascript 문법에 해당하며 아마도 자주 사용할 것으로 생각되는 forEach에 대한 내용입니다.

일단 제가 구현하고자 했던 내용은 다음과 같습니다.

• registry.menus에 여러 menu 메뉴 정보가 배열로 들어 있고 각 menu 별로 id가 지정되어 있는 데이터가 있음
• 함수의 파라메터로 id를 넘겨 데이터에 있는 menu.id 와 일치하면 해당되는 item을 리턴하도록 구현

저는 일반적인 for문을 생각하고 너무나 당연하게 아래와 같은 함수를 작성했지만 실제 결과는 계속해서 Not found가 로그에 찍혔습니다.

function functionA(id) {
    if (registry) {
        if (id) {
            registry.menus.forEach((menu, index, array) => {
                if (menu.id === id){
                    return menu.item;
                }
            });
            console.error("Not found : " + id);
            return null;
        }
    }
    return null;
}

아무리 console.log로 값을 찍어 보고, name과 menu.name의 타입을 비교해 봐도 id는 동일한데 말입니다.

한두시간정도 고민하다 도저히 이해가 가지 않아 옆자리 후임에게 물어 봤습니다.

본인 : "난 도저히 이해할 수 없다. 이거 왜 그런거냐?"

후임 : "혹시 return menu.items 에서 return 이 forEach만 빠져나오는 것은 아닐까요?"

바로 log를 찍어 봤습니다.

본인 : "..... 너 정말 대단하구나!"

결국 아래와 같이 수정했습니다.

function functionA(id) {
    if (registry) {
        if (id) {
            var item;
            registry.menus.forEach((menu, index, array) => {
                if (menu.id === id){
                    item = menu.item;
                    return;
                }
            });

            if(item){
                return item;
            }
            else{
                console.error("Not found : " + id);
                return null;
            }
        }
    }
    return null;
}

java, c 로 개발하시다 javascript를 접하시는 개발자분들께서 같은 고생 하지 않으시길 빕니다. ^^