javascript Object의 필터링 구현

회사에서 개발을 하던도중 프론트엔드쪽에서 간단한 필터링을 구현해야 했었는데, 그 작업을 하면서 생겼던 이슈에 대해서 정리한다.

구현하고자 했던 기능은 흔히 웹사이트에서 자주볼 수 있는 기능으로 검색창에 특정글자를 입력하면 조건에 부합하는 리스트만 출력되는 기능이였는데, 대략 다음과 같은 데이터가 있고, 사용자에게 보여지는건 값만 보여지게 되어있다.

key : value

기호1번 : 이재명

기호2번 : 윤석열

기호3번 : 안철수

기호4번 : 심상정

기호5번 : 오준호

기호6번 : 허경영

기호7번 : 이백윤

기호8번 : 옥은호

기호9번 : 김경재

기호10번 : 김재연

여기서 사용자가 보여지는건 value에 해당되고, 사용자가 검색창에 "이"라는 단어를 검색하면 이라는 단어가 들어가있는 이재명, 이백윤만 리스트에 출력되면되는 간단한 기능이다.

처음에는 value만 생각해서 Object.values와 filter를 이용하면 되겠다라는 생각으로 다음과 같이 작성했다.

function filterList(targetName, originObj) {
    //targetName으로 이가 들어왔을 때.
    let result;
    result = Object.values(originObj).filter(item => item.includes(targetName));
    // 예상했던 결과 = {기호1번 : 이재명, 기호7번 : 이백윤} 
    // 실제로 나온 결과값 = [0 : 이재명, 1 : 1 : 이재윤] Array로 리턴 됨
}
 
 

function filterList(targetName, originObj) {
    // input : 이
    let reulst = {};
    Object.entries(orginObj).forEach(([key, value]) => { // for .. of문을 사용해도 되지만 arrowfuction, forEach사용
        if(value.includes(value)) { // indexOf를 이용해도 되지만 최신의 includes를 사용
            result[key] = value;
        }
    });
    // output : {기호1번 : 이재명, 기호 7번 : 이백윤}
}

사실 이런방법 말고도 더 좋은방법이 있을것 같지만, 공을 들여서 해야하는 작업은 아닌지라 이렇게까지만 작성하고, 추후에 더 좋은방법을 알게되면 리팩토링을 해야겠다.