Benchmark: JS Fastest Array Shallow Copy

Tests:

Array.concat
var a = [ "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello" ]; var b = []; var other = a.concat(b);
Array.slice
var a = [ "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello" ]; var b = a.slice();
For loop
var a = [ "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello" ]; var b = []; for (let i = 0; i < a.length; ++i) { b.push(a[i]); }
For loop with declared length
var a = [ "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello" ]; var b = []; const length = a.length; for (let i = 0; i < length; ++i) { b.push(a[i]); }
While loop
var a = [ "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello", "hello" ]; var b = []; let i = a.length - 1; while (--i) { b.push(a[i]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.concat
Array.slice
For loop
For loop with declared length
While loop

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Array.concat	14492913.0 Ops/sec
Array.slice	99317656.0 Ops/sec
For loop	17755298.0 Ops/sec
For loop with declared length	17594042.0 Ops/sec
While loop	16758249.0 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript benchmark test, which aims to determine the fastest approach for shallow copying an array in JavaScript. The test consists of four individual benchmarks: `Array.concat`, `Array.slice`, `For loop`, and `For loop with declared length`. Each benchmark has its unique preparation code and is executed on various browsers (Firefox 94) with different devices (Desktop).

**Benchmark Options Compared**

Here's a brief explanation of each benchmark option:

1. **`Array.concat"`**: This approach concatenates the original array (`a`) with an empty array (`b`) using the `concat()` method. The resulting array contains all elements from both arrays.
2. **`Array.slice"`**: This approach creates a shallow copy of the original array (`a`) by creating a new array (`b`) and copying the first `length` elements from `a` to `b`. The `slice()` method returns a new array containing the specified range of elements.
3. **`For loop"`**: This approach uses a traditional for loop to iterate over each element in the original array (`a`) and push it onto a new array (`b`). This method explicitly copies each element from `a` to `b`.
4. **`For loop with declared length"`**: Similar to the previous option, but instead of using the `length` property, it uses a constant `length` variable to iterate over each element in `a`.

**Pros and Cons**

Here's a brief analysis of each approach:

*   **`Array.concat"`**: Pros: Simple, straightforward. Cons: Creates a new array with twice the size of the original array.
*   **`Array.slice"`**: Pros: Efficiently creates a shallow copy without creating an entirely new array. Cons: May be slower than other methods for large arrays due to browser limitations on creating multiple arrays at once.
*   **`For loop"`**: Pros: Verbose but clear in its intent, allows direct control over copying elements. Cons: Can be slow and less efficient compared to the `slice()` method or `concat()` with spread syntax (`...a`) because it involves more overhead from the loop's execution.
*   **`For loop with declared length"`**: Pros: Reduces performance impact of the for loop due to avoiding repeated calls on the array length by storing it in a variable. Cons: Similar concerns as before about readability.

**Other Considerations**

1.  **ES6 Features:** The `...a` spread operator used in `concat()` (not explicitly mentioned but implied) is not part of the original benchmarks, yet modern JavaScript engines optimize this method for performance, potentially outperforming older methods due to its inherent simplicity.
2.  **Array.from():** Not tested here but could be a viable option using it instead of traditional loop constructions.

The `while` loop variant in some browsers (like Firefox) is actually not as efficient or accurate as expected because the browser might optimize the condition check of `i < length`, which reduces its execution rate compared to the equivalent for loops.

Related benchmarks:

JS Fastest Array Shallow Copy (version: 0)

Testing the results for the fastest approach of shallow copying an array in JavaScript (concat, slice, for loop, and while loop).

Comparing performance of: Array.concat vs Array.slice vs For loop vs For loop with declared length vs While loop

Created: 4 years ago by: Guest

Jump to the latest result

Array.concat

Array.slice

For loop

For loop with declared length

While loop

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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