정보실

웹학교

정보실

javascript Array.reduce()를 이해하는 데 도움이 되는 3개의 간단한 스니펫! 🥳

본문

JS Array.reduce() 메소드를 둘러 보는 데 어려움이 있습니까?


https://dev.to/harrison_codes/3-simple-snippets-to-help-you-understand-array-reduce-1628 


그렇다면 걱정하지 마십시오. 혼자가 아닙니다. 어떤 이유로 든 reduce 방법은 많은 개발자가 클릭하는 데 시간이 걸리는 것 같습니다. 나는 이 보트에 직접 있었다. 다행히도 일단 문제를 해결하면 복잡하지 않습니다.


이 기사의 목표는 다음과 같습니다.

  1. 내가 생각하는 것을 .reduce()에 대해 생각하는 데 유용한 정신 모델이라고 제안하십시오.
  2. 이해를 강화하기 위한 일련의 사용 예 제공

정신 모델 


Reduce는 배열을 단일 값으로 줄이는 방법으로 종종 도입됩니다. 이것이 실제로 하는 일이지만, 이것이 어떻게 작동하는지 또는 내가 할 수 있는 일을 이해하는 데 특히 도움이 되지는 않았습니다.


저에게 .reduce()에 대해 생각하는 가장 간단한 방법은 .forEach()의 멋진 사례입니다. 필수 사항은 비슷합니다.

  • 콜백 함수를 제공합니다
  • 배열을 반복하고 배열 항목 당 한 번씩 콜백 함수를 실행합니다.

중요한 차이점은 .reduce()의 차이점입니다.

  • 콜백의 각 호출은 이전 호출의 반환 값 (또는 첫 번째 호출에서 제공 한 초기 값)을 인식합니다.
  • 배열에 더 이상 항목이 없으면 마지막 콜백 호출의 반환 값이 .reduce() 호출의 최종 결과로 반환됩니다.

실제로 .forEach() 주위에 슬림 래퍼를 사용하여 reduce 함수를 직접 구현할 수 있습니다.


const reduce = (array, callback, initialValue) => {
  // Originally stores the initialValue then updated
  // on each iteration with the return value of the callback.
  let previousReturnValue = initialValue

  // Iterate over the array items, updating the currentReturn value at each step.
  array.forEach((item, index) => {
    const result = callback(previousReturnValue, item, index, array)
    previousReturnValue = result;
  })

  // Return the final value once all array items have been iterated over
  return previousReturnValue
}


이제 .reduce()를 사용하는 몇 가지 예를 살펴보고 실행 경로를 단계별로 살펴 보겠습니다.


1. 숫자 배열 추가 


이 일반적인 예에서는 최종 합에 도달하기 위해 숫자 배열을 추가합니다.


const initialValue = 0

const numbersToAdd = [ 1, 2, 3, 4 ]

const addFunction = (runningTotal, numberToAdd) => {
  return runningTotal + numberToAdd;
}

const sum = numbersToAdd.reduce(addFunction, initialValue)

console.log(sum)
// => 10

// =======================================================

// How was this calculated? Lets step through it:

// The addFunction callback is invoked for each array item:

// -- FIRST CALLBACK INVOCATION -- 
// Array Item => 1
// Previous return value => first invocation (so the initialValue is used)
// Callback invocation => numbersToAdd(0, 1)
// Callback return value => 1

// -- SECOND CALLBACK INVOCATION --
// Array Item => 2
// Previous return value => 1
// Callback invocation => numbersToAdd(1, 2)
// Callback return value => 3

// -- THIRD CALLBACK INVOCATION --
// Array Item => 3
// Previous return value => 3
// Callback invocation => numbersToAdd(3, 3)
// Callback return value => 6

// -- FOURTH (AND LAST) CALLBACK INVOCATION --
// Array Item => 4
// Previous return value => 6
// Callback invocation => numbersToAdd(6, 4)
// Callback return value => 10

// Final Result: 10

2. 가장 큰 숫자 배열 찾기 


여기서는 reduce를 사용하여 배열의 최대 값을 찾습니다.


이것은 우리가 초기 값 인수를 .reduce()에 제공하지 않았기 때문에 약간 특별한 경우입니다. 

이 때문에 .reduce()는 첫 번째 배열 항목의 콜백을 건너 뛰고 대신 두 번째 배열 항목의 콜백 호출 초기 값으로 사용합니다.

const numbers = [ 10, 40, 4, 50, 101 ]

const findLarger = (currentMax, numberToCheck) => {
  if (numberToCheck > currentMax) {
    return numberToCheck;
  }
  return currentMax;
}

const largest = numbers.reduce(findLarger)

console.log(largest)
// => 101

// =======================================================

// How was this calculated? Lets step through it:

// The findLarger callback is invoked for each array item:

// -- FIRST CALLBACK INVOCATION -- 
// Array Item => 10
// Previous return value => first invocation, and no initialValue provided
// Callback invocation => Not Invoked
// Callback return value => N/A

// -- SECOND CALLBACK INVOCATION --
// Array Item => 40
// Previous return value => nothing, however first array item will be used as the initialValue
// Callback invocation => findLarger(10, 40)
// Callback return value => 40

// -- THIRD CALLBACK INVOCATION --
// Array Item => 4
// Previous return value => 40
// Callback invocation => findLarger(40, 4)
// Callback return value => 40

// -- FOURTH CALLBACK INVOCATION --
// Array Item => 50
// Previous return value => 40
// Callback invocation => findLarger(40, 50)
// Callback return value => 50

// -- FIFTH (AND LAST) CALLBACK INVOCATION --
// Array Item => 101
// Previous return value => 50
// Callback invocation => findLarger(50, 101)
// Callback return value => 101

// Final Result: 101


3. 배열을 짝수 / 홀수로 분류. 


물론 .reduce()의 콜백에서 숫자를 반환하도록 제한되지 않습니다. 원하는 것을 반환 할 수 있습니다. 이 경우 배열 값을 짝수 / 홀수 버킷으로 분류하는 객체를 반환합니다.


const initialValue = { even: [], odd: [] }

const numbersToCategorise = [1, 3, 4, 8, 10]

const categorisingReducer = (categories, numberToCategorise) => {
  const isEven = numberToCategorise % 2 === 0
  if (isEven) {
    categories.even.push(numberToCategorise)
  } else {
    categories.odd.push(numberToCategorise)
  }
  return categories
}

const categories = numbersToCategorise.reduce(categorisingReducer, initialValue)

console.log(categories)

//  => { even: [4, 8, 10], odd: [1, 3] }

// =======================================================

// How was this calculated? Again, lets step through it:

// The categorisingReducer callback is invoked for each array item:

// -- FIRST CALLBACK INVOCATION -- 
// Array Item => 1
// Previous return value => first invocation (so the initialValue is used)
// Callback invocation => categorisingReducer({ even: [], odd: [] }, 1)
// Callback return value => { even: [], odd: [1] }

// -- SECOND CALLBACK INVOCATION --
// Array Item => 3
// Previous return value => { even: [], odd: [1] }
// Callback invocation => categorisingReducer({ even: [], odd: [1] }, 3)
// Callback return value => { even: [], odd: [1, 3] }

// -- THIRD CALLBACK INVOCATION --
// Array Item => 4
// Previous return value => { even: [], odd: [1, 3] }
// Callback invocation => categorisingReducer({ even: [], odd: [1, 3] }, 4)
// Callback return value => { even: [4], odd: [1, 3] }

// -- FOURTH CALLBACK INVOCATION --
// Array Item => 8
// Previous return value => { even: [4], odd: [1, 3] }
// Callback invocation => categorisingReducer({ even: [4], odd: [1, 3] }, 8)
// Callback return value => { even: [4, 8], odd: [1, 3] }

// -- FIFTH (AND LAST) CALLBACK INVOCATION --
// Array Item => 10
// Previous return value => { even: [4, 8], odd: [1, 3] }
// Callback invocation => categorisingReducer({ even: [4, 8], odd: [1, 3] }, 10)
// Callback return value => { even: [4, 8, 10], odd: [1, 3] }

// Final Result: { even: [4, 8, 10], odd: [1, 3] }


이것이 유용했는지 또는 .reduce() 메소드에 대해 여전히 확실하지 않은 경우 의견에 알려주십시오!



페이지 정보

조회 58회 ]  작성일20-02-13 10:14

웹학교