Benchmark: Chunking array - MeasureThat.net

Script Preparation code:


function chunkReduce(array, size = 1) {
  return array.reduce((target, item, index) => {
    if (index % size === 0) {
      return [...target, [item]]
    }
    const last = target[target.length - 1]
    return [...target.slice(0, target.length - 1), [...last, item]]
  }, [])
}
function chunkReduce2(array, size = 1) {
  let key = -1
  return array.reduce((target, item, index) => {
    if (index % size === 0) {
      key++
      target[key] = []
    }
    target[key].push(item)
	return target
  }, [])
}
function chunkReduce3(array, size = 1) {
  let key = -1
  const length = array.length
  const target = []
  for (let index = 0; index < length; ++index) {
    const item = array[index]
    if (index % size === 0) {
      key++
      target[key] = []
    }
    target[key].push(item)
  }
  return target
}


function chunkWhile(array, size = 1) {
  var length = array == null ? 0 : array.length;
  if (!length || size < 1) {
    return [];
  }
  var index = 0,
      resIndex = 0,
      result = Array(Math.ceil(length / size));

  while (index < length) {
    result[resIndex++] = array.slice(index, (index += size));
  }
  return result;
}

Tests:

Using reduce
chunkReduce([1,2,3,4,5,6,7,8,9,1,0,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,7,14,6,4,56,4,5], 4)
Using while
chunkWhile([1,2,3,4,5,6,7,8,9,1,0,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,7,14,6,4,56,4,5], 4)
Using reduce 2 and push
chunkReduce2([1,2,3,4,5,6,7,8,9,1,0,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,7,14,6,4,56,4,5], 4)
Using for loop and push
chunkReduce3([1,2,3,4,5,6,7,8,9,1,0,2,3,4,5,6,7,8,9,10,1,2,3,4,5,6,7,8,9,7,14,6,4,56,4,5], 4)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using reduce
Using while
Using reduce 2 and push
Using for loop and push

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Browser/OS: Chrome 104 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Using reduce	476145.7 Ops/sec
Using while	2957182.2 Ops/sec
Using reduce 2 and push	4288938.0 Ops/sec
Using for loop and push	4927894.5 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):

LLMs can make mistakes. Check important info.

I'm ready to help you understand the JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The benchmark measures the performance of three different approaches for chunking an array: `reduce`, `while`, and two variations of `reduce` (`reduce2` and `for loop`). The chunking is done based on a specified size, which means dividing the input array into sub-arrays of that size.

**Options Compared**

1. **Reduce**: This approach uses the `Array.prototype.reduce()` method to iterate over the array and create chunks.
2. **While**: This approach uses a traditional `while` loop to iterate over the array and create chunks.
3. **Reduce 2 and Push**: This is a variation of the `reduce` approach that uses a different data structure (an object) to store the chunks instead of an array, and pushes elements onto it using the `[index] = []` syntax.
4. **For Loop and Push**: This approach uses a traditional `for` loop with a `push()` method to add elements to the chunk.

**Pros and Cons**

* **Reduce**:
	+ Pros: concise and elegant implementation
	+ Cons: may not be as efficient as other approaches due to overhead of function calls and object creation
* **While**:
	+ Pros: straightforward and easy to understand
	+ Cons: may require more manual memory management and loop logic
* **Reduce 2 and Push**:
	+ Pros: potentially more efficient than `reduce` due to better data structure choice
	+ Cons: may be less readable due to unconventional syntax
* **For Loop and Push**:
	+ Pros: straightforward and easy to understand, with minimal overhead
	+ Cons: may require more manual memory management and loop logic

**Library and Special JS Features**

No specific libraries are mentioned in the benchmark definition. However, some features used:

* `Array.prototype.reduce()` is a built-in JavaScript method.
* `[index] = []` syntax is a shorthand for creating a new object property on the fly.

**Other Considerations**

* The benchmark measures the performance of each approach based on the number of executions per second (ExecutionsPerSecond) on a specific browser and device platform.
* The results are likely influenced by factors such as:
	+ Browser optimization and caching
	+ Device platform-specific optimizations
	+ Input array size and chunk size

**Alternatives**

If you're looking for alternative approaches or libraries for chunking arrays, some options include:

* Using `Array.prototype.reduce()` with a different callback function signature (e.g., using `Object.values()` instead of `[index] = []`)
* Utilizing libraries like Lodash's `chunk` function or Underscore.js's `chunk` method
* Implementing your own custom chunking algorithm using a data structure like a binary search tree or a hash table

Keep in mind that the choice of approach depends on the specific requirements and constraints of your project.

Related benchmarks:

Chunking array (version: 0)

Comparing performance of: Using reduce vs Using while vs Using reduce 2 and push vs Using for loop and push

Created: 4 years ago by: Guest

Jump to the latest result

Using reduce

Using while

Using reduce 2 and push

Using for loop and push

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 2 months ago):