TIL 72 | JS 두 배열을 비교하기

Gom·2021년 4월 30일

JavaScript

목록 보기

18/22

현재 진행 중인 프로젝트에서 API 통신으로 응답받은 데이터가 가공이 많이 필요한 형태로 주어졌다. 그래서 렌더링 전에 배열간 비교, 객체로 이루어진 배열간 비교를 자주 수행하게 되었다. 브라우저 탭을 빼곡히 채워 검색했던 내용들을 정리해보려한다.

이번 글에서는 원시타입 자료형 요소로 이루어진 배열을 비교하는 법을 정리하고
이어 객체로 이루어진 배열간 비교를 정리할 예정이다.

JavaScript 배열 간 비교

목적

아마 배열 간 비교를 통해 얻고 싶은 정보는 아래 세 가지 정도로 추려질 것이다.
순서대로 비교 방법을 알아보자.

두 배열이 동일한 지
두 배열의 교집합
두 배열의 차집합

두 배열이 동일한 지 판단하기

두 가지 방식을 소개할것인데
첫 번째는 전통적인 방법이고 두 번째는 아주 간단하게 비교할 수 있는 방식이다.
공통점은 배열들이 정렬되어 있을 때 사용 가능하다는 점이다.

1. Loop (반복문)

배열들을 반복하여 모든 단일 요소가 일치하는 지 확인한다.

const a1 = [1, 2, 3];
const a2 = [1, 2, 3]; 
const a3 = [1, 2, 3, 4];

const getResult = function (a1, a2) {
   let i = a1.length;
   if (i != a2.length) return false;

   while (i--) {
     if (a1[i] !== a2[i]) return false;
   }
   return true;
 };

console.log("Comparing a1 and a2", getResult(a1, a2)); //Comparing a1 and a2 true
console.log("Comparing a1 and a3", getResult(a1, a3)); //Comparing a1 and a3 false

i-- 조건 : while문 안에 조건이 0이될 때 false로 인식하고 반복문이 종료되기 때문에 배열의 길이인 i만큼 반복하기 위함이다.

2. JSON.stringify()

이 함수는 JSON 형식으로 서버와 데이터를 주고받을 때 문자열 형태로 변경하기 위해 사용하는 것이지만 여기서는 배열을 문자열로 변경하여 아주 간편하게 배열을 비교할 수 있게 해주는 역할을 한다. 배열을 문자열로 변경하면 요소를 하나씩 꺼내 비교할 필요없이 ===만으로 동일 여부를 판단할 수 있다.

const a1 = [1, 2, 3];
const a2 = [1, 2, 3]; 
const a3 = [1, 2, 3, 4];

console.log("Comparing a1 and a2", JSON.stringify(a1) === JSON.stringify(a2));
console.log("Comparing a1 and a3", JSON.stringify(a1) === JSON.stringify(a3));

교집합과 차집합

아래 두 가지 method를 이용하면 배열 간 교집합과 차집합을 간단한 코드로 표현할 수 있다.

Array.filter() : 조건에 해당하는 요소들만을 포함한 새로운 배열 반환하는 함수
Array.includes() : 배열 안에 특정 요소가 포함되어 있는 지 여부를 반환하는 함수

두 배열의 교집합 찾기

const a2 = [1, 2, 3]; 
const a3 = [1, 2, 3, 4];

console.log(a2.filter(x=> a3.includes(x)));

의미

a2 배열 요소들에 대하여 filter 함수 괄호 안에 있는 조건에 해당되는 요소들만으로 새로운 배열을 생성하는 것이며 이 때의 조건이란 a3 배열에 포함되어 있어야 하는 것이다.
즉 비교대상 A의 요소가 비교대상 B 배열 안에 포함되어 있는 경우들만 추려내는 과정이다.

두 배열의 차집합 찾기

const a2 = [1, 2, 3]; 
const a3 = [1, 2, 3, 4];

console.log(a2.filter(x=> !a3.includes(x)));

차이는 NOT연산자(!)

a2 배열 요소들에 대하여 filter 함수 괄호 안에 있는 조건에 해당되는 요소들만으로 새로운 배열을 생성하는 것이며 이 때의 조건이란 a3 배열에 포함되어 있지 않아야 하는 것이다.
즉 비교대상 A의 요소가 비교대상 B 배열 안에 포함되어 있지 않은 경우들만 추려내는 과정이다.