fix-post: map-filter-reduce

contents/posts/JavaScript/map-filter-reduce.mdx

@@ -10,14 +10,15 @@ thumbNail: "https://github.com/BY-juun/Blog/assets/78716842/78919fbe-9e62-4e2b-9
 
 # 1️⃣ map
 
-`map()` 함수는 배열 내의 모든 요소 각각에 대해 call back 함수를 호출한 결과를 모아 새로운 배열을 반환 합니다.  
-`map` 함수의 원형은 다음과 같습니다.
+`map()` 함수는 배열 내의 모든 요소 각각에 대해 call back 함수를 호출한 결과를 모아 새로운 배열을 반환 합니다.
 
-`map(value,index,arr)`
+`map` 함수는 아래와 같은 형태의 콜백함수를 인자로 받습니다.
+
+`(value,index,arr) => {}`
 
 value는 배열의 요소를 말하고, index는 해당 요소의 인덱스, arr은 해당 map함수를 호출한 배열을 의미합니다.
 
-```js showLineNumbers
+```js
 const array = [1, 4, 9, 16];
 
 const map = array.map((x) => x * 2);
@@ -27,7 +28,7 @@ console.log(map); //[2, 8, 18, 32]
 
 배열 내의 요소가 객체인 경우에도 사용할 수 있습니다.
 
-```js showLineNumbers
+```js
 var kvArray = [
   { key: 1, value: 10 },
   { key: 2, value: 20 },
@@ -57,6 +58,38 @@ var reformattedArray = kvArray.map(function (obj) {
 
 다음과 같이 함수안에서 홀수 짝수를 나누어 사용할 수도 있습니다.
 
+## 직접 구현해보기
+
+`map` 함수를 직접 구현 후 `Array.prototype`에 객체에 등록 후 사용해보겠습니다.
+
+```js
+Array.prototype.myMap = function myMap(cb) {
+  const result = [];
+
+  for (let idx = 0; idx < this.length; idx++) {
+    result.push(cb(this[idx], idx, this));
+  }
+
+  return result;
+};
+```
+
+```js
+[1, 2, 3].myMap((v) => v * 2); // [2, 4, 6]
+```
+
+```js
+[1, 2, 3].myMap((v, idx) => {
+  if (idx > 1) {
+    return v * 2;
+  } else {
+    return v;
+  }
+}); // [1, 2, 6]
+```
+
+<br />
+
 # 2️⃣ filter
 
 filter함수는 주어진 함수의 _*테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환*_ 합니다.
@@ -96,6 +129,32 @@ console.log(richNames); // ["YD", "Bill"]
 
 filter의 반환값이 배열이라는 점을 이용해 map함수와 함께 사용할 수 있습니다.
 
+## 직접 구현해보기
+
+`filter` 함수를 직접 구현 후 `Array.prototype`에 객체에 등록 후 사용해보겠습니다.
+
+```js
+Array.prototype.myFilter = function myMap(cb) {
+  const result = [];
+
+  for (let idx = 0; idx < this.length; idx++) {
+    if (cb(this[idx], idx, this)) {
+      result.push(this[idx]);
+    }
+  }
+
+  return result;
+};
+```
+
+```js
+[1, 2, 3].myFilter((v) => v > 1); // [2, 3]
+```
+
+```js
+[1, 2, 3].myFilter((v, idx) => idx > 1); // [3]
+```
+
 <br />
 
 # 3️⃣ reduce
@@ -144,3 +203,27 @@ const result = arr.reduce((acc, cur, i) => {
 
 다음과 같이 초기값을 배열로 세팅하고, 조건문을 이용하면, filter함수의 역할을 하는 reduce함수를 만들 수 있습니다.  
 filter함수 뿐만 아니라, sort, find, findIndex 등등 다른 함수들도 reduce함수를 이용해 구현할 수 있습니다.
+
+## 직접 구현해보기
+
+`reduce` 함수를 직접 구현 후 `Array.prototype`에 객체에 등록 후 사용해보겠습니다.
+
+```js
+Array.prototype.myReduce = function myMap(cb, initialValue) {
+  let result = initialValue;
+
+  for (let idx = 0; idx < this.length; idx++) {
+    result = cb(result, this[idx], this);
+  }
+
+  return result;
+};
+```
+
+```js
+[1, 2, 3].myReduce((acc, cur) => acc + cur, 0); // 6
+```
+
+```js
+["1", "2", "3"].myReduce((acc, cur) => acc + cur, ""); // "123"
+```