Benchmark: js array copy speed comparison with spread operator

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: one year ago)

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

Browser/OS: Chrome 118 on Linux

View result in a separate tab

Test name	Executions per second
map	147229984.0 Ops/sec
array.from	18914318.0 Ops/sec
for loop	84501920.0 Ops/sec
foreach	56473748.0 Ops/sec
slice	246032336.0 Ops/sec
spread	144180560.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 on MeasureThat.net.

**Overview**

The provided JSON represents a benchmark definition for testing the speed of different methods to create a new array from an existing one in JavaScript. The benchmark consists of six test cases:

1. `map`
2. `array.from`
3. `for loop`
4. `foreach`
5. `slice`
6. `spread`

Each test case has a corresponding Benchmark Definition JSON that includes the script and HTML preparation codes, which are used to set up the benchmark.

**What is tested**

The benchmark tests the speed of creating a new array by applying different methods to an existing array:

* `map`: Creates a new array with the result of applying a callback function to each element of the original array.
* `array.from`: Creates a new array from an iterable, in this case, the original array.
* `for loop`: Loops through the elements of the original array and assigns each value to a new array.
* `foreach`: Loops through the elements of the original array using a foreach loop and pushes each value to a new array.
* `slice`: Creates a shallow copy of the original array, effectively creating a new array with references to the same elements as the original array.
* `spread`: Creates a new array by spreading the elements of the original array.

**Options compared**

The benchmark compares the speed of these different methods:

| Method | Description |
| --- | --- |
| `map` | Fast and concise way to create a new array by applying a callback function. |
| `array.from` | Efficient way to create a new array from an iterable, but may incur additional overhead for large arrays. |
| `for loop` | Basic way to iterate through the elements of an array and assign values to a new array, but can be slow due to overheads. |
| `foreach` | Similar to `for loop`, but uses a foreach loop, which can be slightly faster in some cases. |
| `slice` | Creates a shallow copy of the original array, which means it creates a new array with references to the same elements as the original array. |
| `spread` | Creates a new array by spreading the elements of the original array, which can be slower than other methods due to additional overheads. |

**Pros and Cons**

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

* `map`: Fast, concise, but may not be suitable for large arrays.
	+ Pros: Simple, fast.
	+ Cons: May not work with certain data types or use cases.
* `array.from`: Efficient, but may incur additional overhead for large arrays.
	+ Pros: Fast, efficient for large arrays.
	+ Cons: Additional overheads, may not work with all iterable types.
* `for loop`: Basic, slow due to overheads.
	+ Pros: Simple, basic understanding.
	+ Cons: Slow, may not be suitable for performance-critical code.
* `foreach` (same as `for loop`): Similar to `for loop`, but using a foreach loop.
	+ Pros: Slightly faster than `for loop`.
	+ Cons: Still slow due to overheads.
* `slice`: Creates a shallow copy of the original array, which can be slower than other methods.
	+ Pros: Fast, suitable for arrays that need to be modified later.
	+ Cons: Slower than other methods, creates a new array with references to the same elements as the original array.
* `spread`: Creates a new array by spreading the elements of the original array, which can be slower due to additional overheads.
	+ Pros: Fast, suitable for creating arrays from existing iterables.
	+ Cons: Slower than other methods, may incur additional overheads.

**Other considerations**

When choosing a method to create a new array, consider the following:

* Performance: If performance is critical, `array.from` or `map` might be a good choice. However, for large arrays, `slice` can still be a suitable option.
* Data type and use case: Some methods, like `map`, may not work with certain data types or use cases.
* Readability and maintainability: Consider the code readability and maintainability when choosing a method.

**Alternatives**

If you're looking for alternative methods to create new arrays in JavaScript, consider:

* Using libraries like Lodash or Ramda, which provide utility functions for array manipulation.
* Utilizing modern JavaScript features like `flat()` or `flatMap()`, which can simplify array creation and manipulation.
* Leveraging native methods like `JSON.parse()` or `Array.from()`, which can be faster than other methods in some cases.

Keep in mind that the best method for creating a new array depends on the specific use case, data type, and performance requirements.

Related benchmarks:

js array copy speed comparison with 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>

Experimental features:

Fastest: N/A

Slowest: N/A

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