<div id="readability-page-1" class="page"><div><blockquote>
인프런 유인동님의 '함수형 프로그래밍과 JavaScript ES6+' 강의를 들으며 정리 및 공부한 내용입니다.
</blockquote>
지금까지 배운 내용들을 실습(적용)해볼 수 있는 대표적인 함수들로 map, filter, reduce가 있음. 
이중 reduce 함수를 개발하는 과정을 통해 함수형 프로그래밍을 미리 체험할 수 있다.
그 과정을 기록하고 느낀점을 서술.
<ul>
<li>1단계 
가장 먼저 단순히 reduce의 기능을 구현한 코드</li>
</ul>
<pre><code>const nums = [1,2,3,4,5]; 
let total = 0;
for (const a of acc) {
 total = total + a;
}
 
console.log(total);</code></pre>
<ul>
<li>2단계 
reduce함수를 만들어 '재활용성 부여' 
필요한 정의는 '필요한 인자'를 받고 '목표에 맞는 값을 반환'하기 
(강의 내용은 3단계로 바로 넘어감, 그러나 내 생각엔 이 단계가 하나 더 있는게 더 자연스럽다는 생각)</li>
</ul>
<pre><code>const nums = [1,2,3,4,5];
const reduce = (acc) =&gt; {
 let total = 0;
 for (const a of acc) {
 total = total + a;
 }
 
 return total;
}

console.log(reduce(nums))</code></pre>
<ul>
<li>3단계 
reduce함수 내부의 반복되는 기능인 '더하기' 기능을 보조 함수로 분리, 이로써 reduce 함수는 add하는 보조함수를 활용하는 '값을 누적하는 기능'에 집중하게 됨. 그리고 이것은 js가 함수를 인자로 사용할 수 있는 1급 객체이기 때문에 가능.</li>
</ul>
<pre><code>const nums = [1,2,3,4,5];
const add = (a, b) =&gt; a + b;
const reduce = (f, acc, iter) =&gt; {
 for (const a of iter) {
 acc = f(acc, a);
 }
 
 return acc;
}

console.log(reduce(add, 0, nums))</code></pre>
<ul>
<li>4단계 
인자 없을 경우 default를 iterator로 처리. Array object는 iterable한 객체이다. 그러므로 Symbol.iterator()를 통해 iterator로 만들 수 있다. 여기에 next를 이용해 인자가 없을 경우의 default 값으로 처리해준다. 물론 함수에 없을 경우 할당해주는 기능을 사용할 수 있지만 iterator 개념을 확인하기 위해.</li>
</ul>
<pre><code>const nums = [1,2,3,4,5];
const add = (a, b) =&gt; a + b;
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;
}

console.log(reduce(add, nums))</code></pre></div></div>

2taesung.log

Taesung Lee

인프런 유인동님의 '함수형 프로그래밍과 JavaScript ES6+' 강의를 들으며 정리 및 공부한 내용입니다.
지금까지 배운 내용들을 실습(적용)해볼 수 있는 대표적인 함수들로 map, filter, reduce가 있음. 
이중 reduce 함수를 개발하는 과정을 통해 함수형 프로그래밍을 미리 체험할 수 있다.
그 과정을 기록하고 느낀점을 서술.
1단계
가장 먼저 단순히 reduce의 기능을 구현한 코드
const nums = [1,2,3,4,5]; 
let total = 0;
for (const a of acc) {
total = total + a;
}
console.log(total);
- 2단계 
reduce함수를 만들어 '재활용성 부여' 
필요한 정의는 '필요한 인자'를 받고 '목표에 맞는 값을 반환'하기
(강의 내용은 3단계로 바로 넘어감, 그러나 내 생각엔 이 단계가 하나 더 있는게 더 자연스럽다는 생각)
```js
const nums = [1,2,3,4,5];
const reduce = (acc) => {
  let total = 0;
  for (const a of acc) {
    total = total + a;
  }
  return total;
}
console.log(reduce(nums))
3단계
reduce함수 내부의 반복되는 기능인 '더하기' 기능을 보조 함수로 분리, 이로써 reduce 함수는 add하는 보조함수를 활용하는 '값을 누적하는 기능'에 집중하게 됨. 그리고 이것은 js가 함수를 인자로 사용할 수 있는 1급 객체이기 때문에 가능.
const nums = [1,2,3,4,5];
const add = (a, b) => a + b;
const reduce = (f, acc, iter) => {
  for (const a of iter) {
    acc = f(acc, a);
  }
  return acc;
}
console.log(reduce(add, 0, nums))
4단계
인자 없을 경우 default를 iterator로 처리. Array object는 iterable한 객체이다. 그러므로 Symbol.iterator()를 통해 iterator로 만들 수 있다. 여기에 next를 이용해 인자가 없을 경우의 default 값으로 처리해준다. 물론 함수에 없을 경우 할당해주는 기능을 사용할 수 있지만 iterator 개념을 확인하기 위해.
const nums = [1,2,3,4,5];
const add = (a, b) => a + b;
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;
}
console.log(reduce(add, nums))

함수형 프로그래밍과 JavaScript ES6+ (4) - reduce

댓글