Published On

JavaScript 배열 메서드: reduce()와 sort() 분석


1. reduce() 메서드

reduce()는 배열의 요소를 누적하여 단일 값으로 줄이는 메서드입니다. 배열의 합계, 곱셈, 객체 변환 등 다양한 누적 작업을 수행할 수 있습니다.

기본 사용법

const arr = [1, 2, 3, 4];
const sum = arr.reduce((acc, value) => acc + value, 0);
console.log(sum); // 10

- `acc`: 누적값(Accumulator)입니다.
- `value`: 현재 순회 중인 배열의 요소입니다.
- `0`: 초기값입니다.

reduce()의 순회 과정

  1. 첫 번째 순회: acc = 0, value = 1 → acc + value = 1
  2. 두 번째 순회: acc = 1, value = 2 → acc + value = 3
  3. 세 번째 순회: acc = 3, value = 3 → acc + value = 6
  4. 네 번째 순회: acc = 6, value = 4 → acc + value = 10

다양한 활용 예제

배열의 곱 계산

const arr = [1, 2, 3, 4];
const product = arr.reduce((acc, value) => acc * value, 1);
console.log(product); // 24

객체 배열의 총합 계산

const items = [
  { name: "Apple", price: 3 },
  { name: "Banana", price: 2 },
  { name: "Orange", price: 4 },
];
const totalPrice = items.reduce((acc, item) => acc + item.price, 0);
console.log(totalPrice); // 9

중첩된 배열 평탄화

const nested = [[1, 2], [3, 4], [5]];
const flattened = nested.reduce((acc, value) => acc.concat(value), []);
console.log(flattened); // [1, 2, 3, 4, 5]

2. sort() 메서드

sort()는 배열을 정렬하는 메서드입니다. 기본적으로 문자열 기반으로 정렬되기 때문에, 숫자나 객체 배열을 정렬할 때는 비교 함수를 제공해야 합니다.

기본 사용법

const fruits = ["apple", "orange", "banana"];
fruits.sort();
console.log(fruits); // ['apple', 'banana', 'orange']

숫자 정렬 문제

const numbers = [10, 2, 30, 1];
numbers.sort();
console.log(numbers); // [1, 10, 2, 30] (문자열 기준 정렬)

비교 함수로 정렬하기

숫자 오름차순 정렬

const numbers = [10, 2, 30, 1];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 2, 10, 30]

숫자 내림차순 정렬

numbers.sort((a, b) => b - a);
console.log(numbers); // [30, 10, 2, 1]

문자열 정렬 (대소문자 무시)

const words = ["Banana", "apple", "Orange"];
words.sort((a, b) => a.localeCompare(b));
console.log(words); // ['apple', 'Banana', 'Orange']

객체 배열 정렬

예제: 나이 순으로 정렬하기

const people = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 20 },
];
people.sort((a, b) => a.age - b.age);
console.log(people);
// [
// { name: 'Charlie', age: 20 },
// { name: 'Alice', age: 25 },
// { name: 'Bob', age: 30 }
// ]

3. 원본 배열 유지하며 정렬하기

sort()원본 배열을 변경하기 때문에, 원본 배열을 유지하려면 복사본을 정렬해야 합니다.

slice()를 사용한 정렬

const original = [3, 1, 4, 2];
const sorted = original.slice().sort((a, b) => a - b);
console.log(original); // [3, 1, 4, 2]
console.log(sorted); // [1, 2, 3, 4]

스프레드 연산자를 사용한 정렬

const original = [3, 1, 4, 2];
const sorted = [...original].sort((a, b) => a - b);
console.log(original); // [3, 1, 4, 2]
console.log(sorted); // [1, 2, 3, 4]

4. 결론

reduce()sort()는 각각 누적 작업정렬 작업을 수행하는 데 매우 유용한 메서드입니다.

  • reduce(): 배열의 합계, 곱셈, 객체 변환 등 다양한 누적 작업을 처리합니다.
  • sort(): 배열을 문자열, 숫자 또는 객체의 속성을 기준으로 정렬합니다.

이 두 메서드를 잘 활용하면 배열의 데이터 처리와 조작이 훨씬 더 강력해집니다.

  • reduce()를 사용하면 복잡한 누적 로직을 간단하게 구현할 수 있으며,
  • sort()를 통해 배열을 손쉽게 정렬할 수 있습니다.