JavaScript에서 요소 개수까지 고려하여 두 배열 비교하기

요소의 개수가 서로 같은 두 개의 배열 리터럴이 있다고 가정해 보겠습니다. 이때 우리가 작성해야 할 함수는 두 배열이 동일한 요소를 동일한 횟수만큼 포함하고 있는지 검사하는 기능입니다.

두 배열이 이 조건을 충족하면 true를, 그렇지 않으면 false를 반환하면 됩니다.

접근 방법

구현 전략은 다음과 같습니다. 먼저 두 번째 배열의 복사본을 생성한 뒤, 첫 번째 배열을 순회합니다. 순회 과정에서 첫 번째 배열의 각 요소와 일치하는 항목을 두 번째 배열의 복사본에서 하나씩 제거합니다. 순회 도중 복사본에 존재하지 않는 요소를 만나면 즉시 false를 반환하고, 모든 요소가 문제없이 처리되었다면 반복이 끝난 후 true를 반환합니다.

이 방식은 단순히 값의 존재 여부만 확인하는 것이 아니라, 각 요소가 몇 번 등장했는지까지 함께 검증하기 때문에 중복된 값이 있는 배열도 정확하게 비교할 수 있습니다.

예제 코드

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

const arr1 = [2, 5, 7, 4, 3, 3];
const arr2 = [3, 5, 7, 2, 3, 4];
const compareWithCount = (arr1, arr2) => {
   if(arr1.length !== arr2.length){
      return false;
   };
   const copy2 = arr2.slice();
   const areEqual = arr1.every(el => {
      if(!copy2.includes(el)){
         return false;
      };
      copy2.splice(copy2.indexOf(el), 1);
      return true;
   });
   return areEqual;
};
console.log(compareWithCount(arr1, arr2));

코드를 살펴보면 먼저 두 배열의 길이가 다른 경우 false를 즉시 반환하여 불필요한 연산을 줄입니다. 이후 slice()로 원본 배열을 보존하면서 복사본을 만들고, every() 메서드를 통해 첫 번째 배열의 모든 요소를 검사합니다. 각 요소는 includes()로 존재 여부를 확인한 뒤, splice()와 indexOf()를 조합해 복사본에서 해당 요소를 제거함으로써 등장 횟수까지 정확히 대응되는지 확인합니다.

실행 결과

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

true

위 예제에서 두 배열은 요소의 종류와 등장 횟수가 모두 일치하므로 true가 출력됩니다. 만약 한쪽에 특정 요소가 더 많거나 없다면 false가 반환됩니다.