반응형
이전 시리즈에 이어 이번 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 |