Benchmark: js array copy speed comparison

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 18 days ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_7_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/131.0.6778.103 Mobile/15E148 Safari/604.1

Browser/OS: Chrome Mobile iOS 131 on iOS 17.7.1

View result in a separate tab

Test name	Executions per second
map	21055548.0 Ops/sec
array.from	41795576.0 Ops/sec
for loop	62599604.0 Ops/sec
foreach	41307140.0 Ops/sec
slice	81699400.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the test cases and provide an explanation of what's being tested, the pros and cons of each approach, and other considerations.

The benchmark measures the speed of different JavaScript methods for creating a new array from an existing one:

1. `map()`: Creates a new array with the results of applying a provided function to every element in the original array.
2. `Array.from()`: Creates a new array populated from an array-like object.
3. A traditional `for` loop: Iterates over each element in the original array and assigns it to a new array.
4. `forEach()` with `push()`: Iterates over each element in the original array and pushes it onto a new array.

**Options Compared**

The benchmark compares these four methods for creating a new array:

* **map()**: A concise and expressive way to create a new array, but may be slower due to function call overhead.
* **Array.from()**: A more efficient way to create an array from an array-like object, but may not work with all types of data (e.g., objects).
* **Traditional `for` loop**: A low-level, manual approach that can be fast, but requires more code and is less readable.
* **`forEach()` with `push()`**: A combination of two methods: iterating over the array using `forEach()`, which is relatively efficient, and pushing elements onto a new array using `push()`. This method may have performance characteristics similar to `map()`.

**Pros and Cons**

1. **map()**:
	* Pros: Concise, expressive, easy to read.
	* Cons: May be slower due to function call overhead.
2. **Array.from()**:
	* Pros: Efficient for creating arrays from array-like objects, can work with various types of data.
	* Cons: May not work with all types of data (e.g., objects), requires the `from()` method.
3. **Traditional `for` loop**:
	* Pros: Fast, low-level control.
	* Cons: Requires more code, less readable.
4. **`forEach()` with `push()`**:
	* Pros: Can have performance characteristics similar to `map()`, uses a familiar pattern (forEach followed by an array operation).
	* Cons: Requires pushing elements onto a new array using `push()`, which may not be as efficient as other methods.

**Other Considerations**

* **Array-like objects**: The `Array.from()` method can work with various types of data, including arrays and objects. However, the benchmark does not test this aspect, only array-like objects.
* **Function call overhead**: The `map()` method involves a function call for each element in the original array, which may incur additional overhead compared to other methods.

**Alternatives**

If you're looking for alternative methods, consider:

1. `reduce()`: Can be used to create an array from a single value (e.g., `[...Array(5).keys()]`).
2. Spread operator (`...`): Can be used to spread elements of one array into another (`[...arr]`).

Note that the performance characteristics of these alternatives may differ from those mentioned above.

In summary, the benchmark provides a concise comparison of four common methods for creating new arrays in JavaScript. Understanding the pros and cons of each approach can help developers choose the most suitable method for their use case.

Related benchmarks:

js array copy speed comparison (version: 5)

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

Created: 6 years ago by: Registered User

Jump to the latest result

map

array.from

for loop

foreach

slice

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