배열 메서드 ②

🎯 학습 목표

이 강을 마치면 다음을 할 수 있습니다.

• reduce로 배열을 하나의 값으로 집계(합계, 평균, 그룹화 등)할 수 있습니다.
• sort로 배열을 올바르게 정렬할 수 있습니다(비교 함수 필수 이해).
• some·every로 배열 요소의 조건 충족 여부를 검사할 수 있습니다.
• includes·indexOf로 배열에서 특정 값의 포함 여부와 위치를 확인할 수 있습니다.

⚙️ reduce — 배열을 하나의 값으로

이 섹션에서는 배열의 모든 요소를 순회하며 하나의 결과값으로 누적하는 reduce를 살펴보겠습니다.

reduce(callback, initialValue)는 배열 메서드 중 가장 강력하고 유연합니다. 배열의 모든 요소를 왼쪽에서 오른쪽으로 순회하며 콜백을 실행하고, 이전 실행의 결과를 다음 실행으로 전달해 최종 하나의 값을 만들어냅니다. 합계, 평균, 최댓값, 객체로 변환 등 거의 모든 집계 작업에 사용할 수 있습니다.

// 기본 구조: reduce(콜백(누적값, 현재값, 인덱스, 배열), 초기값)
const numbers = [1, 2, 3, 4, 5];

// 합계
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum);  // 15

// 실행 과정:
// 초기: acc=0,  cur=1  → 반환 1
// 2회: acc=1,  cur=2  → 반환 3
// 3회: acc=3,  cur=3  → 반환 6
// 4회: acc=6,  cur=4  → 반환 10
// 5회: acc=10, cur=5  → 반환 15

// 최댓값
const max = numbers.reduce((acc, cur) => (cur > acc ? cur : acc), numbers[0]);
console.log(max);  // 5

// 평균
const avg = numbers.reduce((acc, cur, idx, arr) => {
  acc += cur;
  if (idx === arr.length - 1) return acc / arr.length;  // 마지막 요소에서 나눔
  return acc;
}, 0);
console.log(avg);  // 3

콜백의 첫 번째 인수 누적값(accumulator, acc)은 이전 콜백의 반환값입니다. 두 번째 인수 현재값(current, cur)은 지금 처리 중인 요소입니다. reduce의 두 번째 인수로 전달하는 초기값(initialValue)은 첫 번째 콜백 실행 때의 acc 값입니다. 초기값을 생략하면 배열의 첫 번째 요소가 초기 acc가 되는데, 이 경우 빈 배열에서 오류가 발생하므로 항상 명시하는 것이 안전합니다.

// 객체 배열 집계
const cart = [
  { name: "노트북", price: 1200000, qty: 1 },
  { name: "마우스", price: 35000,   qty: 2 },
  { name: "키보드", price: 85000,   qty: 1 }
];

const totalPrice = cart.reduce((acc, item) => acc + item.price * item.qty, 0);
console.log(totalPrice.toLocaleString());  // "1,355,000"

// 배열을 객체로 변환 — reduce의 강력한 활용
const words = ["apple", "banana", "cherry", "avocado", "blueberry"];

// 첫 글자별로 그룹화
const grouped = words.reduce((acc, word) => {
  const letter = word[0];  // 첫 글자
  if (!acc[letter]) acc[letter] = [];  // 없으면 빈 배열 생성
  acc[letter].push(word);
  return acc;
}, {});

console.log(grouped);
// { a: ["apple", "avocado"], b: ["banana", "blueberry"], c: ["cherry"] }

reduce에서 초기값을 빈 객체 {}로 시작하면 배열을 객체로 변환하는 강력한 패턴을 구현할 수 있습니다. 데이터를 카테고리별로 분류하거나, ID를 키로 한 룩업 테이블을 만드는 데 자주 사용됩니다.

🔀 sort — 배열 정렬

이 섹션에서는 배열을 원하는 기준으로 정렬하는 sort와 비교 함수 사용법을 살펴보겠습니다.

sort(compareFunction)은 배열을 정렬합니다. 중요한 주의사항이 있습니다. sort()는 원본 배열을 직접 변경합니다. 또한 비교 함수 없이 사용하면 모든 요소를 문자열로 변환해 정렬하므로, 숫자 정렬에서 예상치 못한 결과가 나옵니다.

// 위험! 기본 sort는 숫자를 문자열로 정렬
const nums = [10, 2, 30, 1, 20];
nums.sort();
console.log(nums);  // [1, 10, 2, 20, 30] ← 틀린 결과!
// "10"이 "2"보다 문자적으로 먼저 오기 때문

// 올바른 숫자 오름차순 정렬
const nums2 = [10, 2, 30, 1, 20];
nums2.sort((a, b) => a - b);
console.log(nums2);  // [1, 2, 10, 20, 30] ✅

// 내림차순
const nums3 = [10, 2, 30, 1, 20];
nums3.sort((a, b) => b - a);
console.log(nums3);  // [30, 20, 10, 2, 1]

// 문자열 정렬 (알파벳/가나다 순)
const fruits = ["바나나", "사과", "포도", "딸기"];
fruits.sort((a, b) => a.localeCompare(b));
console.log(fruits);  // ["딸기", "바나나", "사과", "포도"]

// 객체 배열 정렬
const users = [
  { name: "홍길동", age: 28 },
  { name: "김철수", age: 24 },
  { name: "이영희", age: 31 }
];

// 나이 오름차순
users.sort((a, b) => a.age - b.age);
console.log(users.map(u => u.name));  // ["김철수", "홍길동", "이영희"]

// 원본 보존하며 정렬하려면 먼저 복사
const sorted = [...users].sort((a, b) => b.age - a.age);  // 내림차순

비교 함수 (a, b) => a - b는 결과가 음수이면 a가 앞으로, 양수이면 b가 앞으로, 0이면 순서 유지입니다. 이 원리만 이해하면 어떤 정렬 기준도 만들 수 있습니다. sort()는 원본을 변경하므로, 원본을 보존해야 하면 [...array].sort()로 먼저 복사하세요.

✅ some · every — 조건 검사

이 섹션에서는 배열 요소가 특정 조건을 얼마나 만족하는지 검사하는 some과 every를 살펴보겠습니다.

some(callback)은 배열 요소 중 하나라도 콜백이 true를 반환하면 true를 반환합니다(OR 조건). every(callback)은 모든 요소가 콜백에서 true를 반환해야 true를 반환합니다(AND 조건). 두 메서드 모두 조건을 만족(또는 불만족)하는 요소를 발견하면 즉시 순회를 멈춥니다.

const scores = [85, 92, 78, 95, 60];

// some: 하나라도 조건 만족?
console.log(scores.some(s => s >= 90));   // true (92, 95가 90 이상)
console.log(scores.some(s => s >= 100));  // false (100 이상 없음)

// every: 모두 조건 만족?
console.log(scores.every(s => s >= 60));  // true (모두 60 이상)
console.log(scores.every(s => s >= 80));  // false (60, 78이 80 미만)

// 실전: 장바구니 검증
const cart = [
  { name: "노트북", price: 1200000, inStock: true },
  { name: "마우스", price: 35000,   inStock: true },
  { name: "키보드", price: 85000,   inStock: false }
];

// 품절 상품이 하나라도 있나?
const hasOutOfStock = cart.some(item => !item.inStock);
console.log(hasOutOfStock);  // true

// 모든 상품이 재고 있나?
const allInStock = cart.every(item => item.inStock);
console.log(allInStock);  // false

if (!allInStock) {
  console.log("품절 상품이 있어 주문할 수 없습니다.");
}

🔎 includes · indexOf — 값 포함 여부

이 섹션에서는 배열에서 특정 값의 포함 여부를 확인하고 위치를 찾는 방법을 살펴보겠습니다.

12강에서 find와 findIndex로 조건 기반 검색을 배웠습니다. 단순히 특정 값이 포함되어 있는지만 확인할 때는 더 간단한 방법이 있습니다.

const fruits = ["사과", "바나나", "포도"];

// includes — 포함 여부 boolean
console.log(fruits.includes("바나나"));  // true
console.log(fruits.includes("딸기"));   // false

// 시작 인덱스 지정
console.log(fruits.includes("사과", 1)); // false (1번 인덱스부터 검색)

// indexOf — 첫 번째 위치 (없으면 -1)
console.log(fruits.indexOf("포도"));   // 2
console.log(fruits.indexOf("딸기"));   // -1

// 실전: 태그 관리
const tags = ["자바스크립트", "리액트", "노드"];
const newTag = "타입스크립트";

if (!tags.includes(newTag)) {
  tags.push(newTag);
}
console.log(tags);  // ["자바스크립트", "리액트", "노드", "타입스크립트"]

// 중복 제거 — Set 활용
const withDupes = [1, 2, 2, 3, 3, 3, 4];
const unique = [...new Set(withDupes)];
console.log(unique);  // [1, 2, 3, 4]

includes는 ===로 비교하므로 객체·배열의 참조 비교에는 사용할 수 없습니다. 객체 배열에서는 find 또는 some을 사용하세요. 중복 제거에 Set을 사용하는 패턴도 알아두세요. Set은 중복을 허용하지 않는 자료 구조이며, 스프레드 연산자로 다시 배열로 변환할 수 있습니다.

📝 핵심 요약

13강에서 배운 내용을 정리해 보겠습니다.

메서드	반환값	핵심 특징
reduce(fn, init)	누적 결과값 하나	합계·집계·변환, 가장 유연한 메서드
sort(fn)	정렬된 원본 배열	원본 변경! 숫자 정렬엔 비교 함수 필수
some(fn)	boolean	하나라도 조건 만족 시 true
every(fn)	boolean	모두 조건 만족해야 true
includes(val)	boolean	값 포함 여부 (=== 비교)
indexOf(val)	인덱스 or -1	첫 번째 위치 (없으면 -1)

다음 강인 14강 — 객체에서는 키-값 쌍으로 데이터를 표현하는 객체 자료 구조를 배웁니다. 속성 접근과 수정, 구조 분해 할당, 스프레드 연산자 활용까지 — 배열과 함께 객체는 자바스크립트 데이터 처리의 양대 축입니다!