JavaScript에서 검색 문자열로 객체 키 필터링하는 방법

JavaScript 개발을 하다 보면 객체의 키 중에서 특정 문자열로 시작하는 항목만 골라내야 하는 경우가 종종 있습니다. 예를 들어 검색 기능을 구현할 때 사용자가 입력한 문자열과 일치하는 키만 남기고 싶은 상황이 그렇습니다.

이번 글에서는 객체와 검색 문자열을 인자로 받아, 해당 문자열로 시작하는 키만 필터링해 새로운 객체를 반환하는 함수를 만드는 방법을 알아보겠습니다.

예제 코드

const obj = {
    "PHY": "Physics",
    "MAT": "Mathematics",
    "BIO": "Biology",
    "COM": "Computer Science",
    "SST": "Social Studies",
    "SAN": "Sanskrit",
    "ENG": "English",
    "HIN": "Hindi",
    "ESP": "Spanish",
    "BST": "Business Studies",
    "ECO": "Economics",
    "CHE": "Chemistry",
    "HIS": "History"
}
const str = 'en';
const returnFilteredObject = (obj, str) => {
    const filteredObj = {};
    Object.keys(obj).forEach(key => {
        if(key.substr(0, str.length).toLowerCase() ===
        str.toLowerCase()){
            filteredObj[key] = obj[key];
        }
    });
    return filteredObj;
};
console.log(returnFilteredObject(obj, str));

코드 설명

동작 원리는 매우 간단합니다. 다음 순서로 진행됩니다.

1. Object.keys(obj)를 사용해 객체의 모든 키를 배열로 가져옵니다.
2. 각 키를 순회하면서 substr(0, str.length)로 키의 앞부분만 잘라냅니다.
3. 잘라낸 부분을 toLowerCase()로 소문자로 변환한 뒤, 검색 문자열과 비교합니다. 이렇게 하면 대소문자 구분 없이 필터링할 수 있습니다.
4. 조건에 일치하는 키와 값만 새로운 객체 filteredObj에 저장하고, 일치하지 않으면 계속 순회를 진행합니다.
5. 마지막으로 필터링된 객체를 반환합니다.

성능 개선 팁

위 예제에서는 조건에 맞는 키를 새로운 객체에 담아 반환하는 방식을 사용했습니다. 하지만 원본 객체를 직접 수정해도 괜찮은 상황이라면, 새 객체를 생성하는 대신 조건에 맞지 않는 속성을 delete 연산자로 삭제하는 방식이 메모리 측면에서 더 효율적일 수 있습니다. 특히 객체의 크기가 크고 필터링 결과가 원본과 크게 다르지 않은 경우 유용합니다.

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다. 검색 문자열 'en'으로 시작하는 키는 ENG뿐이므로 해당 항목만 반환됩니다.

{
    ENG:"English"
}

마무리

이처럼 Object.keys()와 문자열 메서드를 조합하면 별도의 라이브러리 없이도 객체 키를 손쉽게 필터링할 수 있습니다. 참고로 최신 JavaScript 환경에서는 substr() 대신 slice(0, str.length)나 startsWith() 메서드를 사용하는 것이 권장됩니다. startsWith()를 활용하면 코드가 더욱 간결하고 가독성 좋아집니다.