Benchmark: Array.prototype.concat vs spread operator on Children

Script Preparation code:

var children = document.body.children

Tests:

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

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 gemma2:9b, generated 29 days ago):

LLMs can make mistakes. Check important info.

This benchmark compares different methods of copying HTML child elements into a new array in JavaScript.

**Here's a breakdown of the options compared:**

* **`slice()` + `Array.prototype.call`:** This approach uses `slice()` to create a copy of the original children, and then applies it to a new array using `call()`.

* **Pros:**  Can be familiar for developers who've worked with older JavaScript methods. 
    * **Cons:**  Can be more verbose than other options.

* **Spread operator (`...children`):** This is the modern, concise way to copy elements from an iterable into a new array.
   * **Pros:** Very readable and efficient. ES6 syntax designed for this purpose.
   * **Cons:** Requires knowledge of ES6 features.  May not be as familiar to developers working with older JavaScript versions.

* **`push()` + `apply()`:** This approach iterates through the original child elements and pushes each one into an empty array using `apply()`.

* **Pros:** Can work in older JavaScript environments that don't support ES6 features.
    * **Cons:** More verbose and less performant than modern methods like spread operator or `Array.from()`.

* **`Array.from()`:** This method creates a new array from an iterable, using the provided mapping function (or defaulting to simply copying the values).

* **Pros:**  Concise, supports mapping functions for transformations during copy, widely supported.
   * **Cons:** May not be as efficient as `slice` + `call` or spread operator in simple cases.

* **`Object.values()`:** This method retrieves the values of an object's properties into a new array. It can be used here to get the child elements, but it's generally less performant than other options specifically designed for arrays.

* **Pros:**  Can work on objects and arrays. 
    * **Cons:**  Not as efficient or intuitive for copying array elements compared to methods like `slice`, spread, or `Array.from`.

**Other Considerations:**

* **Context:** The best approach depends on the specific use case and the size of the array being copied. For small arrays, the performance differences might be negligible.
* **Maintainability:** Choosing modern methods like the spread operator or `Array.from()` generally leads to more readable and maintainable code.

Let me know if you'd like me to elaborate on any specific aspect!

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	181679.4 Ops/sec
spread operator	167057.8 Ops/sec
push apply into empty array	694577.9 Ops/sec
Array.from	139281.2 Ops/sec
Object.values	36432.2 Ops/sec

Related benchmarks:

Array.prototype.concat vs spread operator on Children (version: 1)

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 gemma2:9b, generated 29 days ago):