JavaScript의 후드 아래에 있는 모든 고차 함수

forEach - (배열 요소당 한 번 함수 실행)

const forEach = (cb, array) => {
  for (let i = 0; i < array.length; i++) {
    cb(array[i], i, array)
  }
}

array.forEach(function(currentValue, index, arr), thisValue)

배열을 각각 조작하기 위해 콜백 함수를 사용하여 선언적으로 배열을 반복합니다. 두 번째 매개변수는 기본적으로 정의되지 않으며 값이 함수에 전달되면 this 값을 가져옵니다. 그러나 이것은 일반적으로 사용되지 않습니다.

map - (모든 배열 요소에 대한 함수 호출에서 새 배열 반환)

const map = (cb, array) => {
  const newArray = []
  for (let i = 0; i < array.length; i++) {
    newArray.push(cb(array[i], i, array))
  }
  return newArray
}

array.map(function(currentValue, index, arr), thisValue)

map과 forEach의 주요 차이점은 map은 새 배열을 반환하고 forEach는 undefined를 반환한다는 것입니다.

필터(함수에서 제공하는 테스트를 통과하는 요소로 채워진 새 배열 반환)

const filter = (cb, array) => {
  const newArray = []
  for (let i = 0; i < array.length; i++) {
    const element = array[i]
    if (cb(element, i, array)) newArray.push(element)
  }
  return newArray
}

array.filter(function(currentValue, index, arr), thisValue)

some(요구 사항을 충족하는 첫 번째 요소에 대해 true를 반환하고 그렇지 않으면 false를 반환함)

const some = (cb, array) => {
  for (let i = 0; i < array.length; i++) {
    if (cb(element, index, array)) return true
  }
  return false
}

array.some(function(currentValue, index, arr), thisValue)

every(요구 사항을 충족하지 못하는 첫 번째 요소에 대해 false를 반환합니다. 그렇지 않으면 true를 반환합니다.)

const every = (cb, array) => {
  for (let i = 0; i < array.length; i++) {
    if (!cb(element, index, array)) return false
  }
  return true
}

array.every(function(currentValue, index, arr), thisValue)

감소(메소드는 단일 값 반환: 함수의 누적 결과)

function reduce(array, cb, initialValue) {
  let i = 1
  let currentValue = array[0]

  if (arguments.length > 2) {
    currentValue = initialValue
    i = 0
  }
  for (; i < array.length; i++) { // i has already been created, hence the lonely semi colon
    currentValue = cb(currentValue, array[i], i, array)
  }
  return currentValue
}

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

후드 아래에서 매우 이상하게 보이지만 실제로는 하나의 값으로 전달된 것을 줄이는 것뿐입니다. 숫자, 배열, 객체 등이 될 수 있습니다. 두 번째 인수가 전달되지 않으면 배열의 첫 번째 인덱스에서 시작됩니다. 그렇지 않으면 통과한 항목에서 시작됩니다. 예를 들어:

let sum = [0, 1, 2, 3].reduce(function (previousValue, currentValue) {
  return previousValue + currentValue
}, 0)
// sum is 6

전달된 초기 값인 0을 취하고 첫 번째 인덱스를 추가합니다. 이 경우 숫자를 추가하기만 하면 되므로 initialValue를 전달할 필요가 없으며 하나의 작업을 절약할 수 있습니다. 객체를 사용하는 또 다른 예는 다음과 같습니다.

const names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']

let countedNames = names.reduce(function (allNames, name) {
  if (name in allNames) {
    allNames[name]++
  }
  else {
    allNames[name] = 1
  }
  return allNames
}, {})
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

이 예제는 배열을 통해 반복하고 이름이 개체의 키로 이미 존재하는지 확인합니다(초기 값은 결과를 저장할 빈 개체입니다). 이미 이름을 만든 경우 이름을 하나 더 추가합니다. 이것이 진정으로 이해되었는지 확인하는 마지막 예는 다음과 같습니다.

const numbers = [-5, 6, 2, 0,];

const doubledPositiveNumbers = numbers.reduce((previousValue, currentValue) => {
  if (currentValue > 0) {
    const doubled = currentValue * 2;
    previousValue.push(doubled);
  }
  return previousValue;
}, []);

console.log(doubledPositiveNumbers); // [12, 4]

이것은 필터와 고차 함수를 단일 감소 방법으로 결합하여 배열을 두 번 통과하는 것보다 훨씬 효율적입니다. reduceRight라는 또 다른 hof가 있으며 정확히 동일한 작업을 수행하지만 대신 오른쪽에서 왼쪽으로 이동합니다.

mdn에 리듀스에 들어가는 예제가 많으니 좀 더 복잡한 예제를 보고 싶다면 꼭 보시길 권합니다. 시간이 걸렸을 뿐만 아니라 JavaScript에 내장된 메서드에 감사하게 되었기 때문에 이것이 도움이 되었기를 바랍니다. 북마크하는 것을 잊지 마세요.