- 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()의 순회 과정
- 첫 번째 순회: acc = 0, value = 1 → acc + value = 1
- 두 번째 순회: acc = 1, value = 2 → acc + value = 3
- 세 번째 순회: acc = 3, value = 3 → acc + value = 6
- 네 번째 순회: 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()
를 통해 배열을 손쉽게 정렬할 수 있습니다.
연관된 포스트 구경가기
1. AJAX란 무엇인가?2. 자바스크립트의 ES6 주요 변경 사항3. 이벤트 위임(Event Delegation)4. 실행 컨텍스트(Execution Context)5. 자바스크립트의 new 연산자 동작 방식6. JavaScript의 연산자 비교7. 엄격 모드(Strict Mode)8. JavaScript의 프로토타입 (Prototype) 이해하기9. Javascript에서 URL 및 URLSearchParams 사용10. Fetch web API11. 타입스크립트 주요 타입 정리12. import vs require13. JavaScript의 비동기 처리14. HTML SVG태그 분석15. JavaScript의 this 바인딩 완벽 정리16. JavaScript 배열 메서드: reduce()와 sort() 분석17. JavaScript 배열 메서드와 고차 함수 총정리
간략히