Benchmark: js array copy speed comparison v2

Script Preparation code:

var arr = [1,2,3,4,5]

Tests:

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

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

Browser/OS: Chrome 108 on Windows

View result in a separate tab

Test name	Executions per second
map	12499494.0 Ops/sec
array.from	4883356.0 Ops/sec
for loop	1316301.6 Ops/sec
foreach	9252072.0 Ops/sec
slice	13990442.0 Ops/sec
spread	12614165.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript microbenchmarking test case on MeasureThat.net, which aims to measure the performance differences between various methods for creating a new array from an existing one. The test compares six different approaches: `map`, `array.from`, `for loop`, `foreach`, `slice`, and `spread`.

**Methods Compared**

1. **`map()`**: This method creates a new array by applying a provided function to each element of the original array.
2. **`array.from()`**: This method creates a new array from an existing iterable (such as an array).
3. **`for loop`**: This approach uses a traditional `for` loop to iterate over the elements of the original array and assign them to a new array.
4. **`foreach`**: This method is similar to the `for loop` but uses a more concise syntax to iterate over the elements of the original array.
5. **`slice()`**: This method creates a shallow copy of a portion of an array.
6. **`spread`** (using the spread operator `[]`): This method creates a new array by spreading the elements of the original array.

**Pros and Cons of Each Approach**

1. **`map()`**: Pros: concise, expressive, and efficient for small to medium-sized arrays. Cons: can be slower than other methods for very large arrays due to function call overhead.
2. **`array.from()`**: Pros: easy to use, efficient, and works well with modern browsers. Cons: may not work as expected if the original array is not iterable.
3. **`for loop`**: Pros: flexible, allows control over iteration order, and can be faster than other methods for very large arrays. Cons: more verbose and prone to errors due to manual iteration management.
4. **`foreach`**: Pros: concise, easy to read, and efficient for small to medium-sized arrays. Cons: not as widely supported as `for loop`, and may have performance issues with very large arrays.
5. **`slice()`**: Pros: fast, efficient, and works well for shallow copies of arrays. Cons: only creates a copy of the first `n` elements, where `n` is specified by the user.
6. **`spread`** (using the spread operator `[]`): Pros: concise, easy to use, and efficient for creating new arrays from existing ones. Cons: may have performance issues with very large arrays due to the creation of a new array.

**Library Used**

None of the methods listed above relies on any external libraries or dependencies.

**Special JS Features/Syntax**

* None mentioned in this explanation.
* However, note that some of these methods rely on modern JavaScript features such as `map()`, `array.from()`, and the spread operator (`[]`).

**Other Alternatives**

If you need to create a new array from an existing one, but none of the above methods are suitable for your use case, consider using other alternatives:

* **`reduce()`**: A method that applies a function to each element of an array, accumulating a result.
* **`concat()`**: A method that concatenates two or more arrays into a new array.
* **`Array.prototype.concat()`**: A static method on the `Array` prototype that concatenates multiple arrays into a new array.

In summary, when choosing a method for creating a new array from an existing one, consider factors such as performance requirements, code readability, and browser support. The methods listed above provide a good starting point for most use cases, but alternative approaches may be more suitable depending on your specific needs.

Related benchmarks:

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

Experimental features:

Fastest: N/A

Slowest: N/A

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