Programing/javascript

자바스크립트 실무 유틸 함수 시리즈 8 - 배열 고급 조작

Dongkkase 2025. 4. 29. 17:47
반응형

이번 8편에서는 배열을 고급스럽게 조작할 때 유용한 실무형 유틸 함수들을 정리합니다. 데이터 필터링, 변형, 탐색, 구조 변경 등을 빠르고 깔끔하게 처리할 수 있습니다.


✅ 1. compact (Falsy 값 제거)

📌 배열에서 false, 0, '', null, undefined, NaN 제거

function compact(array) {
  return array.filter(Boolean);
}

📌 활용 예시

  • 유효 데이터만 남기기
  • API 응답 정리

✅ 2. difference (배열 차집합 구하기)

📌 A에는 있지만 B에는 없는 요소 찾기

function difference(arr1, arr2) {
  const set2 = new Set(arr2);
  return arr1.filter(x => !set2.has(x));
}

📌 활용 예시

  • 선택되지 않은 항목 찾기
  • 삭제 대상 식별

✅ 3. uniqueBy (기준에 따른 중복 제거)

📌 특정 속성 기준 유일 요소 추출

function uniqueBy(array, keyFn) {
  const seen = new Set();
  return array.filter(item => {
    const key = keyFn(item);
    if (seen.has(key)) return false;
    seen.add(key);
    return true;
  });
}

📌 활용 예시

  • ID 기준 유일 데이터 유지
  • 카테고리별 대표 데이터 추출

✅ 4. shuffle (배열 무작위 섞기)

📌 Fisher-Yates 알고리즘

function shuffle(array) {
  const arr = array.slice();
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
}

📌 활용 예시

  • 퀴즈 문제 무작위 출제
  • 추천 목록 섞기

✅ 5. partition (배열 분할)

📌 조건에 따라 배열 분리

function partition(array, predicate) {
  return array.reduce((acc, item) => {
    acc[predicate(item) ? 0 : 1].push(item);
    return acc;
  }, [[], []]);
}

📌 활용 예시

  • 승인/미승인 데이터 분리
  • 조건 충족 여부에 따른 리스트 나누기

✅ 결론

배열은 자바스크립트 데이터 처리의 중심입니다. 이번 시리즈에서 다룬 고급 배열 조작 함수들을 적극 활용하면 복잡한 데이터 핸들링을 훨씬 효율적이고 안정적으로 수행할 수 있습니다.

반응형