배열이 두 개뿐이라면 filter나 includes 같은 기본적인 논리 연산만으로도 공통 요소를 비교적 쉽게 찾을 수 있습니다. 그러나 배열이 세 개, 네 개로 늘어나면 코드가 길어지고 복잡해져 관리하기 어려워집니다. 이럴 때 유용하게 사용할 수 있는 것이 자바스크립트 라이브러리인 underscore.js에서 제공하는 _.intersection() 메서드입니다.
_.intersection()은 전달받은 모든 배열의 요소를 하나씩 검사하여 공통 값만 골라 결과로 반환합니다. 단, 배열 그룹 중 어느 하나라도 공통 값이 하나도 없다면 아무런 결과도 출력되지 않습니다.
문법
_.intersection( array1, array2, .... );
이 메서드는 두 개 이상의 배열을 인자로 받으며, 모든 배열에 걸쳐 공통으로 존재하는 값들을 찾아 하나의 배열 형태로 반환합니다.
기본 사용 예제
다음 예제에서 _.intersection() 메서드는 세 개의 배열에 포함된 모든 값을 꼼꼼히 검사한 뒤, 세 배열 모두에 존재하는 공통 값만 출력합니다.
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js">
</script>
<script type="text/javascript">
document.write(_.intersection([1, 2, 3, 4, 5],
[1, 2, 3, 4, 5, 6],
[1, 2, 3, 4, 5, 6, 7, 8]));
</script>
</body>
</html>
출력 결과
1,2,3,4,5
세 배열 모두 1부터 5까지의 값을 공유하고 있으므로 위와 같은 결과가 출력됩니다.
_.intersection()은 숫자나 문자열뿐만 아니라 null, undefined처럼 false로 평가되는 falsy 값도 문제없이 처리할 수 있다는 점이 특징입니다.
falsy 값을 포함한 예제
다음 예제에서는 숫자와 함께 falsy 성격의 값들도 함께 전달했습니다. _.intersection() 메서드는 이러한 값들까지 포함해 모든 요소를 검사한 후 공통 값만 출력합니다.
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js">
</script>
<script type="text/javascript">
document.write(_.intersection([1, 2, 3, "null", "undefined"],
[1, 2, 3, "null", "undefined", "void"],
[1, "null", "void"]));
</script>
</body>
</html>
출력 결과
1,null
세 배열 모두 값 1과 문자열 "null"을 포함하고 있으므로 이 두 값만 결과로 반환됩니다.
정리
배열의 수가 많아질수록 직접 비교 로직을 작성하는 것은 번거롭고 오류가 발생하기 쉽습니다. _.intersection() 메서드를 활용하면 한 줄의 코드로 여러 배열의 공통 요소를 손쉽게 구할 수 있으며, 숫자·문자열·falsy 값 등 다양한 데이터 타입도 안정적으로 처리할 수 있습니다.