Benchmark: personal spread array performance (vs slice, splice, concat)

Tests:

Splice
const testArray = Array(20000).fill().map((_, idx) => idx); const newTestArray = testArray.splice(0);
Slice
const testArray = Array(20000).fill().map((_, idx) => idx); const newTestArray = testArray.slice();
Concat
const testArray = Array(20000).fill().map((_, idx) => idx); const newTestArray = testArray.concat();
Spread
const testArray = Array(20000).fill().map((_, idx) => idx); const newTestArray = [...testArray];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Splice
Slice
Concat
Spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 131 on Android

View result in a separate tab

Test name	Executions per second
Splice	3444.7 Ops/sec
Slice	3380.9 Ops/sec
Concat	3287.6 Ops/sec
Spread	5110.8 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to help you understand the JavaScript microbenchmark on MeasureThat.net.

**Benchmark Purpose:**
The benchmark is designed to compare the performance of different methods for creating a new array from an existing one: `splice`, `slice`, `concat`, and the spread operator (`...`).

**Options Compared:**

1.  **Splice**: The `splice()` method removes elements from an array and returns an array of the removed elements. It modifies the original array. In this benchmark, it's used to remove the first element from the test array.
2.  **Slice**: The `slice()` method creates a shallow copy of a portion of an array, returning an array with the selected elements. This method does not modify the original array.
3.  **Concat**: The `concat()` method concatenates two or more arrays. It returns a new array and leaves the original arrays unchanged.
4.  **Spread**: The spread operator (`...`) creates a new array by copying elements from an existing array.

**Pros and Cons of Each Approach:**

*   **Splice**:
    *   Pros: Splicing is relatively fast, especially for small arrays.
    *   Cons: It modifies the original array, which can be undesirable in some cases. Also, it's not suitable for large arrays due to its performance overhead.
*   **Slice**: 
    *   Pros: Slicing creates a shallow copy of an array without modifying the original one. It's also relatively fast and efficient, making it suitable for most use cases.
    *   Cons: The performance difference between slicing and other methods is often negligible, but slice can be slower than spread for very large arrays due to its dynamic allocation process.
*   **Concat**: 
    *   Pros: Concatenating creates a new array that doesn't modify the original one. It's also simple to implement and suitable for most use cases.
    *   Cons: The performance is generally slower than slice or spread methods, especially for large arrays due to its dynamic allocation process.
*   **Spread**: 
    *   Pros: Spreading creates a new array without modifying the original one. It's relatively fast and efficient, making it suitable for most use cases.
    *   Cons: In older browsers, spreading an array can be slower than slicing due to its dynamic allocation process.

**Other Considerations:**

*   **Memory Allocation**: When using `splice`, `slice`, or `concat`, the methods allocate new memory to store the resulting array. This can lead to performance overhead and higher memory usage.
*   **Browser Support**: The spread operator (`...`) was introduced in ECMAScript 2015 (ES6). Older browsers may not support it.

**Library:**
The benchmark doesn't explicitly mention any libraries, but it uses basic JavaScript features like the `Array` prototype methods. However, if we consider popular JavaScript frameworks or libraries that might be used with this code, some examples include:

*   React
*   Angular
*   Vue.js

**Special JS Features or Syntax:**
The benchmark doesn't explicitly use any special JavaScript features or syntax beyond the basic array operations and ECMAScript 2015 (ES6) spread operator.

**Benchmark Preparation Code:**
The provided benchmark preparation code creates a test array with 20,000 elements using `Array(20000).fill().map((_, idx) => idx);`, which ensures that all methods have to process the same-sized data. The individual test cases then create new arrays using the respective methods (`splice`, `slice`, `concat`, and spread) and measure their performance.

**Alternatives:**
If you need alternative approaches for creating a new array, consider:

*   Using the `for...of` loop or a `map()` function to create an array from an existing one.
*   Utilizing other libraries like Lodash or Ramda that provide utility functions for array manipulation and optimization.

Keep in mind that these alternatives might not provide the exact same performance as the original methods used in this benchmark.

Related benchmarks:

personal spread array performance (vs slice, splice, concat) (version: 0)

Comparing performance of: Splice vs Slice vs Concat vs Spread

Created: 3 years ago by: Guest

Jump to the latest result

Splice

Slice

Concat

Spread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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