Benchmark: Array processing benchmark

Script Preparation code:

var arr = Array(10_000).fill(0)

Tests:

reduce with new array
arr.reduce((acc, x) => [...acc, x, x], [])
reduce with array mutation
arr.reduce((acc, x) => { acc.push(x); return acc; }, [])
reduce with array concat
arr.reduce((acc, x) => acc.concat(x), [])
for
const newArray = []; for (let i = 0; arr.length > i; i++) { newArray.push(arr[i]); }
for-of
const newArray = []; for (let x of arr) { newArray.push(x); }
map
arr.map(x => x);
forEach
const newArray = []; arr.forEach(x => newArray.push(x));
values (iterates over for-of)
const newArray = []; for (let x of arr.values()) { newArray.push(x); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
reduce with new array
reduce with array mutation
reduce with array concat
for
for-of
map
forEach
values (iterates over for-of)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36

Browser/OS: Chrome 102 on Windows

View result in a separate tab

Test name	Executions per second
reduce with new array	10.3 Ops/sec
reduce with array mutation	20414.3 Ops/sec
reduce with array concat	6.3 Ops/sec
for	720.2 Ops/sec
for-of	32640.4 Ops/sec
map	28712.2 Ops/sec
forEach	20057.6 Ops/sec
values (iterates over for-of)	32086.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Overview**

The provided benchmark, "Array processing benchmark," measures the performance of different approaches to process arrays in JavaScript. The test consists of six individual test cases:

1. `reduce` with new array
2. `reduce` with array mutation
3. `reduce` with array concat
4. For loop
5. For-of loop
6. Map

**Test Case Analysis**

Each test case has a unique approach to process the array, and the benchmark measures the performance of each approach.

* **`reduce` with new array**: This test creates a new array and pushes elements from the original array onto it using `push()`.
	+ Pros: Easy to understand and implement.
	+ Cons: Creates a new array, which can be memory-intensive for large arrays.
* **`reduce` with array mutation**: Similar to the previous one, but the `reduce()` method modifies the original array by appending elements to it directly.
	+ Pros: More efficient than creating a new array, as it only requires modifying the existing array.
	+ Cons: May cause issues if the array is large and needs to be preserved in its original state.
* **`reduce` with array concat**: This test uses `concat()` to concatenate arrays instead of pushing elements onto an array or directly modifying the array.
	+ Pros: More efficient than pushing elements onto an array, as it avoids the overhead of inserting elements into the array.
	+ Cons: May be slower for very large arrays due to the concatenation operation.
* **For loop**: This test uses a traditional `for` loop to iterate over the array and push elements onto a new array.
	+ Pros: Easy to understand and implement, especially for developers familiar with traditional loops.
	+ Cons: Can be slower than other approaches due to the overhead of explicit looping.
* **For-of loop**: Similar to the previous one, but uses a `for...of` loop instead.
	+ Pros: More concise and readable than traditional `for` loops.
	+ Cons: May not be as efficient for very large arrays, as it relies on iterators under the hood.
* **Map**: This test uses the `map()` method to create a new array with transformed elements from the original array.
	+ Pros: More efficient than other approaches that require explicit looping or concatenation.
	+ Cons: May not be suitable for all use cases, especially those requiring direct manipulation of individual elements.

**Library and Special Features**

* **Array.prototype.reduce()**: A built-in method for reducing arrays to a single value. Used in test case 1 and 2.
* **Array.prototype.push()**: A built-in method for adding elements to the end of an array. Used in test case 1.
* **Array.prototype.concat()**: A built-in method for concatenating arrays. Used in test case 3.
* **For loop** and **For-of loop**: Built-in looping constructs used in test cases 4 and 5.

**Other Alternatives**

If you're looking for alternative approaches to process arrays, consider the following:

1. **`forEach()`**: Similar to `for...of`, but without the iterator benefits. May not be suitable for very large arrays.
2. **`filter()`, `sort()`, and other array methods**: While these methods are useful, they may not provide the same performance as optimized approaches like `reduce()` or `map()`.
3. **Custom looping constructs**: Depending on your specific use case, you might be able to optimize your array processing using custom looping constructs, such as using `while` loops or recursive functions.

In conclusion, when it comes to processing arrays in JavaScript, the choice of approach depends on your specific requirements and constraints. Understanding the pros and cons of each method can help you make informed decisions about which approach to use for your particular use case.

Related benchmarks:

Array processing benchmark (version: 0)

Quick benchmark

Comparing performance of: reduce with new array vs reduce with array mutation vs reduce with array concat vs for vs for-of vs map vs forEach vs values (iterates over for-of)

Created: 2 years ago by: Guest

Jump to the latest result

reduce with new array

reduce with array mutation

reduce with array concat

for

for-of

map

forEach

values (iterates over for-of)

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