Benchmark: Chunk array from vs reduce vs for

Script Preparation code:

var elements = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
var size = 5;

Tests:

Array from
const result = Array.from({ length: Math.ceil(elements.length / size) }, (_, i) => elements.slice(i * size, (i + 1) * size));
reduce
const result = elements.reduce( (elems, elem, i) => i % size === 0 ? [...elems, [elem]]: [...elems.slice(0, -1), [...elems[elems.length - 1], elem]], [] );
for
const result = []; for (let i = 0; i < elements.length; ++i) { if (i % size === 0) result.push([elements[i]]); else result[result.length - 1].push(elements[i]); }
another for
const result = []; for (let i = 0; i < elements.length; ++i) { if (i % size === 0) result.push([]); result[result.length - 1].push(elements[i]); }
one more
const result = []; let index = -1; for (let i = 0; i < elements.length; ++i) { if (i % size === 0) { index += 1; result.push([elements[i]]); } else result[index].push(elements[i]); }
last for loop
const result = Array(Math.ceil(elements.length / size)).fill().map(() => Array(size)); let index = -1; let subIndex = 0; for (let i = 0; i < elements.length; ++i) { if (i % size === 0) { index++; subIndex = 0; } result[index][subIndex] = elements[i]; subIndex++; }
okay real last
const result = Array(Math.ceil(elements.length / size)).fill().map(() => Array(size)); for (let i = 0; i < elements.length; ++i) { result[Math.floor(i / size)][i % size] = elements[i]; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array from
reduce
for
another for
one more
last for loop
okay real last

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array from	1608014.4 Ops/sec
reduce	1112611.2 Ops/sec
for	685242.3 Ops/sec
another for	688655.2 Ops/sec
one more	681863.0 Ops/sec
last for loop	561855.3 Ops/sec
okay real last	378924.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Overview**

The provided JSON represents a benchmarking test that measures the performance of different approaches to chunk an array in chunks of a specified size (`size`). The test consists of six individual test cases, each using a distinct approach:

1. `Array.from()`
2. `reduce()`
3. `for` loop
4. `another for` loop (similar to the original one)
5. `one more` loop (with an additional variable `index`)
6. `last for loop` and `okay real last`

**Approach Options**

Here's a brief explanation of each approach:

1. **Array.from()**: This method creates a new array from an iterable, in this case, an object with a `length` property. It uses a technique called "array creation" to generate the chunks.
2. **reduce()**: The `reduce()` method applies a callback function to each element of the array, accumulating a value (in this case, an array of chunked elements). This approach uses a different technique than Array.from(), relying on the accumulator parameter.
3. **for` loop: A traditional for loop is used here, iterating over the original array and pushing elements into an existing chunk.
4. **another for` loop**: Similar to the original one, but with an additional variable `index` used to keep track of the current chunk.
5. **one more` loop: Another variation of the for loop approach, using an additional variable `index` to manage chunks.
6. **last for loop and okay real last**: Two variations of the traditional for loop approach, with some differences in how they handle edge cases.

**Performance Results**

The provided performance results show that each approach has its strengths and weaknesses:

* `Array.from()` seems to be the fastest approach, as expected, since it's a built-in method optimized for array creation.
* The two `for` loop variants (`first and last`) are relatively fast, but slower than Array.from(). This is because they rely on manual indexing and chunking, which can lead to more overhead.
* The two `another for` loops (`second and third`) have similar performance profiles, slightly slower than the first and last `for` loop variants. They use an additional variable to manage chunks, which might incur some extra cost.
* `reduce()` is slower than expected, likely due to the overhead of applying a callback function to each element.

**Key Takeaways**

1. **Array.from()** is generally the fastest approach for chunking arrays in JavaScript.
2. **For` loops can be competitive**, especially if you're familiar with their performance characteristics and use them efficiently (e.g., using indexes instead of manual chunking).
3. **Reduce()` is slower than expected, likely due to callback function overhead.

Keep in mind that these results might vary depending on your specific use case, array size, and JavaScript engine. Always benchmark your code and experiment with different approaches to find the best fit for your needs!

Related benchmarks:

Chunk array from vs reduce vs for (version: 0)

Comparing performance of: Array from vs reduce vs for vs another for vs one more vs last for loop vs okay real last

Created: one year ago by: Guest

Jump to the latest result

Array from

reduce

for

another for

one more

last for loop

okay real last

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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