
자바스크립트 ES6에서 배열은 프로토타입 메서드 map, filter, reduce를 가진다.
배열이 아니더라도 이터러블이라면 사용할 수 있는 함수형 map, filter, reduce 함수를 구현해본다.

## map

수집할 값 정보를 파라미터 함수 `f`에게 완전히 위임한 고차함수 map을 구현해보자.
이터러블을 순회하며 함수 `f`를 실행한 값을 배열에 넣어 리턴하도록 하면 된다.

```js
const map = (f, iter) => {
	let res = [];
	for (const a of iter) {
		res.push(f(a));
	}
	return res;
}

map(p => p.name, products)
map(p => p.price, products)
```

## 이터러블 프로토콜을 따른 map의 다형성

```js
document.querySelectorAll('*').map(el => el.nodeName);
```

위 코드에서 `querySelectorAll`의 리턴값인 `NodeList`는 배열을 상속받지 않았기 때문에
map 함수가 없다고 뜨고, 에러가 뜬다. 그럴 땐 위에서 정의한 map 함수를 쓰면 된다.

```js
map(el => el.nodeName, document.querySelectorAll('*'));
```

제너레이터가 반환하는 이터레이터를 순회하는 것도 가능하다.

```js
function *gen() {
	yield 2;
	if (false) yield 3;
	yield 4;
}

map(a => a*a, gen());
```

최근 ECMAScript의 헬퍼 함수들이 이터러블 프로토콜을 기반으로 만들어지고 있어 앞으로 호환성도 좋아질 예정이다.

### 자료구조 Map 써보기

기존의 `Map` 자료구조를 사용해 새로운 map을 만들 수도 있다.

```js
let m = new Map();
m.set('a', 10);
m.set('b', 20);

new Map(map(([k,v] => [k, v*2]), m));
```

## filter

이터러블에서 조건에 맞는 원소만 걸러내는 함수형 `filter`를 만들어본다.
전체적인 구현 방식은 `map`과 비슷한데, `f(a)`가 `true`인 값만 걸러내면 된다.

```jsx
const filter = (f, iter) => {
	let result = [];
	for (const a of iter) {
		if(f(a)) result.push(a)
	}

	return result;
}
filter(p => p.price > 3000, products);
```

## reduce

reduce는 **값을 순회하면서 하나의 값으로 누적해 축약**하는 함수이다.
reduce는 영어로 '졸이다'는 뜻도 있는데, 여러개의 값을 졸여서(누적해서) 하나의 결과값을 생성한다고 생각하면 이해가 편하다.
이 함수는 **보조함수(1번째 파라미터)에 어떻게 축약할지를 완전히 위임**한다.

배열의 모든 원소를 더하고 싶을 때 `reduce`를 쓰지 않고 구현한다면 아래와 같다.

```js
const nums = [1,2,3,4,5]

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

이제 `reduce`를 사용해 리팩토링해보자.
자바스크립트 내장 `reduce`에서는 `acc`를 생략할 수도 있으니 만약 `acc`가 생략되었다면 자동으로 첫번째 요소를
두번째 파라미터를 기본값으로 변환하도록 한다.

```js
reduce(add, 0, [1,2,3,4,5]); // 15
// =(add(add(add([0,1]), 2), 3).... 을 반복하는 것임

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

reduce(add, [1,2,3,4,5]);   // 이렇게 온다면 자동으로
reduce(add, 1, [2,3,4,5]);  // 첫번째 요소를 기본값으로 변환해 계산한다.

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;
};
```

커스텀한 `reduce` 함수는 가장 먼저 3번째 파라미터(이터레이터)가 있는지 확인하고, 없을 경우
`acc`에서 자기 자신 이터레이터를 꺼내오고, 그 `이터레이터.next()`의 값을 `acc`로 지정한다.

### reduce로 products의 모든 가격을 더한다면

```jsx
reduce((total, curr) => total + curr.price, 0, products)
```

## map+filter+reduce 중첩 사용과 함수형 사고

1. `map`으로 가격을 뽑는다
2. `filter`로 특정 금액(3만원) 이하의 상품만
3. `reduce`로 모든 가격의 합을 구한다

이 때 `filter`, `map`의 순서를 바꿔도 결과는 동일하다.

```js
const add = (a, b) => a+b;
	reduce(
		add,
		map(p => p.price,
			filter(p => p < 30000, products)
	)
)
```

좀 더 함수형으로 생각하려면 `add` 다음 파라미터(`curr`)나 `map`의 두번째 파라미터(타겟 arr)가 숫자가 있는 배열로 평가되도록 코드를 작성하면 된다.

```js
reduce(
	add,
	// 숫자 배열로 평가되도록
)
```

*참고: 인프런 [함수형 프로그래밍과 Javascript ES6+](https://www.inflearn.com/course/functional-es6)*

배열이 아니어도 사용할 수 있는 map, filter, reduce 함수형으로 만들어보기

자바스크립트 함수형 프로그래밍: map, filter, reduce


## 제너레이터와 이터레이터

자바스크립트에서는 **어떤 값이든 이터러블이면 순회할 수 있다**. 제너레이터로는 어떤 상태, 값이든 이터러블하게 만들 수 있다(다형성).

제너레이터란 이터레이터이자 이터러블을 생성하는 함수, **이터레이러를 리턴하는 함수**다.
일반 함수 앞에 *를 붙여 만들 수 있다.

```js
function *gen() {
	yield 1;
	yield 2;
	yield 3;
	return 100; // done: true일때 undefined 대신 value가 되는 값. 순회되진 않는다.
}
let iter = gen();
log(iter.next());

for (const a of gen()) // 도 가능
    console.log(a)
```

`iter[Symbol.iterator]() == iter)`의 값은 true다. 제너레이터는 잘 만들어진 이터레이터를 리턴하기 때문이다.

## odds: 주어진 이터러블에서 홀수만 뽑아내기

```js
// 무한하긴 하지만 내가 제너레이터를 평가할때만 돌아가므로 브라우저가 뻗지 않는다.
function *infinity(start=0) {
	while (true) yield start++;
}
```

주어진 `start`에서부터 무한대의 값을 담은 이터레이터를 반환하는 제너레이터 `infinity`는 위처럼 구현할 수 있다.
만약 제너레이터 없이 1부터 무한대의 값을 담은 배열을 만드려고 했다면 브라우저가 멈췄을 것이다.
그러나 위 코드처럼 제너레이터로 만들면 값은 무한하지만 값을 평가할때만 돌아가므로 브라우저가 뻗지 않는다.

이터러블을 순회하며 주어진 `l`에서 멈추는 제너레이터 `limit`과 `l`까지의 홀수를 담은 이터레이터를 반환하는 제너레이터
`odds`는 아래와 같이 구현할 수 있다.

```js
// iter를 받아서 iter를 돌다가 l을 만나면 멈춘다.
function *limit(l, iter) {
	for (const a of iter) {
		yield a;
        if (a==l) return;
	}
}
limit(4, [1,2,3,4]);

function *odds(l) {
	for (const a of limit(l, infinity(1))) {
		if (a % 2) yield a;
	}
}

let oddIter = odds(10) // max 값
```

`odds`는 위에서 만든 `limit`과 `infinity`를 활용해 구현하였다.

## 조합성 있는 코드 만들기

이터러블 프로토콜을 따르면 조합성 있는 코드를 작성할 수 있다.
이전 장에서 본 `for…of`외에도 전개 연산자, 구조 분해, 나머지 연산자 등등을 활용하기 좋다.

```js
log([...odds(10)]) // 스프레드해 바로 배열로 만들기: [1 3 5 7 9]

const [head, ...tail] = odds(5); // 구조분해, 나머지 연산자 활용
console.log(head) // 1,
console.log(tail) // [3, 5]
```

*참고: 인프런 [함수형 프로그래밍과 Javascript ES6+](https://www.inflearn.com/course/functional-es6)*


이터레이터를 생성하는 제너레이터를 잘 활용하면 조합성 높은 코드를 짤 수 있다.

자바스크립트 함수형 프로그래밍: 제너레이터와 이터레이터


ES6에는 이전 방식에 없던 새로운 리스트 순회법이 생겼다.

## for...of의 등장

자바스크립트의 Array, Map, Set 자료구조는 `for of`로 내용물을 순회할 수 있다.

```js
const str = '12345'
const arr = [1,2,3]
const map = new Map([['first', 1], ['second', 2], ['third', 3]]);
const set = new Set([1,2,3])

for (const a of arr) {
	console.log(a)
}
```

그러나 인덱스로 원소에 접근할 수 있는 배열과 달리 Map과 Set 데이터는 `map[1]`, `set[2]` 이런 식으로 인덱스를 활용해 요소를 호출할 수 없다.
즉, `for of` 내부 문법이 자료구조별로 다르다는 것을 추측할 수 있다. `for of`의 내부 동작은 `Symbol.iterator`로 알아볼 수 있다.

## JS 자료구조로 알아보는 이터레이터 프로토콜

**JS의 배열, Map, Set는 이터러블/이터레이터 프로토콜을 따른다.** 이 자료구조들은 `[Symbol.iterator]` 메서드를 모두 가지고 있다.
각각 콘솔에 프린트해보면 아래와 같은 결과가 나온다.

```js
set[Symbol.iterator]() // SetIterator {1,2,3}
map[Symbol.iterator]() // MapIterator {'first'=>1, 'second'=>2, 'third'=>3}
arr[Symbol.iterator]() // Array Iterator {}
```

- Iterable: 이터레이터를 리턴하는 `[Symbol.iterator]()`를 갖는 값
- Iterator: `{value, done}` 객체를 리턴하는 `next()`를 갖는 값
- **이터러블/이터레이터 프로토콜: 이터러블을 for…of, spread(전개 연산자)와 함께 동작하도록 한 규약**

```js
let setIterator = set[Symbol.iterator]();
setIterator.next(); // {value: 1, done: false}
setIterator.next(); // {value: 2, done: false}
setIterator.next(); // {value: 3, done: false}
setIterator.next(); // {done: true}
```

즉, **for of 구문을 실행하면 그 이터레이터를 순회하며** 값을 보여준다!
`map.keys()` 도 맵의 키만 담긴 MapIterator를 반환한다.

## 사용자 정의 이터러블

아래의 코드로 이터러블을 커스텀할 수 있다.

```js
const myIterable = {
	[Symbol.iterator]() {
		let i = 4;
		return {
			next() {
				return i == 0 ? {done: true} : { value: i--, done: false}
			},
			[Symbol.iterator]() {
				return this;
			} // next()외에도 자기 자신을 리턴함으로써 언제든 이어서 iterate하게
		}
	}
}
let myIterator = myIterable[Symbol.iterator]()
```

위와 같이 자기 자신을 리턴하는 이터레이터를 잘 만들어진 이터레이터(well-formed iterator)라고 한다.
잘 만들어진 이터레이터를 받아 이어서 iterate할 수 있다.
JS의 순회가 가능한 대부분 라이브러리나 브라우저 web api들은 이 이터러블/이터레이터 프로토콜을 따른다.

*참고: 인프런 [함수형 프로그래밍과 Javascript ES6+](https://www.inflearn.com/course/functional-es6)*

for of는 Array, Map, Set과 같은 이터러블 객체의 이터레이터를 활용해 동작한다.

자바스크립트 함수형 프로그래밍: 이터레이터 프로토콜


2023년을 맞아 유인동 님의 인프런 [함수형 프로그래밍과 Javascript ES6+](https://www.inflearn.com/course/functional-es6) 강의를 듣기 시작했습니다.
자바스크립트 ES6가 나오면서 함수형 프로그래밍 스타일로 코딩을 더 간편하게 할 수 있게 도와주는 규약이나 기능이 추가되었는데요.
한번 배워보겠습니다!

## 평가와 일급

- 평가: **evaluate**, 값을 계산하는 것
(e.g. `1`을 평가하면 `1`, `2+3`을 평가하면 `5`, `10/2`를 평가하면 `5`가 된다.)
- 일급: 값으로 다룰 수 있다, 변수에 담을 수 있다, 함수의 파라미터로 사용될 수 있다, 결과로 사용될 수 있다.

### 일급 함수

- **함수를 값으로** 다룰 수 있는 함수
- 함수가 일급 함수다 = 조합성과 추상화의 도구로 함수를 사용할 수 있다는 뜻
- **함수의 파라미터로 함수를 제공**하거나 **함수가 함수를 반환**할 수 있다.

```js
function greet(helloFunc, name) {
	console.log(helloFunc()+ name);
}

greet(console.log('hi!'), 'haeun')
```

위 코드를 보면 `greet` 함수의 파라미터로 함수인 `console.log('hi')`를 넣을 수 있다. 이 경우 `greet` 함수는 일급 함수이다.

## 고차 함수

고차 함수란 **함수를 값으로 다루는 함수**를 말한다. 아래 예시의 `reduce`, `apply1`, `times`가 고차 함수다.

```js
const apply1 = f => f(1)
const add2 = a => a+2

apply1(add2); // apply1(a=> a+2)은 곧 a가 1이 되므로 3

const times = (f, n) => {
    let i = -1;
    while (++i < n) f(i)
}

times(a => log(a+10), 3) // a=>log(a+10)을 3번 반복한다. 이때 a는 i이므로 10,11,12가 결과가 됨
```

고차 함수는 함수를 만들어 리턴하며, 이때 클로저를 만들어 리턴하는 함수기도 하다.
아래의 예시에서 `addMaker` 함수는 함수이자 `a`를 기억하는 클로저다.
함수가 만들어지던 때의 환경인 `a`와 그 자체의 객체 `b => a+b`를 기억한다.

```js
const addMaker = a => b => a+b;
const add10 = addMaker(10)

console.log(add10) // b => a+b
console.log(add10(5)) // 15
```

평가란 값을 계산하는 것이고 일급함수란 함수를 값으로 다룰 수 있는 함수다.

함수형프로그래밍