JavaScript 배열에서 여러 값이 포함되어 있는지 확인하는 방법

JavaScript 개발을 하다 보면 두 개의 숫자 배열을 비교하여 첫 번째 배열의 모든 요소가 두 번째 배열에 존재하는지 확인해야 하는 경우가 자주 있습니다. 이 글에서는 map()과 indexOf()를 활용해 이 문제를 해결하는 방법을 소개합니다.

접근 방식

핵심 아이디어는 다음과 같습니다.

• 첫 번째 배열의 각 요소에 대해 indexOf() 메서드를 사용해 두 번째 배열 내에서의 위치(인덱스)를 찾습니다.
• 요소가 존재하지 않으면 indexOf()는 -1을 반환합니다.
• 따라서 결과 인덱스 배열에 -1이 하나라도 포함되어 있다면, 첫 번째 배열의 일부 요소가 두 번째 배열에 없다는 의미입니다.

예제 코드

const arr1 = [34, 78, 89];
const arr2 = [78, 67, 34, 99, 56, 89];

const multipleIncludes = (first, second) => {
  const indexArray = first.map(el => {
    return second.indexOf(el);
  });
  return indexArray.indexOf(-1) === -1;
}

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

실행 결과

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

true

코드 설명

multipleIncludes 함수는 먼저 map()을 사용해 첫 번째 배열의 각 요소가 두 번째 배열에서 차지하는 인덱스 값들로 이루어진 새로운 배열을 생성합니다. 위 예제에서 indexArray는 [2, 0, 5]가 되며, 세 요소 모두 두 번째 배열에 존재한다는 것을 알 수 있습니다. 이후 이 배열에 -1(찾지 못한 경우)이 없는지 검사하여 최종적으로 true 또는 false를 반환합니다.

더 간결한 대안: every()와 includes() 조합

ES2016(ES7) 이상 환경에서는 every() 메서드와 includes() 메서드를 조합하면 같은 로직을 한 줄로 더 읽기 쉽게 작성할 수 있습니다.

const multipleIncludes = (first, second) =>
  first.every(el => second.includes(el));

console.log(multipleIncludes(arr1, arr2)); // true

every()는 배열의 모든 요소가 주어진 조건을 만족할 때만 true를 반환하므로, "모든 요소가 포함되어 있는가"라는 문제의 의도를 코드에 그대로 드러낼 수 있습니다. 상황에 맞게 두 방법 중 편한 방식을 선택해 사용하시면 됩니다.