10가지 예제로 Javascript Reduce 방법 배우기

reduce 메서드는 배열의 모든 항목에 함수를 적용하고 시작점에서 반복적으로 결과를 누적한 다음 단일 값/객체를 반환합니다.



이 시작 값을 지정할 수 있으며, 그렇지 않은 경우 배열의 첫 번째 항목을 사용합니다.

이러한 예제의 대부분은 문제에 대한 아이디어 솔루션이 아닐 수도 있지만 아이디어는 문제를 해결하기 위해 reduce를 사용하는 방법을 설명하는 것입니다.

좋아 시작하자.

합산과 곱셈:

∑그리고 ∏
\sum 및\prod
∑그리고 ∏

// Summation
[3, 5, 4, 3, 6, 2, 3, 4].reduce((a, i) => a + i);

// Without initial value
[3, 5, 4, 3, 6, 2, 3, 4].reduce((a, i) => a + i, 5 );

// For clarity the above code is the same as 
[3, 5, 4, 3, 6, 2, 3, 4].reduce(function(a, i){return (a + i)}, 0 );

// Multiplication
[3, 5, 4, 3, 6, 2, 3, 4].reduce((a, i) => a * i);

이 예에서는 배열의 첫 번째 항목을 가져오기 때문에 초기 값을 그대로 둘 수 있지만, 오프셋이나 편향을 매우 유용하게 사용할 수도 있습니다.

배열에서 최대값 찾기:

[3, 5, 4, 3, 6, 2, 3, 4].reduce((a, i) => Math.max(a, i), -Infinity);

여기에서 각 반복에서 누산기와 현재 항목 사이의 최대값을 반환하고 결국 전체 배열의 최대값을 얻습니다.
실제로 배열에서 최대값을 찾으려면 이것을 사용하지 마십시오. 다음을 사용할 수 있습니다.

Math.max(...[3, 5, 4, 3, 6, 2, 3, 4]);

고르지 않은 배열 연결

let data = [
  ["The","red", "horse"],
  ["Plane","over","the","ocean"],
  ["Chocolate","ice","cream","is","awesome"], 
  ["this","is","a","long","sentence"]
]
let dataConcat = data.map(item=>item.reduce((a,i)=>`${a} ${i}`))

// Result
['The red horse', 
'Plane over the ocean', 
'Chocolate ice cream is awesome', 
'this is a long sentence']

아주 간단합니다. 여기에서도 맵을 사용하여 배열의 각 항목을 살펴보고 모든 배열에 대해 축소를 수행하고 배열을 단일 문자열로 축소합니다.

배열에서 중복 제거:

let dupes = [1,2,3,'a','a','f',3,4,2,'d','d']
let withOutDupes = dupes.reduce((noDupes, curVal) => {
  if (noDupes.indexOf(curVal) === -1) { noDupes.push(curVal) }
  return noDupes
}, [])

현재 값에 누적기 배열에 대한 인덱스가 있는지 확인하지 않으면 -1을 반환하므로 배열에 없으므로 추가할 수 있습니다.
기본적으로 고유한 값만 저장하기 때문에 javascript set 이 작업을 훨씬 더 잘 수행할 수 있지만 어느 쪽이든 생각할 수 있는 깔끔한 알고리즘이라고 생각합니다.

괄호 확인

[..."(())()(()())"].reduce((a,i)=> i==='('?a+1:a-1,0);

//Long way with for loop
status=0
for i in string:
  if(i=="("):
    status=status+1
  elif(i==")"):
    status=status-1     
  if(status<0):
    return False

이것은 내가 얼마 전에 했던 코딩 챌린지에서 채택한 멋진 것입니다.
장기적으로 우리는 어떤 지점에서 상태가 0보다 작은지 확인함으로써 루프를 더 빨리 끝낼 수 있습니다.
여기서 조건은 상태가 0이면 괄호가 정확하지 않으면 불균형이 있다는 것입니다.

속성별로 그룹화

let obj = [
  {name: 'Alice', job: 'Data Analyst', country: 'AU'},
  {name: 'Bob', job: 'Pilot', country: 'US'},
  {name: 'Lewis', job: 'Pilot', country: 'US'},
  {name: 'Karen', job: 'Software Eng', country: 'CA'},
  {name: 'Jona', job: 'Painter', country: 'CA'},
  {name: 'Jeremy', job: 'Artist', country: 'SP'},
]
let ppl = obj.reduce((group, curP) => {
  let newkey = curP['country']
  if(!group[newkey]){
    group[newkey]=[]
  }
  group[newkey].push(curP)
  return group
}, [])

여기서 우리는 국가 키로 객체의 첫 번째 배열을 그룹화합니다. 각 반복에서 키가 없는지 확인하여 배열을 만든 다음 현재 사람을 여기에 추가하고 그룹 배열을 반환합니다.
이것을 사용하여 지정된 키로 개체를 그룹화하는 기능을 만들 수 있습니다.

배열 배열을 병합했습니다.

let flattened = [[3, 4, 5], [2, 5, 3], [4, 5, 6]].reduce(
  (singleArr, nextArray) => singleArr.concat(nextArray), [])
// results is [3, 4, 5, 2, 5, 3, 4, 5, 6]

이것은 깊이가 1 수준에 불과하지만 재귀 함수로 이것을 조정할 수 있지만 자바 스크립트에서 재귀를 만드는 팬은 아닙니다 😂
이 작업을 수행하는 의도된 방법은 .flat 메서드를 사용하는 것입니다. 동일한 작업을 수행합니다.

[ [3, 4, 5],
  [2, 5, 3],
  [4, 5, 6]
].flat();

양수만 거듭제곱

[-3, 4, 7, 2, 4].reduce((acc, cur) => {
  if (cur> 0) {
    let R = cur**2;
    acc.push(R);
  }
  return acc;
}, []);

// Result
[16, 49, 4, 144]

이것은 지도와 필터를 동시에 수행하는 것과 같습니다. 음수를 필터링하고 양수를 증가시킵니다.

문자열 반전

const reverseStr = str=>[...str].reduce((a,v)=>v+a)

이것은 문자열뿐만 아니라 모든 객체에서 작동합니다. 또한 이 구문을 사용하면 함수에 reduce가 있으므로 reverseStr("Hola")을 호출하면 aloH가 제공됩니다. 😂

이진수에서 십진수로

const bin2dec = str=>[...String(str)].reduce((acc,cur)=>+cur+acc*2,0)

// Long format for readability
const bin2dec = (str) => {
  return [...String(str)].reduce((acc,cur)=>{
    return +cur+acc*2
  },0)
}

이것을 설명하기 위해 예를 볼 수 있습니다.
(10111)->1+(1+(1+(0+(1+0*2)*2)*2)*2)*2
이것은 설명하기 약간 다르지만 첫 번째 실행이 중앙에 있고 중앙에서 바깥쪽으로 확장되는 것처럼 생각하십시오.

팔로우를 해주시면 감사하겠습니다. 여기서 더 많은 콘텐츠를 만들 계획입니다. 시간이 있으면 내 YouTube 채널을 확인하세요.

이제 여러분이 이제 정확한 문제에 대한 올바른 도구를 선택하는 것을 더 잘 이해하기를 바랍니다.

언젠가 여러분도 리듀스를 멋지게 사용하고 스스로에 대해 기분 좋은 날이 되길 바랍니다 😂

덕분에
이 마지막 2