Benchmark: Duplicate array for immutability (spread vs array.from vs map vs manually)

Script Preparation code:

var testData = []
for (let i = 0; i <= 100000; i++) {
	testData[i] = i
}

Tests:

Spread
let copy = [...testData]
Array.from
let copy = Array.from(testData)
Map
let copy = testData.map(item => item)
manual loop
let copy = [] for (let i = 0; i < testData.length; i++) { copy.push(testData[i]) }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Spread
Array.from
Map
manual loop

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and analyze the different test cases.

**What is being tested?**

The benchmark measures the performance of four different approaches to create a copy of an array in JavaScript:

1. **Spread operator (`...`)**: This method creates a new array by spreading the elements of the original array.
2. **`Array.from()` method**: This method creates a new array from an iterable (such as an array) or an array-like object.
3. **`map()` method**: This method creates a new array with the results of applying a provided function to each element in the original array.
4. **Manual loop**: A simple loop that pushes each element of the original array into a new array.

**Options compared**

The four test cases compare the performance of these different approaches in creating a copy of an array with 100,000 elements (the size specified in the `Script Preparation Code`).

**Pros and Cons**

1. **Spread operator (`...`)**:
	* Pros: Simple and concise, works well for small to medium-sized arrays.
	* Cons: May not be as efficient as other methods for large arrays, can cause performance issues if used excessively.
2. **`Array.from()` method**:
	* Pros: Can handle both primitive values and objects, works well with large arrays.
	* Cons: Requires creating an iterable (or array-like object) from the original data, which may add overhead.
3. **`map()` method**:
	* Pros: Can be used to perform transformations on each element of the array, can be useful in certain scenarios.
	* Cons: May not be as efficient as other methods for creating a simple copy of an array.
4. **Manual loop**:
	* Pros: Simple and lightweight, no additional dependencies required.
	* Cons: Can be slower than other methods due to the overhead of explicit loops.

**Libraries used**

None are explicitly mentioned in this benchmark.

**Special JS features/syntax**

The spread operator (`...`) is a relatively recent addition to JavaScript (introduced in ES6), and `Array.from()` was also introduced in ES6. The `map()` method has been around since the early days of JavaScript, but it's still widely used today for creating new arrays with transformations.

**Other alternatives**

For creating copies of large arrays or arrays with complex data structures, other methods like:

* Using `slice()` (a more traditional approach)
* Utilizing libraries like Lodash or Underscore.js
* Leveraging WebAssembly or other low-level optimizations

might be considered. However, these approaches are not covered in this specific benchmark.

Overall, the benchmark provides a simple and concise way to compare the performance of different methods for creating array copies in JavaScript.

Related benchmarks:

Duplicate array for immutability (spread vs array.from vs map vs manually) (version: 0)

Comparing performance of: Spread vs Array.from vs Map vs manual loop

Created: 5 years ago by: Guest

Jump to the latest result

Spread

Array.from

Map

manual loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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