[자바스크립트/javascript] 두 배열의 값이 같은지 비교하는 방법

개발하면서 두 배열 안의 값이 같은지 비교해야 될 때가 많다.
상황에 따라 비교하는 방법도 여러 가지라 이번에 한 번 정리해봐야겠다.

---

배열 A와 배열 B의 값이 같은지 비교할 때

const arrA = [1,2,3,4,5]
const arrB = [1,2,3,4,5]

arrA === arrB // 당연히 false..
arrA.toString() === arrB.toString() // true
JSON.stringify(arrA) === JSON.stringify(arrB) // true

- arrA와 arrB는 배열의 주소 값을 가지고 있기 때문에 === 로 비교할 경우 당연히 false를 출력한다
- 배열을 toString()으로 형 변환 한 다음 비교했기 때문에 true를 출력한다
- 두 번째 방법과 비슷하게 형 변환을 한 다음 비교했기 때문에 true를 출력한다

다만 배열의 경우 여러 가지 타입의 값을 가질 수 있는데 예를 들어 아래와 같이
object로 이루어진 배열의 경우 toString()은 제대로 동작하지 않을 가능성이 있다

const arrC = [{name : "none"}, {age : 20}]
console.log(arrC.toString()) // [object Object],[object Object]
console.log(JSON.stringify(arrC)) // [{"name":"none"},{"age":20}]

 

여기서 함정은 배열의 값과 index까지 완벽히 일치할 때만 true를 반환한다는 점이다!

const aaa = [1,2,3,4,5];
const bbb = [5,4,3,2,1];

console.log(aaa.toString() === bbb.toString()); // false

 

이런 함정을 피하기 위해 every()와 includes()가 필요하다

const testA = [1,2,3,4,5,6,7,8,9,10];
const testB = [1,2,3,4,5];
const testC = [1,2,3,10,20];

console.log(testB.every(item => testA.includes(item))); // true
console.log(testC.every(item => testA.includes(item))); // false

testB 배열을 순회하면서 배열 내 각각의 값이 testA 배열 안에 포함되어 있는지 확인한 다음
모두 true일 경우 true를 리턴한다

어느 것이 맞다는 정답은 없고 각자 니즈에 맞게 잘 사용하면 된다!