[Javascript] reduce 함수 직접 만들어보기

JavaScript의 `reduce` 함수는 배열의 모든 요소를 하나의 값으로 줄이는(reduce) 함수다. `reduce` 함수는 콜백 함수를 사용해 배열 요소를 하나의 값으로 줄여 반환합니다.

 

mdn에서 다음과 같이 reduce 함수의 구문을 보여준다.

array.reduce(callback[, initialValue]);

 

배열 요소 처리 함수 `callback`,

초기값(선택) `intialValue`

 

그리고 이 callback은 인자에 순서대로 `acc(누적값)`, `cur(현재 요소)`, `idx(인덱스)`를 갖는다.

 

요런 특징을 가진 `reduce` 함수를 배열의 prototype 메소드가 아닌 일반 함수로 만들어보자.

const reduce = (arr, f, initialValue) => {
	if (!Array.isArray(arr)) return initialValue;
    
	let i = 0;
	let ret = initialValue ?? ((i += 1), arr[0]);

	for (; i < arr.length; i += 1) {
		ret = f(ret, arr[i], i);
	}

	return ret;
};

 

이런 `reduce` 함수를 단순히 합계 계산하는 것에만 사용하지 않고, `compose`와 같이 함수 배열을 `reduce`해 순차적인 함수 실행을 보장할 수 있다. 예를 들어, 햄버거를 만든다면 패티를 굽고, 구워진 패티 위에 치즈를 올리고(acc), 치즈 위에 양상추를 올리고(acc), 그 위에 빵을 올려(acc) 최종 햄버거를 완성하는 것처럼 말이다.

 

어떤 함수의 결과를 다음 함수의 인자로 연쇄적으로 넣어야 할 때, `reduce` 함수를 적용해볼 수 있다.

const compose = (initialValue) => (...fns) => {
	return fns.reduce((acc, fn) => fn(acc) , [initialValue])
}