Benchmark: array clone variants

Script Preparation code:

const SIZE = 1_000_000;
const original = Array.from({length: SIZE}, (_, i) => i);

Tests:

spread
const copy = [...original];
slice
const copy = original.slice();
Array.from
const copy = Array.from(original);
map
const copy = original.map((x) => x);
for
const copy = []; for (let i = 0; i < original.length; i++) { copy[i] = original[i]; }
while
const copy = []; let i = 0; while (i < original.length) { copy[i] = original[i]; i++; }
structuredClone
const copy = structuredClone(original);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread
slice
Array.from
map
for
while
structuredClone

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 137 on Windows

View result in a separate tab

Test name	Executions per second
spread	132.9 Ops/sec
slice	836.4 Ops/sec
Array.from	129.0 Ops/sec
map	132.2 Ops/sec
for	189.5 Ops/sec
while	187.7 Ops/sec
structuredClone	28.8 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 days ago):

LLMs can make mistakes. Check important info.

The benchmark on MeasureThat.net titled "array clone variants" tests various methods for creating a shallow copy (or clone) of an array in JavaScript. It evaluates the performance of several techniques used for this task, measured in "executions per second," which provides a comparative view of how efficiently each method performs when cloning an array of 1,000,000 integers.

### Test Cases and Methods Compared

1. **Spread Operator (`[...]`)**:
   - **Benchmark Definition**: `const copy = [...original];`
   - **Pros**: Concise and easy to read, the spread operator is a modern and widely-used syntax in JavaScript for shallow copying.
   - **Cons**: It may be less performant compared to some traditional methods, especially for large arrays in certain environments.

2. **Slice Method (`slice()`)**:
   - **Benchmark Definition**: `const copy = original.slice();`
   - **Pros**: The `slice()` method is a classic and established method for shallow copying arrays. It's compatible with older browsers.
   - **Cons**: Slightly less elegant than the spread operator, but generally performs well across various environments.

3. **Array.from Method (`Array.from()`)**:
   - **Benchmark Definition**: `const copy = Array.from(original);`
   - **Pros**: This method constructs a new array instance from an array-like or iterable object, providing clarity in intention.
   - **Cons**: Typically not as performant as `slice` or the spread operator, especially for large arrays.

4. **Map Method (`map()`)**:
   - **Benchmark Definition**: `const copy = original.map((x) => x);`
   - **Pros**: It creates a new array populated with the results of calling a provided function on every element. This approach could be useful if transformation is needed while cloning.
   - **Cons**: It is slower compared to dedicated clone methods since it has to invoke a function for each element.

5. **For Loop**:
   - **Benchmark Definition**: 
     ```javascript
     const copy = [];
     for (let i = 0; i < original.length; i++) {
         copy[i] = original[i];
     }
     ```
   - **Pros**: Offers fine control and potentially better performance as it avoids intermediate function calls.
   - **Cons**: More verbose, less clean code compared to newer methods.

6. **While Loop**:
   - **Benchmark Definition**: 
     ```javascript
     const copy = [];
     let i = 0;
     while (i < original.length) {
         copy[i] = original[i];
         i++;
     }
     ```
   - **Pros**: Similar to the for loop in terms of control and performance. 
   - **Cons**: Also verbose and less elegant than more modern syntax options.

7. **Structured Clone**:
   - **Benchmark Definition**: `const copy = structuredClone(original);`
   - **Pros**: This is a modern method introduced in the HTML Living Standard that performs a deep clone for complex types (including objects, arrays, etc.), coping with cyclic references efficiently.
   - **Cons**: Performance may vary, and it is primarily suited for cases where deep cloning is necessary; for simple shallow clones, it may not be the most optimal choice.

### Benchmark Results Analysis

Based on the execution results, we see that the **slice method** is the fastest for this specific case, followed by the **for loop** and **while loop**. Meanwhile, the **structuredClone** method exhibited significantly lower performance, making it the least favorable choice for shallow copies. The **spread operator**, **Array.from**, and **map** show relatively comparable performance, albeit slower than the classic methods.

### Alternatives and Considerations

In addition to the methods tested, there are alternative approaches to cloning arrays, like using libraries. Libraries like **lodash** offer a deep clone method (`_.cloneDeep`), which can be beneficial if the data structure is complex.

When choosing a method, consider not only performance metrics but also code readability, maintainability, the target environment (compatibility with older browsers), and the complexity of the data you're working with (shallow vs. deep cloning). The optimal choice may vary based on specific project needs and constraints.

Related benchmarks:

array clone variants (version: 1)

Comparing performance of: spread vs slice vs Array.from vs map vs for vs while vs structuredClone

Created: 3 days ago by: Registered User

Jump to the latest result

spread

slice

Array.from

map

for

while

structuredClone

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 days ago):