Js Reduce

Views:
9
Category:
Post
Posted on:
2022. 12. 11.

reduce ๐Ÿ’ก

๊ณ ์ฐจํ•จ์ˆ˜ ์ค‘ ํ•˜๋‚˜์ธ reduce ์ž˜ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์—ˆ์œผ๋‚˜, ์˜ค๋žœ๋งŒ์— ์“ฐ๋ ค๊ณ  ํ•˜๋ฉด

์ž๊พธ ํ—ท๊ฐˆ๋ ค ๊ฐ„๋‹จํ•˜๊ฒŒ ์ •๋ฆฌํ•ด ๋ณด๋ ค๊ณ  ํ•œ๋‹ค.

๊ณ ์ฐจํ•จ์ˆ˜๋ž€?

  • ์–ด๋–ค ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์˜ ํ•จ์ˆ˜ ๊ตฌํ˜„์—์„œ ํ•จ์ˆ˜๋ฅผ ์ธ์ž๋กœ ๋„˜๊ธธ ์ˆ˜ ์žˆ๊ฑฐ๋‚˜ ๋ฐ˜ํ™˜ํ•  ์ˆ˜ ์žˆ์„ ๋•Œ ํ•จ์ˆ˜๋ฅผ ์ผ๊ธ‰ ๊ฐ์ฒด(์–ธ์–ด ๋‚ด๋ถ€์—์„œ ๊ฐ’์œผ๋กœ ํ‘œํ˜„๋˜๊ณ  ์ „๋‹ฌ๋  ์ˆ˜ ์žˆ๋Š” ์ž๋ฃŒํ˜•)๋กœ ์ทจ๊ธ‰ ํ•˜๊ณ , ํ•จ์ˆ˜๋ฅผ ์ธ์ž๋กœ ๋ฐ›๊ฑฐ๋‚˜ ๊ฒฐ๊ณผ๋กœ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ๊ณ ์ฐจ ํ•จ์ˆ˜๋ผ ํ•œ๋‹ค. [์ฐธ๊ณ ]: ๋‚˜๋ฌด์œ„ํ‚ค

์‚ฌ์šฉ๋ฐฉ๋ฒ•

arr.reduce(Callback(1๏ธโƒฃ accumulator, 2๏ธโƒฃ currentValue, 3๏ธโƒฃ index, 4๏ธโƒฃ array), 5๏ธโƒฃ -initialValue-) 1๏ธโƒฃ: ์ฝœ๋ฐฑ์˜ ๋ฐ˜ํ™˜๊ฐ’์„ ๋ˆ„์  2๏ธโƒฃ: ํ˜„์žฌ ์ฒ˜๋ฆฌํ•  ๊ฐ’(์š”์†Œ) 3๏ธโƒฃ: ์ฒ˜๋ฆฌํ•  ์š”์†Œ์˜ index๊ฐ’(optional) 4๏ธโƒฃ: reduce๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด(optional) 5๏ธโƒฃ: ๋ˆ„์ ์„ ์‹œ์ž‘ํ•  ์ดˆ๊ธฐ ๊ฐ’(optional: ์ž…๋ ฅํ•˜์ง€ ์•Š์œผ๋ฉด ๋ฐฐ์—ด์˜ ์ฒซ๋ฒˆ์งธ ์›์†Œ)

const arr = [1, 2, 3, 4, 5];
const result = arr.reduce((acc, cur, -idx, arr-) => acc + cur, -์ ์ง€ ์•Š์œผ๋ฉด 1-) 
console.log(result) // 15

๊ฐ’์„ ํ•ฉ์‚ฐํ•˜๋Š” ๊ฒƒ ๋ง๊ณ ๋„ ๋‹ค๋ฅธ ์šฉ๋„๋กœ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ๋‹ค.

์ค‘์ฒฉ๋œ ๋ฐฐ์—ด ํ‰ํƒ„ํ™”

const arr = [[1,2,3,4],[5,6,7,8]];
console.log(arr.reduce((acc, cur) => acc.concat(cur)))
// [1,2,3,4,5,6,7,8]
// initialValue ์ž…๋ ฅ x ๋”ฐ๋ผ์„œ ๋ฐฐ์—ด์˜ ์ฒซ ์›์†Œ์ธ [1,2,3,4].concat([5,6,7,8])์˜ ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜จ๋‹ค. 

๋ฐฐ์—ด ๋‚ด์˜ ์›์†Œ ๊ฐฏ์ˆ˜ ํŒŒ์•…

const arr = ['apple', 'banana', 'apple', 'mango', 'watermelon', 'apple'];
const fruit = arr.reduce((acc, cur) => {
  if(cur in acc) {
    acc[cur]++
  } else {
    acc[cur] = 1
  }
  return acc;
}, {})
console.log(fruit); // {apple: 3, banana: 1, mango: 1, watermelon: 1}
// ์ดˆ๊ธฐ๊ฐ’์œผ๋กœ ๋นˆ ๊ฐ์ฒด {}๋ฅผ ๋†“์€ ๋’ค ๊ฐ์ฒด์˜ ํ‚ค๊ฐ’์ด ์กด์žฌํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ๋“ฑ๋ก, ์•„๋‹ˆ๋ฉด ์ฆ๊ฐ€

๋ฐฐ์—ด ๋‚ด ํŠน์ • ๊ฐ’ ํ˜น์€ ์†์„ฑ์œผ๋กœ ์ •๋ ฌ

const info = [
  {
    name: '์Šคํƒ€ํฌ',
    age: 52,
    union: 'avengers'
  },
  {
    name: '๋ฐฐ๋„ˆ',
    age: 50,
    union: 'avengers'
  },
  {
    name: 'ํ”ผํ„ฐ',
    age: 22,
    union: 'avengers'
  },
  {
    name: '์Šคํ‹ฐ๋ธŒ',
    age: 48,
    union: 'free'
  },
  {
    name: 'vision',
    age: '???',
    union: 'free'
  },
  {
    name: '์™„๋‹ค',
    age: 32,
    union: 'free'    
  }
]
>
const sorted = info.reduce((acc, cur) => {
  const key = cur['union']  // free or avengers
  if(!acc[key]) {
    acc[key] = []
  }
  acc[key].push(cur);
  return acc; // return ์žŠ์ง€ ๋ง์ž !!
}, {})

์ฃผ์˜์‚ฌํ•ญโ—๏ธ ์œ„ ์ฝ”๋“œ์—์„œ if ๋‹ค์Œ else์— pushํ•˜๊ฒŒ ๋œ๋‹ค๋ฉด ์›ํ•˜๋Š” ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜ค์ง€ ์•Š๋Š”๋‹ค !!

์ค‘๋ณต ๋ฐฐ์—ด ์›์†Œ ์ œ๊ฑฐ

const arr = [1,1,1,22,2,2,3,3,3,34,5,5,];
const newArr = arr.sort((a, b) => a - b).reduce((acc, cur) => {
  const leng = acc.length;
  if(leng === 0 || acc[leng-1] !== cur) {
    acc.push(cur)
    }
  return acc;
}, [])
console.log(newArr) // [1, 2, 3, 5, 22, 34]

์ด์™€ ๊ฐ™์ด ๋‹ค์–‘ํ•˜๊ฒŒ ์“ฐ์ผ ์ˆ˜ ์žˆ๋‹ค. ์œ ์šฉํ•œ reduce ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์„ ๋ฐœ๊ฒฌํ•˜๊ฒŒ ๋˜๋ฉด ์ถ”๊ฐ€

# reduce ๐Ÿ’ก

๊ณ ์ฐจํ•จ์ˆ˜ ์ค‘ ํ•˜๋‚˜์ธ reduce ์ž˜ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์—ˆ์œผ๋‚˜, ์˜ค๋žœ๋งŒ์— ์“ฐ๋ ค๊ณ  ํ•˜๋ฉด

์ž๊พธ ํ—ท๊ฐˆ๋ ค ๊ฐ„๋‹จํ•˜๊ฒŒ ์ •๋ฆฌํ•ด ๋ณด๋ ค๊ณ  ํ•œ๋‹ค. 

### ๊ณ ์ฐจํ•จ์ˆ˜๋ž€? 
>- ์–ด๋–ค ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์˜ ํ•จ์ˆ˜ ๊ตฌํ˜„์—์„œ ํ•จ์ˆ˜๋ฅผ ์ธ์ž๋กœ ๋„˜๊ธธ ์ˆ˜ ์žˆ๊ฑฐ๋‚˜ ๋ฐ˜ํ™˜ํ•  ์ˆ˜ ์žˆ์„ ๋•Œ ํ•จ์ˆ˜๋ฅผ ์ผ๊ธ‰ ๊ฐ์ฒด(์–ธ์–ด ๋‚ด๋ถ€์—์„œ ๊ฐ’์œผ๋กœ ํ‘œํ˜„๋˜๊ณ  ์ „๋‹ฌ๋  ์ˆ˜ ์žˆ๋Š” ์ž๋ฃŒํ˜•)๋กœ ์ทจ๊ธ‰ ํ•˜๊ณ , ํ•จ์ˆ˜๋ฅผ ์ธ์ž๋กœ ๋ฐ›๊ฑฐ๋‚˜ ๊ฒฐ๊ณผ๋กœ ๋ฐ˜ํ™˜ํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ๊ณ ์ฐจ ํ•จ์ˆ˜๋ผ ํ•œ๋‹ค.
[[์ฐธ๊ณ ]: ๋‚˜๋ฌด์œ„ํ‚ค](https://namu.wiki/w/%EA%B3%A0%EC%B0%A8%20%ED%95%A8%EC%88%98)


### ์‚ฌ์šฉ๋ฐฉ๋ฒ•
arr.reduce(Callback(1๏ธโƒฃ accumulator, 2๏ธโƒฃ currentValue, 3๏ธโƒฃ index, 4๏ธโƒฃ array), 5๏ธโƒฃ -initialValue-)
1๏ธโƒฃ: ์ฝœ๋ฐฑ์˜ ๋ฐ˜ํ™˜๊ฐ’์„ ๋ˆ„์ 
2๏ธโƒฃ: ํ˜„์žฌ ์ฒ˜๋ฆฌํ•  ๊ฐ’(์š”์†Œ)
3๏ธโƒฃ: ์ฒ˜๋ฆฌํ•  ์š”์†Œ์˜ index๊ฐ’(optional)
4๏ธโƒฃ: reduce๋ฅผ ํ˜ธ์ถœํ•œ ๋ฐฐ์—ด(optional)
5๏ธโƒฃ: ๋ˆ„์ ์„ ์‹œ์ž‘ํ•  ์ดˆ๊ธฐ ๊ฐ’(optional: ์ž…๋ ฅํ•˜์ง€ ์•Š์œผ๋ฉด ๋ฐฐ์—ด์˜ ์ฒซ๋ฒˆ์งธ ์›์†Œ)
```js
const arr = [1, 2, 3, 4, 5];
const result = arr.reduce((acc, cur, -idx, arr-) => acc + cur, -์ ์ง€ ์•Š์œผ๋ฉด 1-) 
console.log(result) // 15
```

๊ฐ’์„ ํ•ฉ์‚ฐํ•˜๋Š” ๊ฒƒ ๋ง๊ณ ๋„ ๋‹ค๋ฅธ ์šฉ๋„๋กœ ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ๋‹ค. 
>
#### ์ค‘์ฒฉ๋œ ๋ฐฐ์—ด ํ‰ํƒ„ํ™”
```js
const arr = [[1,2,3,4],[5,6,7,8]];
console.log(arr.reduce((acc, cur) => acc.concat(cur)))
// [1,2,3,4,5,6,7,8]
// initialValue ์ž…๋ ฅ x ๋”ฐ๋ผ์„œ ๋ฐฐ์—ด์˜ ์ฒซ ์›์†Œ์ธ [1,2,3,4].concat([5,6,7,8])์˜ ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜จ๋‹ค. 
```
#### ๋ฐฐ์—ด ๋‚ด์˜ ์›์†Œ ๊ฐฏ์ˆ˜ ํŒŒ์•…
```js
const arr = ['apple', 'banana', 'apple', 'mango', 'watermelon', 'apple'];
const fruit = arr.reduce((acc, cur) => {
  if(cur in acc) {
    acc[cur]++
  } else {
    acc[cur] = 1
  }
  return acc;
}, {})
console.log(fruit); // {apple: 3, banana: 1, mango: 1, watermelon: 1}
// ์ดˆ๊ธฐ๊ฐ’์œผ๋กœ ๋นˆ ๊ฐ์ฒด {}๋ฅผ ๋†“์€ ๋’ค ๊ฐ์ฒด์˜ ํ‚ค๊ฐ’์ด ์กด์žฌํ•˜์ง€ ์•Š๋Š”๋‹ค๋ฉด ๋“ฑ๋ก, ์•„๋‹ˆ๋ฉด ์ฆ๊ฐ€
```
#### ๋ฐฐ์—ด ๋‚ด ํŠน์ • ๊ฐ’ ํ˜น์€ ์†์„ฑ์œผ๋กœ ์ •๋ ฌ 
```js
const info = [
  {
    name: '์Šคํƒ€ํฌ',
    age: 52,
    union: 'avengers'
  },
  {
    name: '๋ฐฐ๋„ˆ',
    age: 50,
    union: 'avengers'
  },
  {
    name: 'ํ”ผํ„ฐ',
    age: 22,
    union: 'avengers'
  },
  {
    name: '์Šคํ‹ฐ๋ธŒ',
    age: 48,
    union: 'free'
  },
  {
    name: 'vision',
    age: '???',
    union: 'free'
  },
  {
    name: '์™„๋‹ค',
    age: 32,
    union: 'free'    
  }
]
>
const sorted = info.reduce((acc, cur) => {
  const key = cur['union']  // free or avengers
  if(!acc[key]) {
    acc[key] = []
  }
  acc[key].push(cur);
  return acc; // return ์žŠ์ง€ ๋ง์ž !!
}, {})
```
![](https://images.velog.io/images/ajrfyd/post/920b4030-a33a-443a-8f67-2a02791f7ea9/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-01-18%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.45.31.png)
์ฃผ์˜์‚ฌํ•ญโ—๏ธ
์œ„ ์ฝ”๋“œ์—์„œ if ๋‹ค์Œ else์— pushํ•˜๊ฒŒ ๋œ๋‹ค๋ฉด ์›ํ•˜๋Š” ๊ฒฐ๊ณผ๊ฐ€ ๋‚˜์˜ค์ง€ ์•Š๋Š”๋‹ค !!
#### ์ค‘๋ณต ๋ฐฐ์—ด ์›์†Œ ์ œ๊ฑฐ
```js
const arr = [1,1,1,22,2,2,3,3,3,34,5,5,];
const newArr = arr.sort((a, b) => a - b).reduce((acc, cur) => {
  const leng = acc.length;
  if(leng === 0 || acc[leng-1] !== cur) {
    acc.push(cur)
    }
  return acc;
}, [])
console.log(newArr) // [1, 2, 3, 5, 22, 34]
```
์ด์™€ ๊ฐ™์ด ๋‹ค์–‘ํ•˜๊ฒŒ ์“ฐ์ผ ์ˆ˜ ์žˆ๋‹ค. ์œ ์šฉํ•œ reduce ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์„ ๋ฐœ๊ฒฌํ•˜๊ฒŒ ๋˜๋ฉด ์ถ”๊ฐ€