JavaScript에서 다른 배열을 기준으로 배열 필터링하는 방법

두 개의 배열이 다음과 같이 주어져 있다고 가정해 보겠습니다.

const arr1 = [4, 23, 7, 6, 3, 6, 4, 3, 56, 4];
const arr2 = [4, 56, 23];

여기서 우리가 작성해야 할 것은 두 배열을 인자로 받아, 첫 번째 배열에서 두 번째 배열에 포함되지 않은 요소만 남도록 필터링한 뒤 그 결과 배열을 반환하는 JavaScript 함수입니다.

따라서 기대하는 출력 결과는 다음과 같습니다.

const output = [7, 6, 3, 6, 3];

구현 방법

이 기능은 Array.prototype.filter() 메서드와 indexOf()를 조합하면 간단하게 구현할 수 있습니다. filter()는 콜백 함수가 true를 반환하는 요소만 모아 새로운 배열을 생성하며, indexOf()는 특정 요소가 배열에 존재하지 않으면 -1을 반환한다는 점을 활용합니다.

예제 코드

const arr1 = [4, 23, 7, 6, 3, 6, 4, 3, 56, 4];
const arr2 = [4, 56, 23];

const filterArray = (arr1, arr2) => {
    const filtered = arr1.filter(el => {
        return arr2.indexOf(el) === -1;
    });
    return filtered;
};

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

실행 결과

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

[ 7, 6, 3, 6, 3 ]

코드 설명

filterArray 함수는 arr1의 각 요소(el)에 대해 arr2.indexOf(el)를 호출합니다. el이 arr2에 존재하면 indexOf는 해당 인덱스를 반환하고, 존재하지 않으면 -1을 반환합니다. 따라서 indexOf(el) === -1 조건을 만족하는 요소, 즉 두 번째 배열에 없는 요소들만 filtered 배열에 남게 됩니다.

참고로 ES2015(ES6) 이상 환경이라면 includes() 메서드를 사용해 같은 로직을 더 직관적으로 표현할 수 있습니다.

const filterArray = (arr1, arr2) => arr1.filter(el => !arr2.includes(el));