Benchmark: array from vs slice

HTML Preparation code:

<div></div>

Script Preparation code:

const array = [1, 5, 2, 3, 4, 5, 6, 6, 3, 5, 2, 3, 5, 6, 3, 5, 6, 7]
const typedArray = new Float32Array(array);

Tests:

slice typed array
[].slice.call(typedArray);
array from typed array
Array.from(typedArray);
slice basic array
[].slice.call(array);
array from basic array
Array.from(array);
typed array clone with type check
Array.isArray(typedArray) ? typedArray.slice() : Array.from(typedArray)
array clone with type check
Array.isArray(array) ? array.slice() : Array.from(array)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
slice typed array
array from typed array
slice basic array
array from basic array
typed array clone with type check
array clone with type check

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
slice typed array	172027.8 Ops/sec
array from typed array	246554.6 Ops/sec
slice basic array	7386125.0 Ops/sec
array from basic array	8667400.0 Ops/sec
typed array clone with type check	246602.3 Ops/sec
array clone with type check	12487912.0 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

The benchmark provided compares different methods of creating clones of arrays in JavaScript, specifically focusing on both basic arrays and typed arrays. The core methods being tested are `Array.from()` and the `slice()` method, along with a type check to distinguish between standard arrays and typed arrays.

### Description of Options Compared

1. **Slice Method**:
   - **Usage**: `[].slice.call(array)` for basic arrays and `[...].slice.call(typedArray)` for typed arrays.
   - **Test Cases**:
     - `slice basic array`: Clones a regular array using the `slice()` method.
     - `slice typed array`: Clones a typed array using `slice()`, which is a slightly less common use case since typed arrays don’t have a native `slice()` method supporting cloned structure.
  
2. **Array.from() Method**:
   - **Usage**: `Array.from(array)` and `Array.from(typedArray)` are used for creating a new array instance from an array-like or iterable object.
   - **Test Cases**:
     - `array from basic array`: Clones a regular array using `Array.from()`.
     - `array from typed array`: Clones a typed array using `Array.from()`.

3. **Type-Checked Cloning**:
   - **Usage**: This approach incorporates a check to see if the input is an array before deciding which method to use, employing `Array.isArray()`.
   - **Test Cases**:
     - `typed array clone with type check`: Uses `Array.isArray()` to decide between using `typedArray.slice()` or `Array.from(typedArray)`.
     - `array clone with type check`: Similar to above but for basic arrays.

### Performance Results Summary

From the benchmark results, the following observations can be made based on the Executions Per Second metric:

- **Fastest Method**: `array clone with type check` (113,636,296 executions/sec) performs the best, likely due to its optimized path for normal array cloning.
- **Moderate Performance**: `slice basic array` follows, performing well for standard arrays.
- **Lower Performance**: The `Array.from()` methods for both types of arrays have substantially slower performance, especially for typed arrays.
- **Performance Impact of Type Checking**: The checks in type-checked methods reduce efficiency due to the additional overhead of the `Array.isArray()` check, especially noticeable in the `typed array clone with type check`.

### Pros/Cons of Approaches

- **Slice Method**:
  - **Pros**:
    - Very straightforward with a traditional usage pattern.
    - Typically fast for basic arrays.
  - **Cons**:
    - Less efficient for typed arrays; it relies on using the call method, which can introduce overhead.

- **Array.from() Method**:
  - **Pros**:
    - Clear intent; can directly convert iterable structures to arrays.
    - Works natively for both basic and typed arrays.
  - **Cons**:
    - Slower than `slice()` for many use cases as seen in this benchmark.

- **Type Checking**:
  - **Pros**:
    - Ensures that the appropriate method is used based on actual data type, which avoids potential runtime errors.
  - **Cons**:
    - Adds complexity and performance overhead due to the condition checks.

### Other Considerations

For engineers, the choice between these methods can greatly depend on the context of use:

- If you are primarily working with basic arrays, `slice()` may be the most efficient.
- If you are dealing with typed arrays and general array-like structures, `Array.from()` is beneficial for clarity and correctness despite a performance trade-off.
- In cases where the distinction between array types is not crucial, simple `slice()` approaches should be preferred for speed.

### Alternatives

Several other alternatives to clone arrays include:

- **Spread Operator**: Using `[...array]` for cloning, which provides syntactical clarity and is generally efficient for basic arrays.
- **Manual Function**: Writing a manual loop to clone elements can also be an option but may sacrifice readability for edge cases and maintainability.
- **Structured Clone**: Newer options (such as structured cloning introduced in recent versions of JavaScript) can also be explored for more complex data structures.

In conclusion, the benchmark provides a detailed look at common array-cloning techniques, emphasizing the trade-offs in performance and clarity, which can guide software engineers in making informed choices for array manipulation in JavaScript.

Related benchmarks:

array from vs slice (version: 1)

Comparing performance of: slice typed array vs array from typed array vs slice basic array vs array from basic array vs typed array clone with type check vs array clone with type check

Created: 2 months ago by: Guest

Jump to the latest result

slice typed array

array from typed array

slice basic array

array from basic array

typed array clone with type check

array clone with type check

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):