Benchmark: js array copy speed comparison - spread

Tests:

map
const arr = [1,2,3,4,5] const newArr = arr.map(e=>e)
array.from
const arr = [1,2,3,4,5] const newArr = Array.from(arr)
for loop
const arr = [1,2,3,4,5] let newArr = []; for(let i = 0; i < arr.length; i++) { newArr[i] = arr[i]; }
foreach
const arr = [1,2,3,4,5] let newArr = [] arr.forEach(e => { newArr.push(e) })
slice
const arr = [1,2,3,4,5] const newArr = arr.slice()
spread
const arr = [1,2,3,4,5] 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: 3 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser/OS: Chrome 134 on Linux

View result in a separate tab

Test name	Executions per second
map	15232179.0 Ops/sec
array.from	17057162.0 Ops/sec
for loop	8373601.5 Ops/sec
foreach	8128257.5 Ops/sec
slice	19262888.0 Ops/sec
spread	16527863.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Overview**

The test compares the performance of six different ways to create a new array from an existing one in JavaScript:

1. `map()`
2. `Array.from()`
3. For loop
4. `forEach()`
5. `slice()`
6. Spread operator (`...`)

**Options Compared**

Each option is compared in terms of its execution speed, with the goal of determining which method is the fastest.

**Pros and Cons of Each Approach**

1. **map():**
	* Pros: concise, easy to read, and often used for transformations.
	* Cons: can be slower due to the creation of a new array and the overhead of function calls.
2. **Array.from():**
	* Pros: modern and widely supported, allows for more control over the array creation process.
	* Cons: may have slower performance compared to other methods, especially for large arrays.
3. **For loop:**
	* Pros: can be optimized for performance by reusing the same variable and avoiding unnecessary function calls.
	* Cons: less concise and harder to read than other options.
4. **forEach():**
	* Pros: similar to map() but without the creation of a new array, which can improve performance.
	* Cons: not as widely supported or well-known as map().
5. **slice():**
	* Pros: creates a shallow copy of the original array, which can be useful in some cases.
	* Cons: may have slower performance compared to other methods due to the creation of a new array.
6. **Spread operator (`...`):**
	* Pros: concise and easy to read, allows for more flexibility when working with arrays.
	* Cons: relatively new feature, not all browsers support it.

**Library and Its Purpose**

None of the libraries are explicitly mentioned in the provided information. However, `Array.from()` is a built-in method that was introduced in ECMAScript 2015 (ES6).

**Special JS Features or Syntax**

The spread operator (`...`) is used to create a new array from an existing one.

**Benchmark Results**

The latest benchmark results show the execution speed of each option for the given test case. The browser and device platform are Opera 98 on Windows, with an average execution speed of:

1. `map()`: 80979136 executions per second
2. `Array.from()`: 8189305 executions per second
3. Spread operator (`...`): 43579192 executions per second
4. `forEach()`: 42868856 executions per second
5. For loop: 68669208 executions per second
6. `slice()`: 112151200 executions per second

**Other Alternatives**

Some alternative methods for creating a new array from an existing one include:

1. `concat()`: creates a new array by concatenating two or more arrays.
2. `reduce()`: can be used to create a new array, although it's not as concise or efficient as the other options.

Keep in mind that these alternatives may have different performance characteristics and use cases compared to the methods being tested in this benchmark.

Related benchmarks:

js array copy speed comparison - spread (version: 0)

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

Created: 2 years 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):