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

Array from

1.6M/s

reduce

1.1M/s

another for

689K/s

for

685K/s

one more

682K/s

last for loop

562K/s

okay real last

379K/s

View exact numbers

Test name	Executions per second
✓ Array from	1,608,014 Ops/sec
reduce	1,112,611 Ops/sec
another for	688,655 Ops/sec
for	685,242 Ops/sec
one more	681,863 Ops/sec
last for loop	561,855 Ops/sec
okay real last	378,925 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!

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: 2 years ago by: Guest

Go 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):

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: 2 years ago by: Guest

Go 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):

Related benchmarks

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