Array.prototype.includes

보통 배열안에 특정 값이 들어있는지 확인할 때 사용하는 메서드 includes !

let fruits = ['🍎','🍇','🍉'];
let apple = '🍎';
let banana = '🍌';

fruits.includes(apple) // return true
fruits.includes(banana) // return false

그런데 개발하는 도중에 배열을 요소로 갖고있는 배열에서 특정 배열을 갖고 있는지 판별해야하는 상황이 생겼다. 역시 includes 메서드를 사용하면 될꺼라고 생각하고 무심코 사용하였으나, 생각되로 되지 않았다.

let arr = [['🍔','🍕'],['🐶','🐱'],['🚑','🚒'], '🇰🇷'];
let food = ['🍔','🍕'];

arr.includes(food) // false
arr.includes('🇰🇷') // true

Why ?

array.includes는 얕은 비교(shallow comparison)를 하기때문에 문자열이나 숫자같은 단일 인스턴스만 존재하는 원시참조값만 true를 얻을 수 있다.

다만, 배열같은 경우에는 판별하려는 배열의 인스턴스가 아닌 새로운 배열 인스턴스를 전달하기 때문에 얕은 비교에 실패한다.

How ?

그렇다면 배열은 판별할 수 없는것인가..? That's no no 그렇지 않다.
배열이 다른 배열에 포함되어있는지 확인하기 위해서 먼저 배열인지 확인 한 다음 깊은 비교(deep comparison)을 하면 된다.

solution ?

let sample = [ 'apple', 100, ['🇰🇷','korea'] ];
//
const includesArray = (data, arr) => {
  return data.some(e => Array.isArray(e) && e.every((o, i) => Object.is(arr[i] , o)));
}
//
console.log(includesArray(sample, ['🇰🇷','korea'] )) // true;

이참에 javascript의 some, every, is 메서드에 대해서 공부해야겠다...