[javascript] reduce 함수 사용법, 응용

reduce() 함수란?

 

자바스크립트의 reduce함수는 배열의 각 요소를 순회하며 callback함수의 실행 값을 누적하여 하나의 결과값을 반환한다.

arr.reduce(callback[, intialValue])

 

파라미터

 

1. callback function이며 다음 4가지 인수를 가진다.

• accumulator - accumulator는 callback함수의 반환값을 누적한다.
• currentValue - 배열의 현재 요소
• index - 배열의 현재 요소의 인덱스
• array - 호출한 배열
• callback 함수의 반환 값은 accumulator에 할당되고 순회중 계속 누적되어 최종적으로 하나의 값을 반환한다.

 

2. initialValue(Optional)

• 최초 callback 함수 실행 시 accumulator 인수에 제공되는 값, 초기값을 제공하지 않을 경우 배열의 첫번째 요소를 사용하고, 빈 배열에서 초기값이 없을 경우 에러가 발생한다.

 

예제1 - 배열의 모든 값 더하기

const arr = [1, 2, 3, 4, 5];

const sum = (x, y) => x + y;
const result = arr.reduce(sum);
console.log(result); //15

 

배열의 첫번째부터 마지막까지 더한 누산값을 결과로 출력한다 

 

예제2 - 배열의 평균값 구하기

const arr = [1, 2, 3, 4, 5];

const average = (sum, val, i, arr) => {
  sum += val;
  return i === arr.length - 1 ? sum / arr.length : sum;
};

console.log(arr.reduce(average)); //3

누산값을 마지막 배열의 크기로 나누어 평균을 출력한다.

 

예제3-배열의 최대값 구하기

 

const nums = [50, 10, 20, 80, 40];

const max = (x, y) => (x > y ? x : y);
console.log(nums.reduce(max)); //80

 

예제4-배열 뒤집기

 

let str = "hello";

const reverse = (s) => s.split("").reduceRight((a, b) => a + b);
console.log(reverse(str)); //olleh

 

 

TIL

 

어려워서 그간 피하기만 했던 reduce 함수

직접 쓰면서 로그 찍어보니 그래도 이해는 되는 거 같다.

자주 써 버릇해야겠다고 느꼈다. 

 

 

출처 : https://www.youtube.com/watch?v=HMHTUfGnpaA&list=PL3xNAKVIm80Lp326rlpWZdn-HIRD83cv8