forEach, map, filter, reduce

• 일단 네가지 메소드의 공통점은 배열에 대한 고차원 함수이며, 기존의 배열을 건드리지 않고 반복문을 실행한다. 즉 기존의 배열에 불변성을 주면서 반복문을 실행할 수 있는 것 이다.
• 하지만 위 함수들은 모두 각기 역할과 내용이 달라서 상황에 따라서 적절히 사용하는 것이 중요한 것 같다. 그래서 어떤 차이점들이 있는지 공부해보았다.
• (가장 흔한 반복문으로는 for문이 있지만 이것은 배열에 대한 메소드는 아니고 그저 블록문 안에서 배열을 돌며 입력된 코드가 실행되는 것 뿐이다.)

.forEach() VS .map()

const arrMap = [1, 2, 3, 4, 5];
const result = arrMap.map(num => { return num +'하이'});

const arrForEach = [1, 2, 3, 4, 5];
const result2 = arrForEach.forEach(num => { return num * 3});

console.log(result) // ["1하이", "2하이", "3하이", "4하이", "5하이"]
console.log(result2) // undefined => 실행은 되지만 리턴되는것은 없다.

즉 .forEach()는 리턴값이 없다

// 때문에 forEach메소드가 진행된 결과를 따로 배열로 받기 위해서는 새 배열을 만들고 거기에 push를 하면서 돌아야한다.
let tmpArr = [] // 새 배열을 만들고
arrForEach.forEach(num => { tmpArr.push(num + '하이')}); // 진행하면 tmpArr에 저장이 되겠지?
console.log(tmpArr) // ["1하이", "2하이", "3하이", "4하이", "5하이"]

• 즉 두 메소드 다 특정 배열을 돌면서 내부함수의 내용을 실행하는것은 맞지만 map은 모두 실행되고난 후 새로운 배열이 리턴되지만 forEach는 실행만 할뿐 새 배열을 리턴하진 않는다.
• 그렇다면 forEach는 메소드라는 점 말고는 for문과의 차이점이 없는 것 아닐까???

.filter()

• array를 돌면서 조건에 맞는 원소들만 걸러내서 새 배열에 담아 리턴해낸다.

const array1 = [1, 2, 3, 4];
const result = array1.filter((val) => val > 2)

console.log(result) // [3, 4]

.reduce()

• reduce메소드의 내부 구성은 콜백함수와, 초기값이 들어올 수 있다.
  => array.reduce(콜백함수,초기값)
• 콜백함수의 인자는 4가지가 있다.
  1.acc(누적된 현재상태)
  2.cur(원본배열의 현재원소)
  3.idx(원본배열의 현재인덱스) // 옵션
  4.src(원본) // 옵션
  => array.reduce((acc,cur,idx,src) ⇒ (),초기값)
• 리턴되는 것은 ? array를 돌면서 콜백함수를 실행한 후 축적된 최종결과를 리턴한다.

// <간단한 예시1>
const array1 = [1, 2, 3, 4];
const result1 = array1.reduce((accumulator, currentValue) => accumulator + currentValue,5); 

console.log(result1) // 15


// <조금은 복잡한 예시2>
const array2 = ['모모', '콩이', '보리', '블레어']

let result2 = array2.reduce((acc,cur,idx,src) => {
            acc.push(`cur:${cur} idx:${idx} src[0]:${src[0]}`)
            
            return acc
            },[])

// recude돌면서 만들어진 새 배열을 불러옴
console.log(result2) // ["cur:모모 idx:0 src[0]:모모", "cur:콩이 idx:1 src[0]:모모", "cur:보리 idx:2 src[0]:모모", "cur:블레어 idx:3 src[0]:모모"]

reduce는 특별하다.

reduce의 return 형태는 다양하다.

• 초기값이 어떤 형태냐에 따라서 return형태도 다르다는 것 이다.
  즉 초기셋팅이 new Map()이라면 리턴값을 반복들이 축적된 Map이 리턴되는 것이다.
  * 같은맥락으로 리듀스는 결과가 Object, Set, Array, Number, String....
  등의 다양한 결과가 리턴될 수 있다.
  

reduce로 filter, map을 구현할 수 있다.