JS Array loop performance - reduce() vs for-let vs forEach() vs for-of

js-array-loop-performance.js

(() => {
  const recursiveReduce = (array) => {
    return array.reduce(
      (obj, item) => {
        if (typeof item.value === 'object') 
          obj[item.key] = recursiveReduce(item.value)
        
        else 
          obj[item.key] = item.value
        
        return obj
      }, {})
  }

  const recursiveReduceLoop = (array) => {
    const result = {}
    for (let i = 0; i < array.length; i++) {
      if (typeof array[i].value === 'object') 
        result[array[i].key] = recursiveReduceLoop(array[i].value)
      
      else 
        result[array[i].key] = array[i].value
      
    }

    return result
  }

  const recursiveReduceForEach = (array) => {
    const result = {}

    array.forEach((item) => {
      if (typeof item.value === 'object') 
        result[item.key] = recursiveReduceForEach(item.value)
      
      else 
        result[item.key] = item.value
      
    })

    return result
  }

  const recursiveReduceForOf = (array) => {
    const result = {}

    for (const item of array) {
      if (typeof item.value === 'object') 
        result[item.key] = recursiveReduceForOf(item.value)
      
      else 
        result[item.key] = item.value
      
    }

    return result
  }

  const array = [
    { key: 'a', value: 1 },
    { key: 'b', value: 2 },
    { key: 'c', value: 3 },
    {
      key: 'd', value: [
        { key: 'e', value: 4 },
        { key: 'f', value: 5 },
        { key: 'g', value: 6 },
      ],
    },
  ]

  console.time('recursiveReduce')
  recursiveReduce(array)
  console.timeEnd('recursiveReduce')

  console.time('recursiveReduceLoop')
  recursiveReduceLoop(array)
  console.timeEnd('recursiveReduceLoop')

  console.time('recursiveReduceForEach')
  recursiveReduceForEach(array)
  console.timeEnd('recursiveReduceForEach')

  console.time('recursiveReduceForOf')
  recursiveReduceForOf(array)
  console.timeEnd('recursiveReduceForOf')
})()