Benchmark: js array copy speed comparison v3

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()
slice(0)
const arr = [1,2,3,4,5] const newArr = arr.slice(0)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Browser/OS: Chrome 114 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
map	82222264.0 Ops/sec
array.from	14852244.0 Ops/sec
for loop	67716352.0 Ops/sec
foreach	71022856.0 Ops/sec
slice	176373568.0 Ops/sec
slice(0)	184637504.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!

**Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided JSON represents a benchmark with six individual test cases, each testing a different approach for copying an array.

**Benchmark Definition**

The benchmark definition is a JSON object that describes the experiment:

* `Name`: A unique name for the benchmark.
* `Description`: An optional description of the benchmark (none in this case).
* `Script Preparation Code` and `Html Preparation Code`: These fields are empty, suggesting that no specific code needs to be prepared or rendered before running the benchmark.

**Test Cases**

Each test case is represented by a JSON object with the following properties:

* `Benchmark Definition`: A string containing the JavaScript code for the test case.
* `Test Name`: The name of the test case.

Let's analyze each test case:

1. **map**: Tests the `map()` method, which creates a new array with the results of applying a provided function to each element in the original array.
	+ Pros: Concise and efficient; easy to read and maintain.
	+ Cons: May not be suitable for very large arrays due to memory overhead.
2. **array.from**: Tests the `Array.from()` method, which creates a new array from an iterable (such as another array or an array-like object).
	+ Pros: Fast and efficient, especially for large arrays; works with various types of iterables.
	+ Cons: May not be suitable for very large arrays due to memory overhead.
3. **for loop**: Tests a traditional `for` loop to iterate over the elements of an array and copy them to a new array.
	+ Pros: Well-established and widely supported; no external libraries required.
	+ Cons: May be slower than other methods, especially for very large arrays or modern browsers.
4. **foreach**: Tests the `forEach()` method, which executes a provided function for each element in an array without returning any value.
	+ Pros: Concise and efficient; easy to read and maintain.
	+ Cons: May not be suitable for very large arrays due to memory overhead.
5. **slice**: Tests the `slice()` method, which returns a shallow copy of a portion of an array.
	+ Pros: Fast and efficient; works with various types of arrays.
	+ Cons: Returns a new array object, which may incur memory overhead.
6. **slice(0)**: A specific test case that creates a shallow copy of the entire original array using `slice()`.
	+ Pros: Works with all arrays; returns a new array object.
	+ Cons: May incur significant memory overhead for very large arrays.

**Libraries and Special Features**

* `Array.from()` uses the `Iterable` API, which is a modern feature introduced in ECMAScript 2015 (ES6). This allows for more flexible and efficient iteration over various types of iterables.
* No specific libraries are mentioned, but `Array.from()` relies on the `Iterable` API.

**Other Alternatives**

In addition to the methods tested by this benchmark, other approaches for copying arrays include:

* Using `reduce()`: While not shown in this benchmark, `reduce()` can be used to create a new array by iterating over the elements of an original array.
* Using `concat()`: This method returns a new array containing all elements from both arrays; it may incur significant memory overhead if used with large arrays.
* Using `Splice()`: This method modifies the original array and returns a modified array object; it may not be suitable for creating a new, independent copy of an array.

Keep in mind that this benchmark is focused on measuring the performance of specific methods for copying arrays. Other approaches may have different trade-offs regarding memory usage, readability, and maintainability.

Related benchmarks:

js array copy speed comparison v3 (version: 0)

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

Created: one year ago by: Guest

Jump to the latest result

map

array.from

for loop

foreach

slice

slice(0)

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