JavaScript에서 두 배열의 차이, 즉 어느 한쪽에만 존재하는 요소를 구하려면 split(), indexOf(), sort() 같은 메서드를 조합하면 됩니다. 기본 원리는 간단합니다. 한 배열의 각 요소가 다른 배열에 있는지 검사하고, 양쪽에 공통으로 존재하지 않는 요소만 새 배열에 모으는 것입니다.
기본 예제
다음 코드는 두 숫자 배열을 비교해 서로 다른 요소만 추출합니다.
<html>
<head>
<title>JavaScript Dates</title>
</head>
<body>
<script>
function arrDifference (arr1, arr2) {
var arr = [];
arr1 = arr1.toString().split(',').map(Number);
arr2 = arr2.toString().split(',').map(Number);
// for array1
for (var i in arr1) {
if(arr2.indexOf(arr1[i]) === -1)
arr.push(arr1[i]);
}
// for array2
for(i in arr2) {
if(arr1.indexOf(arr2[i]) === -1)
arr.push(arr2[i]);
}
return arr.sort((x,y) => x-y);
}
document.write(arrDifference([50, 40, 90], [70, 50, 99, 40, 90]));
</script>
</body>
</html>
실행 결과
70,99
[50, 40, 90]과 [70, 50, 99, 40, 90]을 비교하면, 첫 번째 배열에는 없고 두 번째 배열에만 있는 70과 99가 결과로 출력됩니다.
코드 동작 원리
- 배열 정규화:
toString().split(',').map(Number)를 사용해 입력 배열을 안전하게 숫자 배열로 변환합니다. - 첫 번째 배열 검사:
indexOf()로 arr1의 각 요소가 arr2에 존재하는지 확인하고, 존재하지 않으면(-1이면) 결과 배열에 추가합니다. - 두 번째 배열 검사: 반대로 arr2의 요소 중 arr1에 없는 것도 결과 배열에 추가합니다.
- 정렬 후 반환:
sort((x, y) => x - y)로 오름차순 정렬한 뒤 최종 결과를 반환합니다.
filter()로 더 간결하게 작성하기
모던 JavaScript에서는 filter()와 includes()를 활용하면 훨씬 짧고 가독성 좋은 코드로 동일한 결과를 얻을 수 있습니다.
function arrDifference(arr1, arr2) {
return [
...arr1.filter(item => !arr2.includes(item)),
...arr2.filter(item => !arr1.includes(item))
].sort((x, y) => x - y);
}
console.log(arrDifference([50, 40, 90], [70, 50, 99, 40, 90]));
// 출력: [70, 99]
두 방식 모두 대칭 차집합(symmetric difference), 즉 두 배열 중 한쪽에만 있는 요소를 반환한다는 점을 기억하세요. 문자열 배열을 다룬다면 map(Number) 변환 과정을 생략하고 바로 비교하면 됩니다.