Benchmark: Сreate a copy of an array by reference (Spread, Concat, Slice, Splice)

Script Preparation code:

var arr = Array.from({length: 1000}, () => Math.floor(Math.random() * 4000));

Tests:

Concat Array to empty
const result = [].concat(arr);
Concat empty to Array
const result = arr.concat([]);
Spread
const result = [...arr]
Slice
const result = arr.slice()
Splice
const result = arr.splice(0)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Concat Array to empty
Concat empty to Array
Spread
Slice
Splice

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser/OS: Chrome 120 on Windows

View result in a separate tab

Test name	Executions per second
Concat Array to empty	3809612.5 Ops/sec
Concat empty to Array	2870623.8 Ops/sec
Spread	4606393.0 Ops/sec
Slice	1995679.4 Ops/sec
Splice	14350373.0 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 benchmark and explain what's being tested, compared, and their pros and cons.

**What is being tested?**

The benchmark tests how fast different methods can create a copy of an array in JavaScript:

*   `arr` is initialized as an array with 1000 random integers between 0 and 4000 using the `Array.from()` method.
*   The test cases compare the performance of five different methods:
    *   Concatenating the array to an empty array using `[] + arr`
    *   Concatenating an empty array to the original array using `arr + []`
    *   Using the spread operator (`...`) to create a new array from the original
    *   Using the `slice()` method to create a shallow copy of the original array
    *   Using the `splice()` method to remove elements from the end of the original array and then creating a new array

**Options compared:**

The benchmark compares the performance of the following methods:

*   **Concatenation**: Creating a new array by concatenating another array using the `+` operator or `concat()` method.
    *   **Pros:** Easy to implement, can be used for other operations like string concatenation.
    *   **Cons:** Creates a new array object, requires additional memory allocation, and can lead to slower performance due to string interpolation overhead in older browsers.
*   **Spread Operator**: Using the spread operator (`...`) to create a new array from the original one.
    *   **Pros:** Fast, efficient, and easy to read. It creates a shallow copy of the original array.
    *   **Cons:** Only works for arrays; if the array contains other data types, it will be copied as well.
*   **Slice Method**: Using the `slice()` method to create a shallow copy of the original array.
    *   **Pros:** Fast and efficient. It creates a new array with references to elements from the original array.
    *   **Cons:** Only works for arrays; if the array contains other data types, it will be copied as well.
*   **Splice Method**: Using the `splice()` method to remove elements from the end of the original array and then creating a new array from the remaining elements. This is not exactly creating a copy but rather modifying the original array.

**Device Platform and Browser:**

The benchmark is run on a desktop browser (Chrome 120) with Windows operating system. It's essential to note that the results may vary across different devices, browsers, and operating systems due to differences in JavaScript engine implementation, hardware performance, and other factors.

**Library usage:**

There are no explicit libraries used in this benchmark, as it only relies on built-in JavaScript features.

**Special JS feature or syntax:**

*   The spread operator (`...`) is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). It's supported by most modern browsers and environments.
*   The `slice()` method has been part of the JavaScript language since its inception.

Related benchmarks:

Сreate a copy of an array by reference (Spread, Concat, Slice, Splice) (version: 0)

Comparing performance of: Concat Array to empty vs Concat empty to Array vs Spread vs Slice vs Splice

Created: 2 years ago by: Guest

Jump to the latest result

Concat Array to empty

Concat empty to Array

Spread

Slice

Splice

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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