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

Historical Performance Data aggregated from 53 community runs

Desktop Results:

Chrome 36 runs

slice

97.4M/s

map

68.0M/s

foreach

49.6M/s

for loop

48.2M/s

array.from

11.0M/s

Fastest: slice (8.9x faster)

View exact numbers

✓ slice: 97,391,456 ops/sec
• map: 67,956,696 ops/sec
• foreach: 49,557,600 ops/sec
• for loop: 48,203,364 ops/sec
• array.from: 10,959,082 ops/sec

Firefox 12 runs

for loop

50.4M/s

slice

46.0M/s

foreach

38.2M/s

map

36.4M/s

array.from

11.3M/s

Fastest: for loop (4.5x faster)

View exact numbers

✓ for loop: 50,440,448 ops/sec
• slice: 46,025,112 ops/sec
• foreach: 38,183,432 ops/sec
• map: 36,362,968 ops/sec
• array.from: 11,250,797 ops/sec

Mobile Results:

Chrome 5 runs

slice

48.7M/s

map

32.8M/s

for loop

27.7M/s

foreach

23.7M/s

array.from

5.5M/s

Fastest: slice (8.9x faster)

View exact numbers

✓ slice: 48,662,300 ops/sec
• map: 32,773,860 ops/sec
• for loop: 27,746,090 ops/sec
• foreach: 23,709,188 ops/sec
• array.from: 5,486,037 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 9 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser/OS: Firefox 115 on Linux

View result in a separate tab

slice

14.8M/s

foreach

14.3M/s

for loop

13.2M/s

map

12.8M/s

array.from

5.5M/s

View exact numbers

Test name	Executions per second
✓ slice	14,801,551 Ops/sec
foreach	14,281,313 Ops/sec
for loop	13,241,525 Ops/sec
map	12,768,254 Ops/sec
array.from	5,497,972 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

js array copy speed comparison (version: 5)

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

Created: 8 years ago by: Registered User

Go to the latest result

map

array.from

for loop

foreach

slice

Historical Performance Data aggregated from 53 community runs

Desktop Results:

Chrome 36 runs

Firefox 12 runs

Mobile Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

js array copy speed comparison (version: 5)

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

Created: 8 years ago by: Registered User

Go to the latest result

map

array.from

for loop

foreach

slice

Historical Performance Data aggregated from 53 community runs

Desktop Results:

Chrome 36 runs

Firefox 12 runs

Mobile Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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