About Reduce

reduce는 이터러블 값을 하나의 값으로 축약해 놓은 함수인데 아래의 코드를 보자.

아래의 값이 있다고 했을 때 아래 리스트를 하나의 다 더해서 하나의 값으로 나타낸다고 할 때,

const nums = [1, 2, 3, 4, 5];

let total = 0;
for (const n of nums) {
	total = total + n;
}
log(total);

즉 특정한 값을 순회하면서 하나의 값으로 누적해 나갈 때 위에 패턴을 사용하게 된다.

이러한 일을 할 때 reduce가 필요하다. 

const reduce = () => {

};

const add = (a, b) => a + b;

log(reduce(add, 0, [1, 2, 3, 4, 5]));

=>

// 15

즉 재귀적으로 받은 보조함수를 실행하면서 하나의 값으로 누적을 해나간다. 즉 reduce의 내부가 함수를 재귀적으로 연속적으로 실행하도록 한다.

log(add(add(add(add(add(0, 1),2),3),4),5));

=>

// 15

즉 reduce는 아래와 같은 로직을 가진 함수이다. 즉 특정 값을([1, 2, 3, 4, 5]) 누적하면서 하나의 값으로 사용하는 함수이다.

const reduce = (f, acc, iter) => {
	for (const a of iter) {
	  acc = f(acc, a);
	}
	return acc;
};

reduce가 아래와 같은 코드로 실행했을 때도 15라는 값을 만들 수 있도록 코드를 작성해본다.

const reduce = (f, acc, iter) => {
	if (!iter) {
		iter = acc[Symbol.iterator]();
		acc = iter.next().value;

	}
	for (const a of iter) {
		acc = f(acc, a);
	}
	return acc;
};


log(reduce(add, [1, 2, 3, 4, 5]));
// 15

// 즉 아래 코드가 있다고 했을 때 
log(reduce(add, [1, 2, 3, 4, 5]));
// 15 

// 이터러블을 이터레이터로 만들고(iter => [1, 2, 3, 4,5]);

// 그렇게 만든 이터레이터에서 첫번째 값을 next로 해서 꺼내서 acc로 옮겨주기 때문에 동일한 코드로 동작한다.
// 작동방법 log(reduce(add, 1, [2, 3, 4, 5]));

// 15

reduce 같은 경우에 어떻게 축약할지를 완전히 위임하기 때문에 단순히 숫자가 들어있었던 배열 외에도 복잡한 데이터 형식역시 축약하는데 있어서 어려움이 없다. products에 있는 금액들을 다 더하는 것을 reduce로만 작성을 한다고 하면 

아래와 같은 형식으로 작성할 수 있다.

 

<script>
	const products = [
		{ name: '반팔티', price: 15000 },
		{ name: '긴팔티', price: 20000 },
		{ name: '핸드폰케이스', price: 15000 },
		{ name: '후드티', price: 30000 },
		{ name: '바지', price: 25000 }
	];
</script>

products를 reduce로 하고 시작하는 값을 0으로 시작하고 total_price를 만드는데 products이 들어오고 

total_price에 product의 price를 더해준다. 즉 reduce도 역시 보조함수를 통해 안쪽에 있는 값에 다양성을 잘 지원해주고, 이터러블(products)를 통해서 외부 값에 대한 다양성도 많이 지원한다.

	log(
		reduce(
			(total_price, product) => total_price + product.price,
			0,
			products));

 

 

<출처 : 유인동 함수형 프로그래밍과 JavaScript ES6+>

https://www.inflearn.com/course/functional-es6/dashboard

함수형 프로그래밍과 JavaScript ES6+ - 인프런 | 강의