자바스크립트 실무 유틸 함수 시리즈 20 - 배열 비교 및 동기화를 위한 유틸

이번 20편에서는 배열 간의 차이를 비교하고 동기화할 때 유용한 자바스크립트 유틸 함수들을 정리합니다. 데이터 변경 사항 추적, 차이점 필터링, 병합 등의 작업을 쉽게 수행할 수 있습니다.

---

✅ 1. arrayDifference (두 배열 간 차이값 구하기)

📌 A 배열에는 있고 B 배열에는 없는 항목 반환

function arrayDifference(a, b) {
  return a.filter(item => !b.includes(item));
}

📌 활용 예시

(예: 삭제된 항목 목록 추출)

const before = ['a', 'b', 'c'];
const after = ['a', 'c'];
const removed = arrayDifference(before, after); // ['b']

---

✅ 2. arrayIntersection (공통 요소 추출)

📌 두 배열에 모두 존재하는 항목 반환

function arrayIntersection(a, b) {
  return a.filter(item => b.includes(item));
}

📌 활용 예시

(예: 선택 항목과 권한 목록의 교집합 구하기)

const selected = ['read', 'write'];
const allowed = ['read', 'delete'];
const valid = arrayIntersection(selected, allowed); // ['read']

---

✅ 3. arrayEquals (배열 내용 동일 여부 확인)

📌 배열의 순서와 값 모두 비교

function arrayEquals(a, b) {
  return a.length === b.length && a.every((val, index) => val === b[index]);
}

📌 활용 예시

(예: 이전 상태와 현재 상태 비교)

const isSame = arrayEquals([1, 2], [1, 2]); // true

---

✅ 4. arraySymmetricDiff (배타적 차집합 구하기)

📌 A 또는 B에만 존재하는 요소 반환

function arraySymmetricDiff(a, b) {
  return [...a.filter(x => !b.includes(x)), ...b.filter(x => !a.includes(x))];
}

📌 활용 예시

(예: 양쪽에서 추가되거나 삭제된 값 모두 보기)

arraySymmetricDiff(['a', 'b'], ['b', 'c']); // ['a', 'c']

---

✅ 5. syncArrays (배열 병합 및 중복 제거)

📌 두 배열을 병합하고 중복 제거하여 새로운 배열 반환

function syncArrays(a, b) {
  return Array.from(new Set([...a, ...b]));
}

📌 활용 예시

(예: 기존 선택값과 새로 추가된 값 병합)

syncArrays(['a', 'b'], ['b', 'c']); // ['a', 'b', 'c']

---

✅ 결론

배열 비교 및 동기화는 데이터 업데이트와 상태 관리에서 매우 중요한 부분입니다. 이번 시리즈에서 다룬 유틸 함수들을 사용하면 복잡한 배열 처리도 간결하고 안정적으로 구현할 수 있습니다.