Benchmark: Cloning an array

Script Preparation code:

var array = [];
for (let m = 0; m < 40; m++) {
  array.push(m);
}

Tests:

Using array slice
let clone = array.slice();
Using array spread
let clone = [...array];
Using array push and spread
let clone = []; clone.push(...array);
Using for loop and push
let clone = []; for (let i = 0; i < array.length; i++) { clone.push(array[i]); }
Using array concat
let clone = [].concat(array);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using array slice
Using array spread
Using array push and spread
Using for loop and push
Using array concat

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 111 on Windows

View result in a separate tab

Test name	Executions per second
Using array slice	14033803.0 Ops/sec
Using array spread	2267991.0 Ops/sec
Using array push and spread	3965722.5 Ops/sec
Using for loop and push	4719972.0 Ops/sec
Using array concat	3480998.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what's being tested.

**Benchmark Definition**

The benchmark is designed to measure the performance of cloning an array with 40 items. The script preparation code creates an empty array and populates it with numbers from 0 to 39 using a `for` loop. The resulting array is then used as input for each test case.

**Test Cases**

There are four test cases, each attempting to clone the array using a different approach:

1. **Using array slice**: `let clone = array.slice();`
2. **Using array spread**: `let clone = [...array];`
3. **Using array push and spread**: `let clone = [];\r\nclone.push(...array);`
4. **Using for loop and push**: `let clone = [];\r\nfor (let i = 0; i < array.length; i++) {\r\n  clone.push(array[i]);\r\n}`
5. **Using array concat**: `let clone = [].concat(array);`

Each test case is executed multiple times, and the results are stored in a raw UA string, which represents the user agent (UA) of the browser running the benchmark.

**Options Compared**

The different approaches for cloning the array can be summarized as follows:

* **Slice**: Creates a shallow copy of the original array.
* **Spread**: Creates a deep copy of the original array by spreading its elements into a new array.
* **Push and spread**: Creates a new array by pushing each element from the original array using the spread operator.
* **For loop and push**: Iterates over the elements of the original array, pushing them into a new array one by one.

**Pros and Cons**

Here's a brief analysis of the pros and cons of each approach:

* **Slice**: Pros: Simple to implement, creates a shallow copy. Cons: May not be suitable for large arrays or objects with complex relationships.
* **Spread**: Pros: Creates a deep copy, suitable for large arrays or objects. Cons: May have performance implications due to the creation of a new array.
* **Push and spread**: Pros: Efficiently creates a new array by pushing elements one by one. Cons: May not be as readable or maintainable as other approaches.
* **For loop and push**: Pros: Can be used for any type of data, including objects with complex relationships. Cons: May have performance implications due to the iteration over the original array.

**Library Considerations**

The test cases do not explicitly mention any libraries being used beyond JavaScript's built-in features. However, if we consider external libraries or frameworks that might be used in real-world scenarios, some examples include:

* Lodash: A popular library providing utility functions for array manipulation, including `slice()` and `concat()`.
* Array.prototype.slice(): A method implemented by the JavaScript standard library to create a shallow copy of an array.
* Spread syntax (`...`): Introduced in ECMAScript 2015 (ES6), it allows for creating new arrays from existing ones.

**Special JS Features or Syntax**

The benchmark does not explicitly mention any special JavaScript features or syntax beyond those introduced by ES6. However, if we consider more advanced concepts like generators, async/await, or typed arrays, they might be relevant in a real-world scenario.

Now that we've broken down the provided information, let's discuss other alternatives for benchmarking array cloning:

1. **NativeArray**: A new JavaScript array class introduced in ES2020 (ECMAScript 2020), which provides efficient and safe array operations.
2. **Typed arrays**: Other types of typed arrays like Int8Array, Uint8Array, or Float64Array can be used instead of JavaScript's built-in array type.
3. **Third-party libraries**: As mentioned earlier, libraries like Lodash or other array manipulation utilities might be used in a real-world scenario.

Keep in mind that this is just a brief analysis, and there are many more nuances to consider when benchmarking specific use cases.

Related benchmarks:

Cloning an array (version: 0)

Cloning a small array of 40 items

Comparing performance of: Using array slice vs Using array spread vs Using array push and spread vs Using for loop and push vs Using array concat

Created: one year ago by: Guest

Jump to the latest result

Using array slice

Using array spread

Using array push and spread

Using for loop and push

Using array concat

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