[![Hits](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fbyjuun.com%2Fposts%2FJavaScript%2Fmap-filter-reduce&count_bg=%233B82F6&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=views&edge_flat=false)](https://hits.seeyoufarm.com)

# 1️⃣ map `map()` 함수는 배열 내의 모든 요소 각각에 대해 call back 함수를 호출한 결과를 모아 새로운 배열을 반환 합니다. `map` 함수는 아래와 같은 형태의 콜백함수를 인자로 받습니다. `(value,index,arr) => {}` value는 배열의 요소를 말하고, index는 해당 요소의 인덱스, arr은 해당 map함수를 호출한 배열을 의미합니다. ```js const array = [1, 4, 9, 16]; const map = array.map((x) => x * 2); console.log(map); //[2, 8, 18, 32] ``` 배열 내의 요소가 객체인 경우에도 사용할 수 있습니다. ```js var kvArray = [ { key: 1, value: 10 }, { key: 2, value: 20 }, { key: 3, value: 30 }, ]; var reformattedArray = kvArray.map(function (obj) { if (obj.key % 2 === 1) { //짝수 var rObj = {}; rObj[obj.key] = obj.value; return rObj; } else { //홀수 var rObj = {}; rObj[obj.key] = obj.value + 1; return rObj; } }); // reformattedArray는 [{1:10}, {2:21}, {3:30}] // kvArray는 그대로 // [{key:1, value:10}, // {key:2, value:20}, // {key:3, value: 30}] ``` 다음과 같이 함수안에서 홀수 짝수를 나누어 사용할 수도 있습니다. ## 직접 구현해보기 `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] ```
# 2️⃣ filter filter함수는 주어진 함수의 _*테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환*_ 합니다. ```js const words = [ "spray", "limit", "elite", "exuberant", "destruction", "present", ]; const result = words.filter((word) => word.length > 6); console.log(result); // expected output: Array ["exuberant", "destruction", "present"] ``` 위 예제에서는 length가 6이상인 요소를 모아 새로운 배열을 만듭니다. ```js const guys = [ { name: "YD", money: 500000 }, { name: "Bill", money: 400000 }, { name: "Andy", money: 300000 }, { name: "Roky", money: 200000 }, ]; const richNames = guys .filter((man) => man.money > 300000) .map((man) => man.name); 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] ```
# 3️⃣ reduce `reduce()` 함수는 배열의 각 요소에 대해 주어진 reducer함수를 실행하고, 하나의 결과값을 반환합니다. reduce 함수의 원형은 다음과 같습니다. `reduce((누적값, 현재값, index, value) => {return 결과;} , 초기값)` 누적값은 현재까지의 누적값을 의미합니다. ```js const arr = [1, 2, 3]; const result = arr.reduce((acc, cur, i) => { console.log(acc, cur, i); return acc + cur; }, 0); // 0 1 0 // 1 2 1 // 3 3 2 // result : 6 const arr = [1, 2, 3]; const result = arr.reduce((acc, cur, i) => { console.log(acc, cur, i); return acc + cur; }, 10); // 10 1 0 // 11 2 1 // 13 3 2 // result : 16 ``` 초기값을 적어주지 않을 경우, 자동으로 첫번째 요소로 초기화됩니다. 위 코드를 통해 초기값은 첫번째 callback함수의 인수로 제공되는 값임을 알 수 있습니다.
```js const arr = [1, 2, 3]; const result = arr.reduce((acc, cur, i) => { if (cur % 2 === 1) acc.push(cur); return acc; }, []); ``` 다음과 같이 초기값을 배열로 세팅하고, 조건문을 이용하면, 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" ```

map, filter, reduce