Benchmark: JavaScript Array Copy 2

JavaScript Array Copy 2 (version: 1)

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 vs Spread operator vs Slice with begin argument vs Slice with begin and end argument vs Array.from

Created: one month ago by: Guest

Jump to the latest result

Script Preparation code:

var arrayToCopy = [ "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 shallowCopy = [];

Tests:

Array.concat
shallowCopy = arrayToCopy.concat();
Array.slice
shallowCopy = arrayToCopy.slice();
For loop
for (let i = 0; i < arrayToCopy.length; ++i) { shallowCopy.push(arrayToCopy[i]); }
For loop with declared length
var arrayLength = arrayToCopy.length; for (let i = 0; i < arrayLength; ++i) { shallowCopy.push(arrayToCopy[i]); }
While loop
let i = arrayToCopy.length - 1; while (i--) { shallowCopy.push(arrayToCopy[i]); }
Spread operator
shallowCopy = [...arrayToCopy];
Slice with begin argument
shallowCopy = arrayToCopy.slice(0);
Slice with begin and end argument
shallowCopy = arrayToCopy.slice(0, arrayToCopy.length);
Array.from
shallowCopy = Array.from(arrayToCopy);

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
Spread operator
Slice with begin argument
Slice with begin and end argument
Array.from

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome Mobile 130 on Android

View result in a separate tab

Test name	Executions per second
Array.concat	4649053.5 Ops/sec
Array.slice	4734883.0 Ops/sec
For loop	141941.6 Ops/sec
For loop with declared length	216816.4 Ops/sec
While loop	227307.5 Ops/sec
Spread operator	4433834.5 Ops/sec
Slice with begin argument	4698655.5 Ops/sec
Slice with begin and end argument	2841522.0 Ops/sec
Array.from	3519931.5 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The provided benchmark evaluates different methods for shallow copying an array in JavaScript. Shallow copying means creating a new array that contains references to the original array's elements, rather than duplicating the elements themselves.

### Methods Compared

1. **Array.concat**
   - **Code:** `shallowCopy = arrayToCopy.concat();`
   - **Pros:** Simple syntax and expressive intent; can concatenate multiple arrays as well.
   - **Cons:** Slightly less performant than some other methods because it creates a new array and may have a higher overhead.

2. **Array.slice**
   - **Code:** `shallowCopy = arrayToCopy.slice();`
   - **Pros:** Very clear and concise; directly conveys the intent of copying an array.
   - **Cons:** Similar to `concat`, it has some overhead due to internal array operations.

3. **For loop**
   - **Code:** 
     ```javascript
     for (let i = 0; i < arrayToCopy.length; ++i) {
       shallowCopy.push(arrayToCopy[i]);
     }
     ```
   - **Pros:** Offers full control over how elements are copied; can be optimized for performance.
   - **Cons:** More verbose and less declarative than using built-in methods.

4. **For loop with declared length**
   - **Code:** 
     ```javascript
     var arrayLength = arrayToCopy.length;
     for (let i = 0; i < arrayLength; ++i) {
       shallowCopy.push(arrayToCopy[i]);
     }
     ```
   - **Pros:** Avoids recalculating array length in every loop iteration, which can improve performance.
   - **Cons:** Still more verbose than built-in functionalities.

5. **While loop**
   - **Code:** 
     ```javascript
     let i = arrayToCopy.length - 1;
     while (i--) {
       shallowCopy.push(arrayToCopy[i]);
     }
     ```
   - **Pros:** Can be more performant in certain contexts as it iterates in reverse; minimizes the number of operations when the index is decremented.
   - **Cons:** Counter-intuitive for some developers; may be harder to read.

6. **Spread operator**
   - **Code:** `shallowCopy = [...arrayToCopy];`
   - **Pros:** Very modern and elegant syntax; preserves immutability style in functional programming.
   - **Cons:** May not be familiar to all developers, particularly those who haven't kept up with newer features.

7. **Slice with begin argument**
   - **Code:** `shallowCopy = arrayToCopy.slice(0);`
   - **Pros:** Functionally equivalent to `Array.slice()` but uses explicit arguments; may slightly clarify intent.
   - **Cons:** No major performance benefits over the basic `slice`.

8. **Slice with begin and end argument**
   - **Code:** `shallowCopy = arrayToCopy.slice(0, arrayToCopy.length);`
   - **Pros:** Clearly defines the range being copied, which allows for more flexibility.
   - **Cons:** Slightly more verbose, but performance-wise it doesn't provide much benefit for shallow copy.

9. **Array.from**
   - **Code:** `shallowCopy = Array.from(arrayToCopy);`
   - **Pros:** Very clear intent and can also convert iterables into arrays.
   - **Cons:** Slightly more overhead compared to simpler methods like `slice` or `concat`.

### Benchmark Results

From the benchmark results provided, the most efficient methods for shallow copying in the tested environment (Chrome Mobile 130) appear to be:

1. **Array.slice** returned the highest number of executions per second, indicating that it is among the fastest methods for this operation.
2. **Slice with begin argument** and **Array.concat** performed similarly close behind.
3. The more manual approaches, like the **For loop** and **While loop**, showed significantly lower performance, suggesting that iterating through the array for copying is less efficient in this context.

### Alternatives

Other potential methods of copying arrays that are not covered in this benchmark may include:

1. **JSON methods** (`JSON.parse(JSON.stringify(arrayToCopy))`): This deeply copies an array, but it's not efficient for shallow copying and introduces serialization overhead.
2. **Libraries like Lodash**: Functions such as `_.clone` or `_.cloneDeep`, which offer deep and shallow cloning capabilities but come with added weight from the library.
3. **Object.assign for Array-like objects**: `Object.assign([], arrayToCopy)` can also create a shallow copy but is less common.

This benchmark serves as a guide for engineers looking for optimal ways to perform shallow copies, emphasizing how built-in methods generally outperform manual copying loops in JavaScript.

Related benchmarks:

JavaScript Array Copy 2 (version: 1)

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 vs Spread operator vs Slice with begin argument vs Slice with begin and end argument vs Array.from

Created: one month ago by: Guest

Jump to the latest result

Array.concat

Array.slice

For loop

For loop with declared length

While loop

Spread operator

Slice with begin argument

Slice with begin and end argument

Array.from

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):