이번 글에서는 Array.prototype.sort() 메서드를 사용하지 않고, 대신 Array.prototype.reduce() 메서드만으로 숫자 배열을 정렬하는 자바스크립트 함수를 만들어 보겠습니다.
reduce()는 보통 배열을 하나의 값으로 축소할 때 사용되지만, 누산기에 요소를 하나씩 알맞은 위치에 삽입하는 '삽입 정렬' 방식으로 응용하면 정렬 기능도 손쉽게 구현할 수 있습니다.
예제 배열
다음 배열을 오름차순으로 정렬해 보겠습니다.
const arr = [4, 56, 5, 3, 34, 37, 89, 57, 98];
예제 코드
아래 코드는 sort() 메서드도, 일반적인 반복문(for, while 외부 루프)도 사용하지 않고 ES6의 reduce() 함수만으로 배열을 정렬합니다.
// sort() 메서드 없이
// 일반적인 반복문 없이
// ES6의 reduce() 함수만으로 배열을 정렬합니다.
const arr = [4, 56, 5, 3, 34, 37, 89, 57, 98];
const sortWithReduce = arr => {
return arr.reduce((acc, val) => {
// 현재 값(val)이 들어갈 올바른 위치를 찾습니다.
let ind = 0;
while (ind < acc.length && val > acc[ind]) {
ind++;
}
// 찾은 위치에 값을 삽입합니다.
acc.splice(ind, 0, val);
return acc;
}, []);
};
console.log(sortWithReduce(arr));동작 원리
- 초기값 설정: reduce()에 초기값으로 빈 배열([])을 전달해 누산기를 시작합니다.
- 위치 탐색: 각 단계에서 while 루프가 누산기(acc) 내부를 훑으며 현재 값보다 작은 요소들을 건너뛰고 삽입할 인덱스를 결정합니다.
- 요소 삽입: splice(ind, 0, val)를 호출해 해당 위치에 값을 삽입한 뒤 누산기를 반환합니다.
- 완료: 모든 요소가 처리되면 누산기에는 정렬된 배열이 담기게 됩니다.
출력 결과
콘솔에는 다음과 같이 오름차순으로 정렬된 배열이 출력됩니다.
[ 3, 4, 5, 34, 37, 56, 57, 89, 98 ]
이처럼 reduce()를 활용하면 별도의 정렬 메서드나 반복문 없이도 함수형 프로그래밍 스타일로 배열을 정렬할 수 있습니다. 다만 실무에서는 성능과 가독성 측면에서 내장 sort() 메서드를 사용하는 것이 일반적이라는 점을 참고하세요.