Benchmark: js array copy speed comparison - spread - push

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]
push
const arr = [1,2,3,4,5] const newArr = [] for(let i = 0; i < arr.length; ++i) newArr.push(arr[i])

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 114 on Windows

View result in a separate tab

Test name	Executions per second
map	120866496.0 Ops/sec
array.from	10395477.0 Ops/sec
for loop	79732824.0 Ops/sec
foreach	68530104.0 Ops/sec
slice	225462512.0 Ops/sec
spread	126193040.0 Ops/sec
push	89669080.0 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 JSON represents a benchmarking test case on MeasureThat.net, which compares the performance of different methods to copy an array in JavaScript. The test creates a sample array and then uses various methods to create a new array with the same elements.

**Methods Compared**

The following methods are compared:

1. `map()`: Creates a new array by applying a provided function to each element of the original array.
2. `Array.from()`: Creates a new array from an iterable or an array-like object.
3. `for loop`: Iterates over the elements of the original array using a traditional `for` loop and assigns each element to a new array.
4. `forEach()`: Applies a provided function to each element of the original array.
5. `slice()`: Creates a shallow copy of a portion of an array.
6. Spread operator (`...`): Creates a new array by spreading the elements of the original array.

**Options Compared**

Each method has different options or variations that affect its performance:

* `map()` and `Array.from()`: Both methods can take an optional callback function, but `map()` is generally faster since it only needs to iterate over the elements once, while `Array.from()` may incur additional overhead due to the creation of an intermediate iterator.
* `for loop` and `forEach()`: Both methods have different performance characteristics. The `for loop` is typically faster since it avoids the function call overhead associated with `forEach()`. However, `forEach()` can be more efficient for very large arrays or when iterating over a large number of elements.
* `slice()`: This method creates a shallow copy of a portion of an array, which can affect its performance depending on the size of the array and the specific use case.

**Pros and Cons**

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

* `map()`:
	+ Pros: Fast, efficient, and flexible.
	+ Cons: May incur additional overhead due to function calls.
* `Array.from()`:
	+ Pros: Can be used with iterators or arrays-like objects.
	+ Cons: May incur additional overhead due to iterator creation.
* `for loop`:
	+ Pros: Fast, efficient, and avoids function call overhead.
	+ Cons: More verbose and error-prone.
* `forEach()`:
	+ Pros: Easy to use, flexible, and suitable for large arrays.
	+ Cons: May incur additional overhead due to function calls.
* `slice()`:
	+ Pros: Fast for shallow copies of small to medium-sized arrays.
	+ Cons: Can be slow for very large arrays or deep copies.

**Libraries Used**

There are no libraries explicitly mentioned in the benchmark, but some methods may rely on underlying libraries:

* `Array.from()` uses the `iterator` API.
* `map()` and `forEach()` use the `Function.prototype.apply()` method, which can invoke the `Array.prototype.forEach()` method internally.

**Special JS Features**

Some methods use special JavaScript features that may not be familiar to all developers:

* The spread operator (`...`) is a relatively new feature introduced in ECMAScript 2015.
* `Array.from()` uses an iterator API, which is also a relatively new feature.

In summary, the benchmark provides a comprehensive comparison of different methods for copying arrays in JavaScript. By understanding the pros and cons of each method, developers can make informed decisions about which approach to use depending on their specific use case and performance requirements.

Related benchmarks:

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

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

Created: one year ago by: Guest

Jump to the latest result

map

array.from

for loop

foreach

slice

spread

push

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