자바스크립트 - 재귀 함수로 맵 작성하기

지도 기능

map 함수는 아마도 자바스크립트에서 가장 중요한 배열 메소드 중 하나일 것입니다. 특히 React 코드를 자주 작성하는 경우라면 더욱 그렇습니다. Map이 하는 일은 배열의 각 항목에 대해 실행되는 함수를 취하여 각 함수 실행의 반환 값의 새 배열을 반환하는 것입니다.

const myArray = [1,2,3,4,5]

const newArray = myArray.map(arrayItem => arrayItem + 1)

console.log(newArray) // [2,3,4,5,6]

그래서 여기에서 map 메소드를 사용하여 새 배열을 생성하여 반환합니다. 배열 + 1에서 현재 항목을 반환하는 함수를 전달하여 모든 값이 1씩 증가하는 새 배열이 생성됩니다.

어떻게 작동합니까? map 함수를 독립형 함수로 다시 작성해 봅시다.

const map = (arr, callback) => {

  //create a new array
  const newArray = []

  //loop over the array passed to the function
  for (let index = 0; index < arr.length; index += 1){
    //Push the result of the callback into the new array
    newArray.push(callback(arr[index], index))
  }

  //after done looping, return the resulting array
  return newArray

}

이것이 지도가 후드 아래에서 작동하는 방식입니다. 이와 같이 다른 기능을 취하고 이를 향상시키는 기능을 일반적으로 고차 기능이라고 합니다. 고차 함수를 다양한 방식으로 사용하기 위해 여러 헤드가 있는 진공처럼 전달된 함수에 따라 다양한 작업을 수행할 수 있는 함수로 생각하십시오.

재귀 함수

재귀 함수는 정의에서 스스로를 호출하는 함수로, 처음 봤을 때 상당히 혼란스러울 수 있습니다. 재귀 함수는 루프처럼 사용할 수 있으며 특정 상황에서 데이터 구조와 같은 트리의 경우 특정 솔루션을 더 쉽게 또는 가능하게 만드는 데 도움이 될 수 있습니다. 이를 설명하기 위해 map 함수를 재귀 함수로 변환해 보겠습니다.

const map = (oldArray, callback, newArray = []) => {

    //base case: check if there are any items left in the original array to process
    if (oldArray.length <= 0){
      //if all items have been processed return the new array
      return newArray
    } else {
      //destructure the first item from old array and put remaining in a separate array
      const [item, ...theRest] = oldArray
      // create an array of the current new array and the result of the current item and the callback function
      const interimArray = [...newArray, callback(item)]
      // return a recursive call to to map to process the next item.
      return map(theRest, callback, interimArray)
    }

  }

  console.log(map([1,2,3,4,5,6], x => x+1))

따라서 재귀 함수는 항상 기본 사례를 확인하는 것으로 시작해야 합니다.

기본 사례는 함수가 값을 반환하는 조건입니다. 이 기본 사례가 충족되지 않으면 일부 작업을 수행한 다음 자신에 대한 재귀 호출을 반환합니다.

따라서 전달된 oldArray에 요소가 없으면 모든 요소가 처리되었으므로 newArray가 반환되어야 함을 의미합니다

.

배열에 요소가 있으면 다음 요소를 처리하고 새 배열을 업데이트하고 나머지 배열과 업데이트된 newArray를 반환되는 재귀 호출로 전달합니다(재귀 호출을 반환해야 함). 참고 어레이를 분해하기 위해 어레이 구조화를 사용하고 있습니다.

기본 사례가 충족되면 그 이전의 모든 재귀 호출에 대한 반환 값이 되는 newArray가 반환됩니다.

자, 이것이 배열 맵 함수를 재귀 함수로 바꾸는 방법입니다!