<div id="readability-page-1" class="page"><div><blockquote>
인프런 유인동님의 '함수형 프로그래밍과 JavaScript ES6+' 강의를 들으며 정리 및 공부한 내용입니다.
</blockquote>
아래는 예시로 활용하는 지금까지 구현한 map, filter, reduce 함수
<pre><code>const log = console.log;

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

const filter = (f, iter) =&gt; {
 let res = [];
 for (const a of iter) {
 if (f(a)) res.push(a);
 }
 return res;
};

const reduce = (f, acc, iter) =&gt; {
 if (!iter) {
 iter = acc[Symbol.iterator]();
 acc = iter.next().value;
 }
 for (const a of iter) {
 acc = f(acc, a);
 }

 return acc;
};

const products = [
 { name: "반팔티", price: 15000 },
 { name: "긴팔티", price: 20000 },
 { name: "핸드폰케이스", price: 15000 },
];

const add = (a, b) =&gt; a + b;

log(
 reduce(
 add,
 map(
 (p) =&gt; p.price,
 filter((p) =&gt; p.price &lt; 20000, products)
 )
 )
);</code></pre>
=&gt; 일단 각각의 함수들을 레고 블럭처럼 하나하나 쌓아나가는 부분도 너무 흥미로웠다. 
=&gt; 사실 나도 이렇게 프로그래밍을 하고 있었을지도 모른다라는 생각이 들기도 했음 ..
=&gt; 여기서 또 추가로 강의에서 팁을 준 부분은
<pre><code>log(
 reduce(
 add,
 map(
 (p) =&gt; p.price,
 filter((p) =&gt; p.price &lt; 20000, products)
 )
 )
);</code></pre>
=&gt; 이 함수 덩어리를 읽는 방법이다. 
=&gt; 그냥 직관적으로 오른쪽부터 그대로 읽으면 된다.
=&gt; products는 20000이하 필터(함수)된 그리고 p의 price들만 뽑아서 map 한거 그리고 add(함수)를 reduce로 실행해 결과값.
=&gt; 좀더 쉽게 또, 이게 ts랑도 아주 조합이 좋다고 생각이 들었던게
=&gt; add를 사용할때 이용할 데이터를 예상하고
<pre><code>log(
 reduce(
 add,
	[10, 20, 30]
 )
);</code></pre>
=&gt; 또 map 함수를 쓰면서 다음을 예상하고...
<pre><code>log(
 reduce(
 add,
 map(
 (p) =&gt; p.price,
 [10, 20, 30]
 )
 )
);</code></pre>
=&gt; 배우면 배울수록 함수형 프로그래밍 방식들은 ts, tdd와 아삼육이라는 생각이 듦.
<img src="https://velog.velcdn.com/images/2taesung/post/34b83cdb-cd28-419a-a11c-0c15d8ccccd9/image.png"></div></div>

2taesung.log

Taesung Lee

인프런 유인동님의 '함수형 프로그래밍과 JavaScript ES6+' 강의를 들으며 정리 및 공부한 내용입니다.
아래는 예시로 활용하는 지금까지 구현한 map, filter, reduce 함수
const log = console.log;
const map = (f, iter) => {
 let res = [];
 for (const a of iter) {
 res.push(f(a));
 }
 return res;
};
const filter = (f, iter) => {
 let res = [];
 for (const a of iter) {
 if (f(a)) res.push(a);
 }
 return res;
};
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;
};
const products = [
 { name: "반팔티", price: 15000 },
 { name: "긴팔티", price: 20000 },
 { name: "핸드폰케이스", price: 15000 },
];
const add = (a, b) => a + b;
log(
 reduce(
 add,
 map(
 (p) => p.price,
 filter((p) => p.price < 20000, products)
 )
 )
);
=> 일단 각각의 함수들을 레고 블럭처럼 하나하나 쌓아나가는 부분도 너무 흥미로웠다. 
=> 사실 나도 이렇게 프로그래밍을 하고 있었을지도 모른다라는 생각이 들기도 했음 ..
=> 여기서 또 추가로 강의에서 팁을 준 부분은
log(
 reduce(
 add,
 map(
 (p) => p.price,
 filter((p) => p.price < 20000, products)
 )
 )
);
=> 이 함수 덩어리를 읽는 방법이다.
=> 그냥 직관적으로 오른쪽부터 그대로 읽으면 된다.
=> products는 20000이하 필터(함수)된 그리고 p의 price들만 뽑아서 map 한거 그리고 add(함수)를 reduce로 실행해 결과값.
=> 좀더 쉽게 또, 이게 ts랑도 아주 조합이 좋다고 생각이 들었던게
=> add를 사용할때 이용할 데이터를 예상하고
log(
 reduce(
 add,
 [10, 20, 30]
 )
);
=> 또 map 함수를 쓰면서 다음을 예상하고...
log(
 reduce(
 add,
 map(
 (p) => p.price,
 [10, 20, 30]
 )
 )
);
=> 배우면 배울수록 함수형 프로그래밍 방식들은 ts, tdd와 아삼육이라는 생각이 듦.

함수형 프로그래밍과 JavaScript ES6+ (5) - mfr

댓글