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:

     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:

     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.