Benchmark: Object.values vs spread operator (...) to clone arrays.

Script Preparation code:

var array = ["qwe3234", "asdf2f34f", "ewe23f234", "efvrtfvRT", "weferfe4rt5F", "sdfd23f34frfe", "erfrfwerf", "cwecwewnyunyer", "erfasdvav", "fsbwrbgterb", "zxvfrgvdumi", "h6vrhrvrtyh", "v46hcetwq4wq4", "c53xgw54gc6x35", "k356edwd"];

Tests:

Object.values
const cloneO = Object.values(array);
Spread operator (...)
const cloneS = [...array];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.values
Spread operator (...)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Object.values	18936790.0 Ops/sec
Spread operator (...)	85418048.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Benchmark Description**

The benchmark is comparing two approaches to clone an array: `Object.values()` and the spread operator (`...`). Both methods are used to create a new copy of the original array, but they have different performance implications.

**Options Compared**

We have two options being compared:

1. **`Object.values()`**: This method returns an array containing all the values of the specified object (in this case, the `array` variable). The purpose of `Object.values()` is to extract the individual elements of an object and return them as an array.
2. **Spread operator (`...`)**: This syntax creates a new array by spreading the elements of the original array into a new array.

**Pros and Cons**

Here are some pros and cons of each approach:

*   `Object.values()`:
    *   Pros: Simple, easy to read, and widely supported.
    *   Cons: May not be as efficient as the spread operator, especially for large arrays.
*   Spread operator (`...`):
    *   Pros: Efficient, concise, and widely supported (except in older browsers).
    *   Cons: May require more lines of code than `Object.values()`, which can make it less readable.

**Library Usage**

Neither `Object.values()` nor the spread operator requires any external libraries. They are both part of the JavaScript language specification.

**Special JS Features or Syntax**

The benchmark uses the spread operator (`...`), which is a syntax feature introduced in ECMAScript 2015 (ES6). It allows you to create new arrays by spreading elements into a new array. This syntax is widely supported across modern browsers and JavaScript engines.

**Other Alternatives**

If you needed to clone an array, some alternative methods would be:

*   `Array.prototype.slice()`: Creates a shallow copy of the original array.
*   `Array.prototype.reduce()` with an initial value: Creates a new array by applying the reduction operation to each element of the original array.

Here is how these alternatives could be represented in a benchmark:
```json
[
    {
        "Benchmark Definition": "const cloneO = array.slice();",
        "Test Name": "Slice"
    },
    {
        "Benchmark Definition": "const cloneR = array.reduce((acc, v) => acc.concat(v), []);",
        "Test Name": "Reduce"
    }
]
```
Each of these methods has its own pros and cons. The `slice()` method is efficient but may not be as flexible as the spread operator or other reduction-based methods. The `reduce()` method can be more flexible but may have performance implications due to its use of iteration.

In general, when deciding which method to use, consider the trade-offs between efficiency, readability, and maintainability.

Related benchmarks:

Object.values vs spread operator (...) to clone arrays. (version: 0)

Comparing performance of: Object.values vs Spread operator (...)

Created: 2 years ago by: Guest

Jump to the latest result

Object.values

Spread operator (...)

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):