Benchmark: js array copy performance

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()
dotdotdot
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
dotdotdot

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/119.0.0.0 Safari/537.36

Browser/OS: Chrome 119 on Windows

View result in a separate tab

Test name	Executions per second
map	151412640.0 Ops/sec
array.from	17581046.0 Ops/sec
for loop	74579272.0 Ops/sec
foreach	89876752.0 Ops/sec
slice	273978016.0 Ops/sec
dotdotdot	167063456.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**What is being tested?**

MeasureThat.net is testing the performance of different approaches for creating a new array from an existing array in JavaScript.

The benchmark tests six different methods:

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

**Options being compared**

Each of the above methods is compared to determine which one is the fastest in terms of executions per second.

**Pros and Cons of each approach:**

1. **map()**: Creates a new array by applying a transformation function to each element of the original array.
	* Pros: Easy to use, can be used for transformations beyond just copying data.
	* Cons: Requires creating a new array object, which can lead to memory allocation overhead.
2. **array.from()**: Creates a new array by converting an iterable object into an array.
	* Pros: Fast and efficient, creates a shallow copy of the original data.
	* Cons: May not be suitable for arrays with complex data structures.
3. **for` loop**: Loops through each element of the original array and assigns it to a new variable in the new array.
	* Pros: Can be used for more complex transformations or when working with large datasets.
	* Cons: Requires manual indexing and assignment, can lead to performance issues due to repeated work.
4. **forEach()` loop**: Loops through each element of the original array using an iterator function.
	* Pros: Similar to `for` loop but avoids index calculations.
	* Cons: May not be as efficient as other methods for creating new arrays.
5. **slice()**: Creates a shallow copy of the original array by returning a subset of its elements.
	* Pros: Fast and efficient, creates a shallow copy of the original data.
	* Cons: Returns a new array object with references to the same underlying data.
6. **Spread operator (`...`)**: Creates a new array by spreading the elements of an iterable object into an array.
	* Pros: Simple and concise syntax, creates a shallow copy of the original data.
	* Cons: May not be as efficient as other methods for large datasets.

**Library usage**

None of the provided benchmark definitions use any external libraries or frameworks.

**Special JavaScript features**

The spread operator (`...`) is a recent feature introduced in ECMAScript 2015 (ES6). The `array.from()` method was also introduced in ES6. The `forEach()` loop is a built-in method that has been available since JavaScript 1.0, but its usage as a benchmarking method is more modern.

**Other alternatives**

If the spread operator and `array.from()` are not considered, other approaches for creating new arrays include:

* Destructuring assignment
* `filter()`, `map()`, and `reduce()` methods in combination with an array constructor or `slice()`
* Using a library like Lodash to create a shallow copy of an array

However, these alternatives may introduce additional complexity, dependencies, or performance overhead compared to the methods being benchmarked.

Related benchmarks:

js array copy performance (version: 0)

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

Created: one year ago by: Guest

Jump to the latest result

map

array.from

for loop

foreach

slice

dotdotdot

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