[심화] 03. 배열 메서드·구조 분해 할당

JavaScript 심화

배열 메서드·구조 분해 할당: 반복문에서 ‘의도’로 이동하기

map/filter/reduce, 정렬 함정, 구조 분해 할당의 핵심 사용 패턴을 정리합니다.

형태 요약노트 대상 심화 포커스 배열/데이터 가공

그림 1. 배열 메서드 체이닝(데이터 흐름)

그림 2. 분해/모으기/펼치기 치트시트

배열 메서드 1: map / filter / find / some / every

중급에서 배열을 다루는 핵심은 반복문을 ‘의도’로 바꾸는 것입니다. 즉, “돌면서 뭘 할지”보다 “필터링/변환/검색/집계”처럼 목적이 드러나는 코드가 좋아집니다.

• map: 원소를 변환해 새 배열을 만듭니다.
• filter: 조건을 만족하는 원소만 남깁니다.
• find: 조건을 만족하는 ‘첫’ 원소를 찾습니다(없으면 undefined).
• some / every: 조건 만족 여부를 boolean으로 확인합니다.

const users = [{id:1, active:true}, {id:2, active:false}];

const ids = users.map(u => u.id);                 // [1,2]
const actives = users.filter(u => u.active);      // [{id:1,...}]
const first = users.find(u => u.active);          // {id:1,...}
const hasActive = users.some(u => u.active);      // true

배열 메서드 2: reduce / sort / join

reduce는 조금만 익숙해지면 정말 강력합니다. 배열을 숫자 합계, 객체 맵, 문자열 등 어떤 형태로든 ‘접어’ 만들 수 있습니다.

const nums = [1,2,3];
const sum = nums.reduce((acc, n) => acc + n, 0); // 6

sort 함정
기본 sort()는 문자열 기준으로 정렬되기 때문에, 숫자 정렬에는 비교 함수를 넣어주셔야 합니다.

[10, 2, 3].sort();            // [10, 2, 3] (문자열 정렬)
[10, 2, 3].sort((a,b)=>a-b);  // [2, 3, 10]

Destructuring: 꺼내쓰기 + 기본값 + 이름 바꾸기

구조 분해 할당은 ‘객체/배열에서 필요한 값만 뽑아 쓰는’ 문법입니다. API 응답 처리나 옵션 기본값 설정에서 특히 자주 사용됩니다.

const user = { id: 1, name: 'Soo', role: 'admin' };

const { id, name: userName, missing = 'N/A' } = user;
console.log(id, userName, missing);

• 기본값(=)과 이름 바꾸기(name: userName)를 함께 기억해 두시면 좋습니다.
• 중첩 구조도 가능하지만, 과하면 가독성이 떨어질 수 있으니 적당히 사용하시는 편이 안전합니다.

참고 링크

• MDN: Array
• MDN: Array.prototype.map
• MDN: Array.prototype.reduce
• MDN: 구조 분해 할당