Benchmark: Array.prototype.concat vs spread operator on Attributes List

Script Preparation code:

var attrs = document.body.querySelector('.modal').attributes

Tests:

slice
var other = Array.prototype.slice.call(attrs);
spread operator
var other = [ ...attrs ]
push apply into empty array
var other = []; [].push.apply(other, attrs)
Array.from
var other = Array.from(attrs);
Object.values
var other = Object.values(attrs);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
slice
spread operator
push apply into empty array
Array.from
Object.values

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 29 days ago):

LLMs can make mistakes. Check important info.

Let's dive into the provided benchmark.

The benchmark is designed to compare four different methods of converting an HTML `attributes` list into an array:

1.  Using the spread operator (`[ ...attrs ]`)
2.  Using `Array.prototype.slice.call(attrs)`
3.  Using `Array.from(attrs)`
4.  Using `Object.values(attrs)`

Here's a brief overview of each method:

*   **Spread Operator (`[ ...attrs ]`)**: The spread operator allows you to extract elements from an array-like object (such as `attrs`) and create a new array with those elements.
*   **`Array.prototype.slice.call(attrs)`**: This method creates a new array by calling the `slice()` method on `attrs` and then passing that result to `call()`, which returns the resulting array. The `call()` method is used to invoke a function with a given this value, but in this case, it's used to convert the array-like object into an actual array.
*   **`Array.from(attrs)`**: This method creates a new array from an iterable (such as `attrs`). It does not require that the input be an array-like object, making it more flexible than some of the other options.
*   **`Object.values(attrs)`**: This method returns a new array containing all the values of the given object (`attrs`). However, this will only include the attribute values if they are own properties of `attrs`, not inherited from parent elements.

**Comparison Options**

The benchmark is designed to compare these four methods in terms of performance. The test case that uses a library (in this case, no libraries are explicitly mentioned) and special JS features (`Macintosh` as the device platform, `Chrome 66`, etc.) helps to isolate the differences between these methods.

**Pros and Cons**

Here's a brief overview of each method:

*   **Spread Operator**: Pros:
    *   Easy to read and write.
    *   Efficient for small arrays.
    *   Does not require array-like object conversion.
    Cons:
    *   Can be slower than native methods like `Array.from()` or `Object.values()`.
*   **`Array.prototype.slice.call(attrs)`**: Pros:
    *   Widely supported and familiar to many developers.
    Cons:
    *   Requires array-like object conversion, which can be slow for large arrays.
    *   Can be confusing to some developers due to the use of `call()` method.
*   **`Array.from(attrs)`**: Pros:
    *   Fast and efficient for large arrays.
    *   Does not require array-like object conversion.
    Cons:
    *   Requires ES6+ support and may cause issues with older browsers.
*   **`Object.values(attrs)`**: Pros:
    *   Returns only own properties, which can help avoid unexpected values.
    Cons:
    *   May be slower than native methods like `Array.from()` or spread operator for large arrays.

**Other Considerations**

When choosing a method, consider the specific requirements of your project:

*   If you're working with small arrays and need ease of use, the spread operator might be a good choice.
*   For larger arrays or performance-critical code, `Array.from()` or other native methods might be better options.
*   If you need to avoid inherited properties, `Object.values()` could be suitable.

**Alternative Methods**

Some alternative methods for converting array-like objects into arrays include:

*   **`Array.prototype.reduce()`**: While not as straightforward as the spread operator or `Array.from()`, this method can create an array from an iterable in a more functional programming style.
*   **Using `Array.prototype.map()` and `concat()`**: This approach involves creating a new array by mapping over the input array-like object and then concatenating the results. While it's possible, it's often less efficient than using native methods like `Array.from()`.
*   **Using `for...of` loop or `Array.prototype.forEach()`**: These methods can also be used to iterate over an array-like object, but they're typically more cumbersome than using a spread operator or `Array.from()`.

Latest run results:

Run details: (Test run date: 6 years ago)

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

Browser/OS: Chrome 66 on Mac OS X 10.13.4

View result in a separate tab

Test name	Executions per second
slice	365786.8 Ops/sec
spread operator	430096.5 Ops/sec
push apply into empty array	1110369.9 Ops/sec
Array.from	317905.8 Ops/sec
Object.values	75552.5 Ops/sec

Related benchmarks:

Array.prototype.concat vs spread operator on Attributes List (version: 3)

Compare the new ES6 spread operator with the traditional concat() method

Comparing performance of: slice vs spread operator vs push apply into empty array vs Array.from vs Object.values

Created: 6 years ago by: Registered User

Jump to the latest result

slice

spread operator

push apply into empty array

Array.from

Object.values

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 29 days ago):