JavaScript를 사용해 키(title) 값을 기준으로 객체 배열 필터링하기

다음과 같이 객체 여러 개로 이루어진 배열이 있다고 가정해 보겠습니다.

const arr = [{ 'title': 'Hey',
    'foo': 2,
    'bar': 3
}, {
    'title': 'Sup',
    'foo': 3,
    'bar': 4
}, {
    'title': 'Remove',
    'foo': 3,
    'bar': 4
}];

여기서 우리가 작성해야 할 함수는 첫 번째 인자로 위와 같은 객체 배열을, 두 번째 인자로 문자열 리터럴 배열을 전달받습니다.

이 함수는 각 객체의 title 속성 값이 두 번째로 전달된 문자열 배열의 요소 중 하나라도 부분적으로 또는 완전히 포함되어 있는 경우, 해당 객체들만 모아 새로운 배열을 만들어 반환해야 합니다. 즉, 완전히 일치하지 않더라도 부분 문자열만으로 매칭이 가능하다는 점이 핵심입니다.

예제 코드

이를 구현한 코드는 다음과 같습니다.

const arr = [{ 'title': 'Hey',
    'foo': 2,
    'bar': 3
}, {
    'title': 'Sup',
    'foo': 3,
    'bar': 4
}, {
    'title': 'Remove',
    'foo': 3,
    'bar': 4
}];
const filterTitles = ['He', 'Su'];
const filterByTitle = (arr = [], titles = []) => {
    let res = [];
    res = arr.filter(obj => {
        const { title } = obj;
        return !!titles.find(el => title.includes(el));
    });
    return res;
};
console.log(filterByTitle(arr, filterTitles));

코드 동작 원리

위 코드의 핵심 로직은 크게 세 가지 메서드로 구성됩니다.

1. Array.prototype.filter() − 원본 배열인 arr을 순회하면서 콜백 함수가 true를 반환하는 객체들만 모아 새로운 배열을 생성합니다. 원본 배열은 변경되지 않습니다.

2. 구조 분해 할당(Destructuring) − const { title } = obj; 문법을 통해 각 객체에서 title 속성 값을 간결하게 추출합니다.

3. String.prototype.includes() − 객체의 title 문자열 안에 검색 조건으로 넘어온 문자열(예: 'He', 'Su')이 포함되어 있는지 확인합니다. 하나라도 포함되면 find가 해당 요소를 반환하고, 이중 부정(!!)을 통해 불리언 값으로 변환됩니다.

그 결과, title이 'Remove'인 객체는 조건 배열 ['He', 'Su']의 어떤 문자열도 포함하고 있지 않으므로 최종 결과에서 자연스럽게 제외됩니다.

실행 결과

콘솔에는 다음과 같이 출력됩니다.

[ { title: 'Hey', foo: 2, bar: 3 }, { title: 'Sup', foo: 3, bar: 4 } ]

이처럼 filter, find, includes 세 가지 메서드를 조합하면 별도의 반복문 없이도 선언적으로 깔끔하게 객체 배열을 필터링할 수 있습니다. 대소문자를 구분하지 않고 매칭하려면 title.toLowerCase().includes(el.toLowerCase())처럼 비교 전에 소문자로 통일해 주면 됩니다.