📚
EPISODE 04
push/pop · map · filter · find · sort · spread
배열
배열 생성·접근·수정 메서드(push, pop, shift, unshift, splice)와 강력한 고차함수(forEach, map, filter, find, includes, sort), 그리고 전개 연산자를 익힙니다.
JavaScript배열고차함수
소요 시간
⏱ 30~60분
난이도
📊 초보~중급
선수 조건
🎯 js-03
결과물
함수형 스타일로 데이터를 변환·필터링·정렬
이 강의에서 배우는 것
- 1push/pop/shift/unshift/splice를 적절히 사용한다
- 2map으로 변환, filter로 추출, find로 검색한다
- 3sort에 비교 함수를 전달해 숫자 정렬을 한다
- 4...로 배열을 복사·합치기·확장한다
1. 배열 생성과 접근
javascript
const fruits = ["사과", "바나나", "딸기", "포도"];
console.log(fruits[0]); // "사과"
console.log(fruits[fruits.length - 1]); // 마지막
const mixed = [1, "hello", true, null, { name: "홍길동" }];2. 배열 수정 메서드
javascript
const arr = ["A", "B", "C"];
arr.push("D"); // ["A","B","C","D"], 새 length 반환
const last = arr.pop(); // "D", arr = ["A","B","C"]
arr.unshift("Z"); // ["Z","A","B","C"]
const first = arr.shift(); // "Z"
arr.splice(1, 1); // ["A","C"] 인덱스 1에서 1개 제거
arr.splice(1, 0, "B"); // ["A","B","C"] 인덱스 1에 삽입
arr.splice(1, 1, "X", "Y"); // ["A","X","Y","C"] 교체3. 고차 함수
forEach — 각 요소 작업 (반환 X)
javascript
[1,2,3].forEach((n, i) => console.log(`${i}: ${n}`));map — 변환된 새 배열
javascript
const doubled = [1,2,3].map(n => n * 2); // [2,4,6]
const upper = ["alice","bob"].map(n => n.toUpperCase());filter — 조건 만족 요소만
javascript
const evens = [1,2,3,4,5,6].filter(n => n % 2 === 0); // [2,4,6]
const adults = users.filter(u => u.age >= 19);find — 첫 번째 만족 요소
javascript
const user = users.find(u => u.id === 2);includes
javascript
["사과","바나나"].includes("바나나"); // truesort — 원본 변경
javascript
["Charlie","Alice","Bob"].sort();
// 숫자 정렬은 비교 함수 필수!
[10, 1, 100, 3].sort((a, b) => a - b); // [1, 3, 10, 100]
[10, 1, 100, 3].sort((a, b) => b - a); // 내림차순4. 전개 연산자 (Spread)
javascript
// 복사 (원본과 독립)
const original = [1,2,3];
const copy = [...original];
// 합치기
const merged = [...[1,2,3], ...[4,5,6]]; // [1,2,3,4,5,6]
// 추가
const withExtra = [0, ...original, 4]; // [0,1,2,3,4]