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

문제 상황

다음과 같이 문자열로 이루어진 배열 하나와 객체로 이루어진 배열 하나가 있다고 가정해 보겠습니다.

const arr1 = [ '1956888670', '2109171907', '298845084' ];
const arr2 = [
    { KEY: '1262875245', VALUE: 'Vijay Kumar Verma' },
    { KEY: '1956888670', VALUE: 'Sivakesava Nallam' },
    { KEY: '2109171907', VALUE: 'udm analyst' },
    { KEY: '298845084', VALUE: 'Mukesh Nagora' },
    { KEY: '2007285563', VALUE: 'Yang Liu' },
    { KEY: '1976156380', VALUE: 'Imtiaz Zafar' },
];

우리가 작성해야 할 것은 이처럼 구성된 두 개의 배열을 인수로 받는 JavaScript 함수입니다. 이 함수는 두 번째 배열을 필터링하여, KEY 속성의 값이 첫 번째 문자열 배열에 포함되어 있는 객체들만 모은 새로운 배열을 반환해야 합니다.

예제 코드

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

const arr1 = [ '1956888670', '2109171907', '298845084' ];
const arr2 = [
    { KEY: '1262875245', VALUE: 'Vijay Kumar Verma' },
    { KEY: '1956888670', VALUE: 'Sivakesava Nallam' },
    { KEY: '2109171907', VALUE: 'udm analyst' },
    { KEY: '298845084', VALUE: 'Mukesh Nagora' },
    { KEY: '2007285563', VALUE: 'Yang Liu' },
    { KEY: '1976156380', VALUE: 'Imtiaz Zafar' },
];
const filterByKey = (arr1 = [], arr2 = []) => {
    let res = [];
    res = arr2.filter(el => {
        const { KEY } = el;
        const index = arr1.indexOf(KEY);
        return index !== -1;
    });
    return res;
};
console.log(filterByKey(arr1, arr2));

실행 결과

콘솔에 출력되는 결과는 다음과 같습니다.

[
    { KEY: '1956888670', VALUE: 'Sivakesava Nallam' },
    { KEY: '2109171907', VALUE: 'udm analyst' },
    { KEY: '298845084', VALUE: 'Mukesh Nagora' }
]

코드 설명

핵심 로직을 단계별로 살펴보면 다음과 같습니다.

• filter(): arr2의 각 요소를 순회하면서 조건을 만족하는 요소만 모아 새로운 배열을 생성합니다.
• 구조 분해 할당: const { KEY } = el; 문법으로 각 객체에서 KEY 값을 간편하게 추출합니다.
• indexOf(): KEY 값이 arr1에 존재하는지 확인합니다. 값이 있으면 해당 인덱스를, 없으면 -1을 반환하므로 index !== -1 조건으로 존재 여부를 판별할 수 있습니다.

더 간결한 대안: includes() 활용

indexOf() 대신 ES2015에서 도입된 includes() 메서드를 사용하면 코드를 훨씬 읽기 쉽게 만들 수 있습니다.

const filterByKey = (arr1 = [], arr2 = []) =>
    arr2.filter(({ KEY }) => arr1.includes(KEY));

console.log(filterByKey(arr1, arr2));

대용량 데이터를 위한 최적화: Set 활용

배열의 크기가 매우 클 경우 indexOf()나 includes()는 매번 선형 탐색(O(n))을 수행하므로 성능이 저하될 수 있습니다. 이럴 때는 Set 객체를 활용하면 조회 시간을 O(1) 수준으로 줄일 수 있습니다.

const filterByKey = (keys, items) => {
    const keySet = new Set(keys);
    return items.filter(({ KEY }) => keySet.has(KEY));
};

상황에 맞는 방법을 선택하면 가독성과 성능을 모두 챙길 수 있습니다. 소규모 데이터라면 includes() 방식으로 충분하고, 데이터가 많거나 반복 조회가 잦다면 Set 기반 접근이 더 효율적입니다.