Benchmark: shallow clone array

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Tests:

Splice
const testArray = [1, 2, 3]; const newTestArray = testArray.splice(0);
Slice
const testArray = [1, 2, 3]; const newTestArray = testArray.slice();
Concat
const testArray = [1, 2, 3]; const newTestArray = testArray.concat();
Spread
const testArray = [1, 2, 3]; const newTestArray = [...testArray];
For-i
const testArray = [1, 2, 3]; const newTestArray = []; for (let i = 0; i < testArray.length; i++) { newTestArray[i] = testArray[i]; }
For-of
const testArray = [1, 2, 3]; const newTestArray = []; for (const value of testArray) { newTestArray[i] = value; }
While
const testArray = [1, 2, 3]; const newTestArray = []; let i = -1; while (++i < testArray.length) { newTestArray[i] = testArray[i]; }
From
const testArray = [1, 2, 3]; const newTestArray = Array.from(testArray);
Lodash
const testArray = [1, 2, 3]; const newTestArray = _.clone(testArray);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Splice
Slice
Concat
Spread
For-i
For-of
While
From
Lodash

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0

Browser/OS: Firefox 88 on Windows

View result in a separate tab

Test name	Executions per second
Splice	1898727.8 Ops/sec
Slice	2199324.2 Ops/sec
Concat	485393.2 Ops/sec
Spread	343448.9 Ops/sec
For-i	1242749.8 Ops/sec
For-of	313674.2 Ops/sec
While	1336502.6 Ops/sec
From	204004.8 Ops/sec
Lodash	550678.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring the performance of different JavaScript methods for cloning arrays is an essential task, especially in modern web development where array manipulation is common.

**Overview of Tested Methods**

The benchmark tests six different approaches to clone an array:

1. **Splice**: Removing elements from the original array and returning a new array with the same elements.
2. **Slice**: Creating a shallow copy of the original array using the `slice()` method.
3. **Concat**: Concatenating an empty array with the original array to create a new array.
4. **Spread**: Using the spread operator (`...`) to create a new array from the original array.
5. **For-i**: Iterating over the original array's indices and assigning values to a new array using a `for` loop.
6. **For-of**: Iterating over the original array's elements using a `for...of` loop.

**Pros and Cons of Each Approach**

1. **Splice**: This method is simple but has the disadvantage of modifying the original array, which may affect other parts of the code that rely on its integrity.
2. **Slice**: Creating a shallow copy of the array is efficient and widely supported. However, it does not create a deep copy, which might be undesirable for objects within the array.
3. **Concat**: This method creates a new array by concatenating an empty array with the original one, resulting in a new object that consumes more memory than necessary. It also modifies the original array.
4. **Spread**: The spread operator is concise and efficient but may not work as expected if the array contains non-primitive values (e.g., objects).
5. **For-i**: This method can be slow due to the use of a `for` loop, which iterates over indices instead of values.
6. **For-of**: Similar to `For-i`, this method uses a `for...of` loop but is generally faster and more memory-efficient.

**Other Considerations**

*   For arrays containing only primitive values (e.g., numbers, strings), all methods are relatively fast and efficient.
*   For arrays with nested objects or other complex data structures, using the spread operator or `slice()` method can lead to performance issues due to unnecessary object creations.
*   When working with large datasets, caching the results of array cloning operations can help improve performance.

**Conclusion**

The choice of array cloning method depends on the specific requirements and constraints of your project. If you need a simple, widely supported solution, `slice()` or the spread operator might be suitable. For more complex data structures or high-performance scenarios, considering alternative methods like using `Array.prototype.map()` or implementing a custom cloning function could provide better results.

It's also worth noting that modern JavaScript engines have significant optimizations for array operations, which can impact performance in unexpected ways. Therefore, experimenting with different approaches and profiling the code can help you find the most efficient method for your specific use case.

Related benchmarks:

shallow clone array (version: 0)

Comparing performance of: Splice vs Slice vs Concat vs Spread vs For-i vs For-of vs While vs From vs Lodash

Created: 3 years ago by: Guest

Jump to the latest result

Splice

Slice

Concat

Spread

For-i

For-of

While

From

Lodash

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