reduce(), map()

콜백함수란?

- '다른 함수의 매개 변수로 호출될 함수를 전달하고 특정 이벤트가 발생하고 나서 매개변수로 호출된 함수가 다시 호출 되는것을 의미' 입니다!

- 콜백을 넘겨받는 코드는 이 콜백을 필요에 따라 즉시 실행할 수도 있고, 아니면 나중에 실행 할수도 있다

 

● reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고 하나의 결과값을 반환한다

매개변수 : callback, initialValue

리듀스는 순회하고자 하는 배열에 붙음

 

REDUCE 매개함수안에 들어가는 매개변수 : previousvalue currentvalue currentindex array

리턴값 :  배열 각 요소에 대하여 reducer함수를 실행하고 하나의 결과값을 반환

리턴값의 TYPE :  acc에 따라서 string,interger 이 될수도있고 array나object가 될수도있다

 

리듀서 함수는 네개의 인자를 가진다

누산기(acc) 현재값(cur) 현재 인덱스(idx) 원본배열(src)

 

리듀서 함수의 반환값은 누산기에 할당되고 누산기는 순회 유지되므로 결국 최종결과는 하나의 값이 된다

그니까 누산기라는 반장이 반애들 돌면서 한장한장

cur이라는 숙제들을 거둬가면서 점점 숙제가 쌓이듯이  배열을 싹 돌면서 값을 누적이되는거임

 

const array = [2, 3, -5, 1]
 
const sum = array.reduce(function(acc,cur){
return acc + cur
});
 
또는
 
const sum1 = array.reduce((acc,cur) => acc + cur);

배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);

초깃값을 적어주지 않으면 0부터 시작

 

※reduceRight도 있는데 reduce와 동작은 같지만 요소 순회를 오른쪽에서부터 왼쪽으로 한다는 점이 차이

 

 

●map() 메서드는 반복문을 돌며 배열 안의 요소들을 1대1로 짝지어 준다

배열.map((요소, 인덱스, 배열) => { return 요소 });

const oneTwoThree = [1, 2, 3];
let result = oneTwoThree.map((num) => {
 console.log(num);
 return num;
});
// 콘솔에는 1, 2, 3이 찍힘
oneTwoThree; // [1, 2, 3]
result; // [1, 2, 3]
oneTwoThree === result; // false

result = oneTwoThree.map((num) => {
 if (num % 2) {
    return '홀수';
  }
  return '짝수';
});
result; // ['홀수', '짝수', '홀수']

 

구글링 했을때 예제가 더하기로 많이 나와서 그렇지

더하기 곱하기만 하는게 아님

 

배열의 메서드인 map,sort, every, some, find, findIndex, includes 이런애들도 reduce로 구현 가능

 

https://www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d