๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
Front-end/JS

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐฐ์—ด ๊ณ ์ฐจํ•จ์ˆ˜ reduce

by ciocio 2021. 8. 15.

๐Ÿ“  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
๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€