자바스크립트 배열 고차함수 reduce

📍  Array.prototype.reduce ( immutable )

 

 

reduce 메서드는 자신을 호출한 배열을 모든 요소를 순회하며 인수로 전달받은 콜백함수를 반복 호출한다.

그리고 콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫번째 인수로 전달하면서 콜백 함수를 호출하여,

하나의 결과값을 만들어 반환한다.

 

// 1부터 4까지 누적을 구한다.
// 숫자끼리 값을 더할 때는 초기값을 0으로 설정하지 않아도 값이 나오지만
// 그래도! 그래도! 초기값을 넣어주는 게 좋다.

const sum = [1, 2, 3, 4].reduce(
  // 콜백 함수
  (accumulator, currentvalue, index, array) => {
    accumulator + currentvalue
  },
// 초기값
0);

console.log(sum);  // 10

 

🔔  reduce 메서드는 최대 2개의 인수를 받을 수 있다.

 

01  콜백 함수

02  초기값

 

 

🔔  reduce 메서드의 콜백함수는 최대 4개의 인수를 받을 수 있다.

 

01  초기값 or 콜백 함수의 이전 반환값

02  reduce 메서드를 호출한 배열의 요소값

03  reduce 메서드를 호출한 배열의 인덱스

04  reduce 메서드를 호출한 배열 자체 ( this )

 

 

 

🏁  평균 구하기

 

const values = [1, 2, 3, 4, 5, 6];

const average = values.reduce((acc, cur, i, {length}) => {
  // 마지막 순회가 아니면
  // 누적값을 반환하고
  // 마지막 순회이면
  // 누적값을 배열 요소 개수로 나눈 평균값을 반환한다
  return i === length - 1 ? (acc + cur) / length : acc + cur;
}, 0);

console.log(average);  // 3.5

 

 

 

 

 

 

 

 

 

 

 

별다른 객체가 없어도 { length } 에

배열의 길이가 담겨있는 걸 확인할 수 있다 wow...

 

 

 

 

 

 

 

 

 

🏁  최대값 구하기

 

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

const max = values.reduce((acc, cur) => (acc > cur ? acc : cur), 0);

console.log(max);  // 5

// 그렇지만 ... 최대값을 구할 때는 reduce 메서드보다 ❗Math.max 메서드❗가 더 직관적임

let max1 = Math.max(...values);
// let max1 = Math.max.apply(null, values);

console.log(max);  // 5

 

 

 

 

 

 

 

max 값은 5

 

 

 

 

 

 

 

 

 

 

🏁  요소의 중복 횟수 구하기

 

const fruits = ['banana', 'apple', 'orange', 'orange', 'apple'];

const count = fruits.reduce((acc, cur) => {
  // 첫 번째 순회 시 acc는 초기값인 {}이고, cur은 첫 번째 요소인 'banana'다.
  // 초기값으로 전달받은 빈 객체에 요소값인 cur을 프로퍼티 키로, 요소의 개수를 프로퍼티 값으로 할당한다.
  // 만약, 프로퍼티 값이 undefined(처음 등장하는 요소)이면 프로퍼티 값을 1로 초기화한다.
  acc[cur] = (acc[cur] || 0) + 1;
  return acc;
}, {});

 

 

 

acc 가 콜백 함수임을 여실히 보여주는 부분

 

 

 

 

 

◾ 논리 연산자 ' || ' 정체 

 

논리 OR ( expr1 || expr2 )

expr1을 true로 반환할 수 있으면 expr1을 반환한다.

그 외의 경우에는 expr2를 반환한다.

불리언 값과 함께 사용한 경우에는 하나라도 참이면 true를, 그 외에는 false를 반환한다.

 

 

 

 

🏁  중첩 배열 평탄화

 

const values = [1, [2, 3], 4, [5, 6]];
// concat은 이렇게 2중 배열까지만 벗겨낼 수 있다. 그 이상은 안됌

const flatten = values.reduce((acc, cur) => acc.concat(cur), []);

console.log(flatten);  // [1, 2, 3, 4, 5, 6]

// 그렇지만 !! 중첩 배열을 평탄화할 때는 reduce 메서드보다 ❗flat 메서드❗가 더 직관적임

[1, [2, 3, 4, 5]].flat();  // [1, 2, 3, 4, 5]
[1, [2, 3, [4, 5]]].flat(2);  // [1, 2, 3, 4, 5]
// 인수 2는 중첩 배열을 평탄화하기 위한 깊이 값이다 wow 정말 편리하다 wow

 

 

 

🏁  중복 요소 제거

 

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

const result = values.reduce((acc, cur, i, arr) => {
  // 순회 중인 요소의 첫 인덱스가 자신의 인덱스라면, 처음 순회하는 요소다.
  // 이 요소만 초기값으로 전달받은 배열에 담아 반환한다.
  // 순회 중인 요소의 첫 인덱스가 자신의 인덱스가 아니라면 중복된 요소다.
  if(arr.indexOf(cur) === i) acc.push(cur);
  return acc;
}, []);

console.log(result);  // [1, 2, 3, 5, 4]

// 그렇지만 !! 중복 요소를 제거할 때는 reduce 메서드보다 ❗filter 메서드❗가 더 직관적임

const result = values.filter((v, i, arr) => arr.indexOf(v) === i);

console.log(result);  // [1, 2, 3, 5, 4]

// 또는 ! 중복되지 않는 유일한 값들의 집합인 ❗Set❗을 사용할 수도 있음
// 중복 요소를 제거할 땐, 이 방법을 추천추천 ?ㅁ<

const result1 = [...new Set(values)];

console.log(result1);  // [1, 2, 3, 5, 4]

 

 

 

 

 

 

 

 

 

 

 

 

 

 

indexOf( ) 메서드니까 이게 가능한거다 ~!~!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

❗ reduce 메서드 호출할 때 주의할 점

❗ 언제나 초기값을 전달하는 것이 안전하다.

 

// reduce 메서드의 두 번째 인수, 즉 초기값을 생략함

const sum = [1, 2, 3, 4].reduce((acc,cur) => acc + cur);
console.log(sum);  // 10

 

그래도 원하는 값이 나오긴 나온다. 하지만 경우의 수가 한정적임.

 

const sum1 = [].reduce((acc, cur) => acc + cur);
// Uncaught TypeError: Reduce of empty array with no initial value

 

초기값을 설정하지 않으면 이렇게 에러가 발생한다.

 

const sum2 = [].reduce((acc, cur) => acc + cur, 0);
console.log(sum);  // 0

 

초기값을 설정하면 에러가 발생하지 않고, 원하는 값이 나온다.

 

 

 

❗ 이건 내가 알고리즘 문제를 풀면서도 부딪쳤던 부분 ❗

 

 

 

 

 

 

 

 

 

 

이건 되고 왜 저건 안되나 고민했던 부분 ㅜㅜ

해소되었따 !!

 

 

 

 

 

 

 

 

 

const products = [
  { id: 1, price: 100 },
  { id: 2, price: 200 },
  { id: 3, price: 300 }
];

const priceSum = products.reduce((acc, cur) => acc.price + cur.price);

// 첫번째 순회 : acc는 { id: 1, price: 100 }, cur은 { id: 2, price: 200 }이다.
// 두번째 순회 : acc는          300         , cur은 { id: 3, price: 300 }이다.
// 두번째 순회 : acc에 함수 객체가 아닌 숫자값이 전달된다. 이때 acc.price는 undefined다.

console.log(priceSum);  // NaN

 

이처럼 ❗객체 프로퍼티 값을 합산하는 경우❗에는 반드시 초기값을 전달해야한다.

물론 그 외에도 초기값 꼭꼭 적어주자 ⭐⭐⭐

 

const products = [
  { id: 1, price: 100 },
  { id: 2, price: 200 },
  { id: 3, price: 300 }
];

const priceSum = products.reduce((acc, cur) => acc + cur.price, 0);

// 첫번째 순회 : acc는   0 , cur은 { id: 1, price: 100 }이다.
// 두번째 순회 : acc는  100, cur은 { id: 2, price: 200 }이다.
// 두번째 순회 : acc는  300, cur은 { id: 3, price: 300 }이다.

console.log(priceSum);  // 600