Benchmark: Adding to an array with push.apply vs spread vs for loop vs while loop

Tests:

Adding with Function.prototype.apply on the push method
var target_array = []; var new_data = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20, "Hello world", "I'm a string", {obj: "Yes I am an object"}]; target_array.push.apply(target_array, new_data)
Adding with spread
var target_array = []; var new_data = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20, "Hello world", "I'm a string", {obj: "Yes I am an object"}]; target_array.push(...new_data)
Adding with for loop
var target_array = []; var new_data = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20, "Hello world", "I'm a string", {obj: "Yes I am an object"}]; for(let i = 0; i < new_data.length; i++){target_array.push(new_data[i])}
Adding with while loop
var target_array = []; var new_data = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20, "Hello world", "I'm a string", {obj: "Yes I am an object"}]; while(new_data.length){target_array.push(new_data.pop())}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Adding with Function.prototype.apply on the push method
Adding with spread
Adding with for loop
Adding with while loop

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; rv:109.0) Gecko/20100101 Firefox/112.0

Browser/OS: Firefox 112 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Adding with Function.prototype.apply on the push method	6191190.0 Ops/sec
Adding with spread	6214870.5 Ops/sec
Adding with for loop	8214441.5 Ops/sec
Adding with while loop	5608763.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Definition and Purpose**

The benchmark measures the performance of four different approaches to add elements to an array: `push.apply`, `spread`, `for loop`, and `while loop`. The goal is to determine which approach is the most efficient.

**Options Compared**

1. **`push.apply()`**: This method uses the `Function.prototype.apply()` method to apply the `push()` method of the target array to an array containing the elements to be added.
2. **`spread` operator**: This operator unpacks the array into individual elements, which are then added to the target array using the `push()` method.
3. **`for loop`**: A traditional `for` loop is used to iterate over the elements of the new array and add them to the target array using the `push()` method.
4. **`while loop`**: A `while` loop is used to iterate over the elements of the new array and add them to the target array using the `push()` method.

**Pros and Cons**

*   **`push.apply()`**:
    *   Pros: Efficient, as it avoids creating intermediate arrays.
    *   Cons: May have performance overhead due to function invocation and argument passing.
*   **`spread` operator**:
    *   Pros: Modern and efficient, as it avoids creating intermediate arrays.
    *   Cons: Requires support for the spread operator in older browsers and versions of JavaScript.
*   **`for loop`**:
    *   Pros: Wide browser support, easy to understand, and flexible.
    *   Cons: May have performance overhead due to array iteration and push operations.
*   **`while loop`**:
    *   Pros: Simple and straightforward, with wide browser support.
    *   Cons: May be less efficient than other approaches, especially for large arrays.

**Library Usage**

There is no explicit library used in this benchmark. However, the `Function.prototype.apply()` method is a part of the JavaScript standard library, which is supported by most modern browsers.

**Special JS Features**

The benchmark uses the spread operator (`...`), which was introduced in ECMAScript 2015 (ES6). This feature allows for concise array unpacking and creation. If you're targeting older versions of JavaScript, you may need to use a polyfill or alternative approach.

**Other Considerations**

When choosing an approach, consider the following factors:

*   **Browser support**: Make sure the chosen method is supported by the target browsers.
*   **Performance**: Benchmark different approaches to determine which one performs best for your specific use case.
*   **Readability and maintainability**: Choose a method that is easy to understand and maintain, especially if you're working on a large project.

**Alternative Approaches**

If you need to add elements to an array in JavaScript, some alternative approaches worth considering:

1.  **`Array.prototype.push()` with slicing**: `target_array.concat(new_data.slice())`
2.  **`Array.prototype.splice()`**: `target_array.splice(0, 0, ...new_data)`
3.  **Using a library like Lodash**: Lodash provides an `addBy` method that combines multiple arrays into one.

These approaches may offer different trade-offs in terms of performance, readability, and browser support. Be sure to benchmark and evaluate each approach before making a decision for your specific use case.

Related benchmarks:

Adding to an array with push.apply vs spread vs for loop vs while loop (version: 0)

Comparing performance of: Adding with Function.prototype.apply on the push method vs Adding with spread vs Adding with for loop vs Adding with while loop

Created: one year ago by: Guest

Jump to the latest result

Adding with Function.prototype.apply on the push method

Adding with spread

Adding with for loop

Adding with while loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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