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

slice

19.3M/s

array.from

17.1M/s

spread

16.5M/s

map

15.2M/s

for loop

8.4M/s

foreach

8.1M/s

View exact numbers

Test name	Executions per second
✓ slice	19,262,888 Ops/sec
array.from	17,057,162 Ops/sec
spread	16,527,863 Ops/sec
map	15,232,179 Ops/sec
for loop	8,373,602 Ops/sec
foreach	8,128,258 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.

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

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

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

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

Related benchmarks

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