Benchmark: Array slice() vs slice(0) vs spread operator vs Array.from

Script Preparation code:

var baseArray = []
for (var i = 0; i < 50; i++) {
  baseArray.push((Math.floor(Math.random() * Math.floor(1000000))).toString(16)) 
}

Tests:

Array.prototype.slice()
var other = baseArray.slice();
spread operator
var other = [ ...baseArray ]
Array.prototype.slice(0)
var other = baseArray.slice(0);
Array.from()
var other = Array.from(baseArray);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.slice()
spread operator
Array.prototype.slice(0)
Array.from()

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 138 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.slice()	5681191.5 Ops/sec
spread operator	1320724.5 Ops/sec
Array.prototype.slice(0)	5724951.5 Ops/sec
Array.from()	1247190.9 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark defined in the provided JSON compares several methods of creating a shallow copy of an array in JavaScript. The objective is to evaluate the performance of different approaches, specifically focusing on the traditional `Array.prototype.slice()` method and several modern alternatives introduced in ES6 (ECMAScript 2015), including the spread operator and `Array.from()`.

### Tested Methods

1. **Array.prototype.slice()**
   - **Definition**: `var other = baseArray.slice();`
   - **Purpose**: This method has been a standard approach for creating a shallow copy of an array. It returns a new array containing a portion of the original array without modifying the original.
   - **Pros**:
     - Widely supported and well-documented.
     - Clear and intuitive for creating copies of arrays.
   - **Cons**:
     - Although efficient, it can be somewhat less performant than newer methods in certain contexts.

2. **Spread Operator**
   - **Definition**: `var other = [ ...baseArray ];`
   - **Purpose**: The spread operator is a modern syntax that allows for an array or object to be expanded or decomposed. In this case, it is used to create a shallow copy of an array.
   - **Pros**:
     - Cleaner and more concise syntax.
     - Enhances code readability and expressiveness.
   - **Cons**:
     - May have slight performance overhead in specific engines or contexts compared to `slice()`, though generally efficient.

3. **Array.prototype.slice(0)**
   - **Definition**: `var other = baseArray.slice(0);`
   - **Purpose**: Similar to `slice()`, but explicitly specifies the start index (0), which makes it clear that a full copy of the array is intended.
   - **Pros**:
     - Clear intent for creating a copy from the beginning of the array.
     - Familiar syntax to developers coming from older JavaScript contexts.
   - **Cons**:
     - No significant benefits over plain `slice()`; this approach may be seen as redundant.

4. **Array.from()**
   - **Definition**: `var other = Array.from(baseArray);`
   - **Purpose**: This method creates a new array from an array-like or iterable object.
   - **Pros**:
     - Can convert various types of structures (e.g., strings, NodeLists) into arrays.
     - Good for scenarios where the input is not guaranteed to be an array.
   - **Cons**:
     - Slightly more verbose and less intuitive purely for copying arrays than `slice()` or the spread operator.

### Benchmark Results

Based on the latest benchmark results, we can see the following `ExecutionsPerSecond` values for each testing method:

- **Array.prototype.slice()**: 33,180,416.0
- **Array.prototype.slice(0)**: 32,257,306.0
- **Spread Operator**: 27,148,888.0
- **Array.from()**: 24,613,630.0

From these results, it is evident that:

- The traditional **Array.prototype.slice()** is the fastest method in this benchmark, closely followed by **Array.prototype.slice(0)**.
- The **Spread Operator** performs reasonably well but is significantly slower than `slice()`.
- **Array.from()** is the slowest of all methods tested, making it less appropriate when performance is critical and only simple array copies are needed.

### Other Considerations

1. **Readability vs. Performance**: The choice between these methods can also depend on the context of usage. While some developers might prioritize performance, others might favor code readability and maintainability, particularly in larger codebases.

2. **Browser Compatibility**: While methods like `Array.from()` and the spread operator are part of ES6, older browsers might require polyfills or—if they are not supported natively—alternative approaches, making compatibility an essential consideration.

3. **Memory Implications**: All tested methods perform shallow copies, meaning they only duplicate the references to the original objects in the case of nested structures. Therefore, if the original array contains objects, changes to the objects in one array will reflect in the other.

### Alternatives

In addition to the methods tested, developers can consider:

- **Looping Constructs**: Manually iterating through an array using a loop to copy elements can be an option, providing fine-grained control over the copying process but at the cost of brevity and clarity.
  
- **Functional Approaches**: Using methods like `map()` can also achieve similar results, allowing transformations during the copy process, although this is not strictly for copying purposes.

In summary, while `Array.prototype.slice()` remains an excellent choice for performance and clarity in copying arrays, modern techniques like the spread operator provide convenient alternatives that might favor readability in contemporary JavaScript code.

Related benchmarks:

Array slice() vs slice(0) vs spread operator vs Array.from (version: 1)

Compare the new ES6 spread operator with the traditional slice() methods

Comparing performance of: Array.prototype.slice() vs spread operator vs Array.prototype.slice(0) vs Array.from()

Created: 18 days ago by: Guest

Jump to the latest result

Array.prototype.slice()

spread operator

Array.prototype.slice(0)

Array.from()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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