JavaScript에서 문자열 키를 기준으로 두 배열 비교하는 방법

JavaScript에서 객체 배열을 다루다 보면 특정 키(문자열) 값을 기준으로 두 배열을 비교해야 하는 경우가 자주 발생합니다. 예를 들어 두 배열에서 공통으로 존재하는 이름을 찾고 싶다면 map()과 includes() 메서드를 조합하면 간단하게 해결할 수 있습니다.

비교할 배열 준비하기

먼저 첫 번째 배열은 다음과 같습니다.

const firstArray = [
    { "name": "John Doe" },
    { "name": "John Smith" },
    { "name": "David Miller" },
    { "name": "Bob Taylor" },
    { "name": "Carol taylor" },
    { "name": "Adam Smith" },
];

두 번째 배열은 다음과 같습니다.

const secondArray = [
    { "name": "Adam Smith" },
    { "name": "John Doe" },
    { "name": "David Miller" },
    { "name": "James Taylor" }
];

map()과 includes()로 공통 요소 찾기

map()은 배열의 각 요소를 변환하여 새로운 배열을 반환하고, includes()는 특정 값이 배열에 포함되어 있는지 확인합니다. 이 두 메서드를 조합하면 name 키의 문자열 값을 추출한 뒤, 두 번째 배열에 동일한 값이 존재하는지 필터링할 수 있습니다.

전체 코드

const firstArray = [
    { "name": "John Doe" },
    { "name": "John Smith" },
    { "name": "David Miller" },
    { "name": "Bob Taylor" },
    { "name": "Carol taylor" },
    { "name": "Adam Smith" },
];
const secondArray = [
    { "name": "Adam Smith" },
    { "name": "John Doe" },
    { "name": "David Miller" },
    { "name": "James Taylor" }
];
const getAllValue = ({ 'name': name }) => name;
const result = firstArray
    .map(getAllValue)
    .filter(value => secondArray
        .map(getAllValue)
        .includes(value)
    );
console.log(result);

프로그램 실행 방법

위 프로그램을 실행하려면 Node.js 환경에서 다음 명령어를 입력합니다. 여기서는 파일 이름이 demo251.js라고 가정합니다.

node demo251.js

실행 결과

코드를 실행하면 콘솔에 다음과 같은 출력이 나타납니다.

PS C:\Users\Amit\javascript-code> node demo251.js
[ 'John Doe', 'David Miller', 'Adam Smith' ]

동작 원리 정리

1. getAllValue 함수: 구조 분해 할당을 활용해 각 객체에서 name 속성값만 추출합니다.
2. firstArray.map(getAllValue): 첫 번째 배열을 이름 문자열 배열로 변환합니다.
3. filter(): 두 번째 배열의 이름 목록에 포함된 값만 걸러냅니다.
4. 최종적으로 두 배열에 공통으로 존재하는 'John Doe', 'David Miller', 'Adam Smith'가 결과로 반환됩니다.

성능 개선 팁: Set 활용하기

배열의 크기가 커지면 includes()는 일치하는 값을 찾을 때까지 처음부터 순차적으로 검색하므로 시간 복잡도가 O(n×m)까지 증가할 수 있습니다. 이럴 때 Set을 사용하면 조회 속도를 O(1) 수준으로 개선할 수 있습니다.

const secondSet = new Set(secondArray.map(getAllValue));
const result = firstArray
    .map(getAllValue)
    .filter(value => secondSet.has(value));
console.log(result);

이처럼 map(), filter(), includes()의 조합만으로도 문자열 키를 기준으로 한 배열 비교를 손쉽게 구현할 수 있으며, 데이터 양이 많은 경우에는 Set을 함께 활용하면 훨씬 더 효율적인 처리가 가능합니다.