Programing/javascript

자바스크립트 실무 유틸 함수 시리즈 3

2025. 4. 29. 12:35
반응형

이전 시리즈에 이어 이번 3편에서는 배열과 객체를 다룰 때 유용한 고급 유틸 함수들을 정리합니다. 데이터 처리에서 반복되는 패턴을 간결하고 효율적으로 해결할 수 있는 핵심 함수들입니다.


✅ 1. chunk (배열 분할)

📌 배열을 지정된 크기만큼 나누기

function chunk(array, size) {
  const result = [];
  for (let i = 0; i < array.length; i += size) {
    result.push(array.slice(i, i + size));
  }
  return result;
}

📌 활용 예시

  • 대량 데이터 페이지네이션 처리
  • 이미지 갤러리 그룹핑

✅ 2. groupBy (배열 그룹핑)

📌 특정 키로 그룹화

function groupBy(array, key) {
  return array.reduce((acc, item) => {
    const group = item[key];
    acc[group] = acc[group] || [];
    acc[group].push(item);
    return acc;
  }, {});
}

📌 활용 예시

  • 카테고리별 상품 그룹핑
  • 날짜별 이벤트 정리

✅ 3. flatten (배열 평탄화)

📌 중첩 배열을 1차원으로 변환

function flatten(arr) {
  return arr.reduce((flat, toFlatten) => flat.concat(Array.isArray(toFlatten) ? flatten(toFlatten) : toFlatten), []);
}

📌 활용 예시

  • 중첩 리스트 통합
  • API 응답 데이터 정리

✅ 4. pick (객체에서 특정 키만 추출)

📌 일부 속성만 추출

function pick(obj, keys) {
  return keys.reduce((acc, key) => {
    if (obj && Object.prototype.hasOwnProperty.call(obj, key)) {
      acc[key] = obj[key];
    }
    return acc;
  }, {});
}

📌 활용 예시

  • 사용자 개인정보 제한적 추출
  • API 전송 데이터 필터링

✅ 5. omit (객체에서 특정 키 제외)

📌 일부 속성 제외

function omit(obj, keys) {
  return Object.keys(obj).reduce((acc, key) => {
    if (!keys.includes(key)) {
      acc[key] = obj[key];
    }
    return acc;
  }, {});
}

📌 활용 예시

  • 불필요한 민감 정보 제거
  • 뷰(View) 최적화 데이터 전송

✅ 결론

배열과 객체는 자바스크립트 데이터 처리의 핵심입니다. 이번 시리즈에서 다룬 고급 유틸 함수들은 실무에서 반복적으로 등장하는 문제를 빠르고 깔끔하게 해결할 수 있습니다.

 

반응형

'Programing > javascript' 카테고리의 다른 글

자바스크립트 실무 유틸 함수 시리즈 7 - 문자열 정규 표현식  (0) 2025.04.29
자바스크립트 실무 유틸 함수 시리즈 6 - 시간과 날짜  (0) 2025.04.29
자바스크립트 실무 유틸 함수 시리즈 5 - 숫자와 통계 처리  (0) 2025.04.29
자바스크립트 실무 유틸 함수 시리즈 4 - 문자열 조작  (1) 2025.04.29
자바스크립트 실무 유틸 함수 시리즈 2  (0) 2025.04.29
자바스크립트 실무 유틸 함수 시리즈  (0) 2025.04.29
DOM 조작 vs Virtual DOM (React 비교 포함) 정리  (0) 2025.04.29
JSON.stringify vs JSON.parse 제대로 이해하기  (0) 2025.04.29
'Programing/javascript' 카테고리의 다른 글
  • 자바스크립트 실무 유틸 함수 시리즈 5 - 숫자와 통계 처리
  • 자바스크립트 실무 유틸 함수 시리즈 4 - 문자열 조작
  • 자바스크립트 실무 유틸 함수 시리즈 2
  • 자바스크립트 실무 유틸 함수 시리즈
Dongkkase
Dongkkase
개발자로 일하면서 부딪히는 문제풀이가 누군가에게 도움이 되길 바라며
    반응형
  • Dongkkase
    정집사의 개발로그
    Dongkkase
  • 전체
    오늘
    어제
    • All (478)
      • 금융 (61)
      • Programing (295)
        • Algorithm (39)
        • API (2)
        • javascript (122)
        • CSS (8)
        • HTML (10)
        • PHP (15)
        • JAVA (27)
        • JSP (17)
        • JSP 예제 (1)
        • IOS (1)
        • Android (1)
        • Sencha Touche (1)
        • bat file, cmd (0)
        • 디버깅 (2)
        • SQL (21)
        • MS-SQL (1)
        • MySQL (13)
        • 보안 (5)
      • Server (14)
        • Docker (1)
        • Windows (9)
        • Linux (3)
        • jeus (1)
      • Database (6)
      • IT 일반 (15)
      • 리뷰 (38)
        • Book (17)
        • 제품 (2)
        • 영화 소개 (11)
        • 음악 소개 (7)
      • 잡생각 (36)
        • 회고 (3)
        • 컬럼 (4)
        • 자료실 (6)
        • 낙서장 (12)
        • 위시리스트 (2)
        • WOW (1)
        • 덕 (1)
  • 인기 글

  • 최근 댓글

  • 태그

    자바
    SQL
    jsp
    JavaScript
    디자인패턴
    블로그
    위시리스트
    It
    IT 관련
    자바스크립트유틸
    php
    js패턴
    기초
    iT's MY LiFE
    사고 싶은 책
    읽고 싶은 책
    IT·컴퓨터
    IT블로그
    Java
    자바스크립트
Dongkkase
자바스크립트 실무 유틸 함수 시리즈 3
상단으로

티스토리툴바