Benchmark: js array copy speed comparison and spread operator

Tests:

map
const arr = Array.from({ length: 10_000 }, (_, i) => i) const newArr = arr.map(e=>e)
array.from
const arr = Array.from({ length: 10_000 }, (_, i) => i) const newArr = Array.from(arr)
for loop
const arr = Array.from({ length: 10_000 }, (_, i) => i) let newArr = []; for(let i = 0; i < arr.length; i++) { newArr[i] = arr[i]; }
foreach
const arr = Array.from({ length: 10_000 }, (_, i) => i) let newArr = [] arr.forEach(e => { newArr.push(e) })
slice
const arr = Array.from({ length: 10_000 }, (_, i) => i) const newArr = arr.slice()
spread
const arr = Array.from({ length: 10_000 }, (_, i) => i) const newArr = [...arr]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
map
array.from
for loop
foreach
slice
spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 145 on Windows

View result in a separate tab

Test name	Executions per second
map	2318.5 Ops/sec
array.from	2796.1 Ops/sec
for loop	2598.4 Ops/sec
foreach	2581.9 Ops/sec
slice	2766.9 Ops/sec
spread	2779.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of JavaScript microbenchmarks can be quite fascinating.

**Benchmark Overview**

The provided JSON represents a set of benchmark tests that compare the performance of different ways to create and manipulate arrays in JavaScript. The benchmarks are designed to measure the speed of various operations, including:

1. Creating an array from a specified length using `Array.from()`
2. Mapping over an array using the spread operator (`map`)
3. Iterating over an array using a `for` loop
4. Using the `forEach()` method to iterate over an array
5. Slicing an array using `slice()`

**Options Compared**

The benchmarks compare different approaches for creating and manipulating arrays, including:

1. **Array.from()**: Creates an array from a specified length.
2. **Map**: Applies a transformation function to each element of an array.
3. **For loop**: Iterates over an array using a traditional `for` loop.
4. **ForEach**: Iterates over an array using the `forEach()` method.
5. **Slice**: Creates a shallow copy of a portion of an array.

**Pros and Cons**

Here's a brief summary of the pros and cons for each approach:

1. **Array.from()**:
	* Pros: Efficient, readable, and concise.
	* Cons: May have performance overhead due to the creation of an intermediate array.
2. **Map**: 
	* Pros: Concise, expressive, and efficient.
	* Cons: May not be suitable for large datasets or complex transformations.
3. **For loop**:
	* Pros: Flexible, readable, and suitable for large datasets.
	* Cons: Inefficient due to the use of indexing and assignment statements.
4. **ForEach**: 
	* Pros: Concise, expressive, and efficient.
	* Cons: May not be suitable for large datasets or complex transformations.
5. **Slice**:
	* Pros: Efficient, readable, and concise.
	* Cons: May have performance overhead due to the creation of an intermediate array.

**Library/Feature Notes**

The benchmark tests do not explicitly mention any libraries, but they use some advanced JavaScript features, such as:

1. **Template literals**: Used in the `const newArr = arr.map(e => e)` line.
2. **Async/Await syntax**: Not used in this benchmark, but it's an interesting feature that allows for more readable asynchronous code.

**Other Considerations**

When writing microbenchmarks, consider the following best practices:

1. **Keep benchmarks simple and focused**: Avoid complex logic or external dependencies that can introduce variability.
2. **Use a consistent data set**: Use the same data set for all benchmark tests to ensure fair comparisons.
3. **Avoid using global variables**: Minimize the use of global variables to prevent external interference with your benchmark results.

**Alternative Benchmarking Approaches**

Some alternative benchmarking approaches include:

1. **Benchmarking frameworks**: Tools like Benchmark.js, Microbench, or jsperf can simplify and streamline benchmarking workflows.
2. **Multi-threaded benchmarks**: Testing multiple threads or processes simultaneously can provide a more comprehensive understanding of performance characteristics.
3. **Real-world scenarios**: Integrating your benchmarks with real-world code or scenarios to ensure that the results are relevant to actual use cases.

Keep in mind that these alternative approaches may require additional infrastructure, expertise, and resources compared to the simple benchmarking approach provided here.

Related benchmarks:

js array copy speed comparison and spread operator (version: 0)

Comparing performance of: map vs array.from vs for loop vs foreach vs slice vs spread

Created: one year ago by: Guest

Jump to the latest result

map

array.from

for loop

foreach

slice

spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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