JavaScript의 Array.prototype.every()로 두 배열 비교하기

JavaScript 프로그래밍에서 두 배열을 비교해야 하는 경우가 자주 있습니다. 이번 글에서는 Array.prototype.every() 메서드를 활용하여 첫 번째 배열의 모든 요소가 두 번째 배열에 포함되어 있는지 확인하는 방법을 알아보겠습니다.

문제 정의

두 개의 리터럴 배열을 인자로 받는 JavaScript 함수를 작성해야 합니다. 이 함수는 첫 번째 배열의 모든 요소가 두 번째 배열에 포함되어 있으면(요소의 개수나 순서는 무관) true를 반환하고, 하나라도 포함되어 있지 않으면 false를 반환해야 합니다.

every() 메서드란?

Array.prototype.every()는 배열의 모든 요소가 주어진 콜백 함수의 테스트를 통과하는지 검사하는 고차 함수입니다. 배열을 순회하면서 콜백 함수가 false를 반환하는 요소를 발견하면 즉시 순회를 중단하고 false를 반환하므로, 효율적인 조건 검사에 적합합니다.

구현 예제

const arr1 = [0, 2, 2, 2, 1];
const arr2 = [0, 2, 2, 2, 3];

const compareArrays = (arr1, arr2) => {
  const areEqual = arr1.every(el => {
    return arr2.includes(el);
  });
  return areEqual;
};

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

코드 설명

위 코드의 동작 방식은 다음과 같습니다.

• compareArrays는 화살표 함수로, 두 개의 배열을 매개변수로 받습니다.
• arr1.every()는 첫 번째 배열의 각 요소를 순회하며 콜백 함수를 실행합니다.
• 콜백 함수 내부의 arr2.includes(el)는 현재 요소가 두 번째 배열에 존재하는지 확인합니다.
• 모든 요소가 존재하면 true, 하나라도 없으면 false를 반환합니다.

실행 결과

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

false

첫 번째 배열의 마지막 요소 1이 두 번째 배열 [0, 2, 2, 2, 3]에는 존재하지 않기 때문에 결과는 false가 됩니다.

주의할 점

이 방식은 포함 여부만 검사하기 때문에 중복 개수까지 완벽하게 일치하는지는 확인하지 않습니다. 예를 들어 첫 번째 배열에 2가 세 개 있어도, 두 번째 배열에 2가 하나만 있어도 true가 반환됩니다. 요소의 개수까지 정확히 비교해야 한다면 배열을 먼저 정렬한 뒤 각 인덱스별로 비교하거나, 빈도수를 계산하는 추가 로직이 필요합니다.