map·filter·reduce 등 배열 메서드와 체이닝, 불변성, Set·Map 을 다룬다.
배열과 반복 메서드
배열은 데이터 묶음을 다루는 가장 기본적인 도구입니다. 이번 레슨에서는 반복 메서드를 자유자재로 쓰고, 체이닝과 불변성, 그리고 Set·Map 까지 익힙니다.
학습 목표
map·filter·reduce·forEach를 구분해 사용할 수 있다find·some·every·sort를 활용할 수 있다- 메서드 체이닝으로 변환 파이프라인을 만들 수 있다
- 불변성을 지키며 배열을 다룰 수 있다
Set과Map의 용도를 설명할 수 있다
변환 — map
각 요소를 변환해 같은 길이의 새 배열을 만듭니다.
const nums = [1, 2, 3];
const squared = nums.map((n) => n * n); // → [1, 4, 9]
const labels = nums.map((n) => `#${n}`); // → ['#1', '#2', '#3']
걸러내기 — filter
조건을 통과한 요소만 모읍니다.
const nums = [1, 2, 3, 4, 5, 6];
const evens = nums.filter((n) => n % 2 === 0); // → [2, 4, 6]
누적 — reduce
배열을 하나의 값으로 접습니다.
const nums = [1, 2, 3, 4];
const sum = nums.reduce((acc, n) => acc + n, 0); // → 10
const max = nums.reduce((acc, n) => (n > acc ? n : acc)); // → 4
// 객체로 집계하기
const fruits = ['사과', '사과', '배'];
const count = fruits.reduce((acc, f) => {
acc[f] = (acc[f] ?? 0) + 1;
return acc;
}, {});
console.log(count); // → { 사과: 2, 배: 1 }
순회 — forEach
값을 반환하지 않고 각 요소에 대해 동작만 실행합니다.
['a', 'b'].forEach((item, i) => console.log(i, item));
// → 0 a
// → 1 b
탐색 — find / some / every
const users = [
{ id: 1, active: true },
{ id: 2, active: false },
];
const found = users.find((u) => u.id === 2); // → { id: 2, active: false }
const hasActive = users.some((u) => u.active); // → true
const allActive = users.every((u) => u.active); // → false
| 메서드 | 반환값 |
|---|---|
find | 조건에 맞는 첫 요소 (없으면 undefined) |
some | 하나라도 맞으면 true |
every | 모두 맞으면 true |
정렬 — sort
sort 는 원본을 변경하며, 비교 함수로 순서를 정합니다.
const nums = [10, 1, 5, 2];
const asc = [...nums].sort((a, b) => a - b); // → [1, 2, 5, 10]
const desc = [...nums].sort((a, b) => b - a); // → [10, 5, 2, 1]
⚠️ 주의 — 비교 함수 없이
sort()만 쓰면 문자열로 변환해 정렬합니다.[10, 1, 5]가[1, 10, 5]처럼 되니 숫자는 반드시 비교 함수를 주세요.
체이닝
메서드를 이어 붙여 변환 파이프라인을 만듭니다.
const result = [1, 2, 3, 4, 5, 6]
.filter((n) => n % 2 === 0) // [2, 4, 6]
.map((n) => n * 10) // [20, 40, 60]
.reduce((a, b) => a + b, 0); // → 120
불변성
원본을 바꾸지 않고 새 배열을 만드는 습관이 버그를 줄입니다.
const arr = [1, 2, 3];
// 추가 (push 대신)
const added = [...arr, 4]; // → [1, 2, 3, 4]
// 제거
const removed = arr.filter((n) => n !== 2); // → [1, 3]
// 수정
const updated = arr.map((n) => (n === 2 ? 20 : n)); // → [1, 20, 3]
💡 TIP —
map·filter·slice·concat·스프레드는 새 배열을 만들고,push·splice·sort·reverse는 원본을 바꿉니다.
Set 과 Map
// Set: 중복 없는 값의 집합
const tags = new Set(['js', 'css', 'js']);
console.log(tags.size); // → 2
console.log([...tags]); // → ['js', 'css']
const unique = [...new Set([1, 1, 2, 3])]; // → [1, 2, 3]
// Map: 모든 타입을 키로 쓸 수 있는 키-값 저장소
const scores = new Map();
scores.set('민수', 90);
scores.set('영희', 85);
console.log(scores.get('민수')); // → 90
console.log(scores.has('철수')); // → false
요약
map은 변환,filter는 선별,reduce는 누적,forEach는 순회용이다find·some·every로 배열을 탐색·검증한다sort는 원본을 바꾸고 숫자 정렬엔 비교 함수가 필수다- 메서드 체이닝으로 읽기 좋은 변환 파이프라인을 만든다
- 중복 제거엔
Set, 다양한 키의 저장엔Map을 쓴다
연습문제
- 이름 배열에서 글자 수가 3 이상인 이름만 골라 대문자로 바꾼 새 배열을 만드세요(
filter+map). - 상품 객체 배열
[{name, price}, ...]에서reduce로 총 가격을 구하세요.힌트 —
acc + item.price - 점수 배열을 내림차순으로 정렬하되 원본은 보존하세요.
힌트 —
[...arr].sort((a,b)=>b-a) - 중복이 포함된 배열에서
Set으로 중복을 제거하고, 각 값의 등장 횟수를Map으로 세어 출력하세요.
💡 연습문제 풀이
불러오는 중…
댓글 0
“JavaScript” 강좌에 대한 댓글입니다.