Benchmark: In loop, push(...) vs spread

Script Preparation code:

window.top.tests = {control:[], concat:[], spread:[]};
window.test = (new Array(10)).fill(null);
window.cutoff = 5000;

Tests:

Control (for push)
for (let element of window.test) window.top.tests.control.push(element); if (window.top.tests.control.length > window.cutoff) { window.top.tests.control = []; console.log('reset control'); }
Spread
window.top.tests.spread.push(...window.test); store = [] for (let element of window.test) [...store, element] if (window.top.tests.spread.length > window.cutoff) { window.top.tests.spread = []; console.log('reset spread'); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Control (for push)
Spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:141.0) Gecko/20100101 Firefox/141.0

Browser/OS: Firefox 141 on Windows

View result in a separate tab

Test name	Executions per second
Control (for push)	859731.6 Ops/sec
Spread	2183615.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Definition**

The provided JSON represents a benchmark that compares three different approaches to append elements to an array during a loop:

1.  **Control (for push)**: Using the `push` method to add elements to the end of the array.
2.  **Concat**: Using the spread operator (`...`) with the `concat` method to create a new array and then push elements into it.
3.  **Spread**: Using the spread operator (`...`) directly on the array.

**Options Compared**

The benchmark tests the performance of each approach under different conditions:

*   Control (for push): This is the most straightforward way to append elements to an array using the `push` method.
*   Concat: This approach uses the spread operator to create a new array and then pushes elements into it. It's less efficient than the control approach because it creates an additional array object.
*   Spread: This approach uses the spread operator directly on the existing array, which is more efficient than the concatenation approach but requires a supported JavaScript engine.

**Pros and Cons of Each Approach**

Here are some pros and cons for each approach:

*   Control (for push):
    *   Pros:
        *   Simple to implement
        *   Efficient
    *   Cons:
        *   Can be slower due to the push operation
*   Concat:
    *   Pros:
        *   Easy to understand
    *   Cons:
        *   Creates an additional array object, which can be inefficient
*   Spread:
    *   Pros:
        *   More efficient than concatenation because it avoids creating a new array object
    *   Cons:
        *   Requires a supported JavaScript engine (modern browsers and Node.js)
        *   May have unexpected behavior in older browsers or environments

**Libraries Used**

The benchmark uses no external libraries, only the built-in JavaScript features.

**Special JS Features/Syntax**

There are no special JavaScript features or syntax used in this benchmark. The focus is on comparing different approaches to append elements to an array using standard JavaScript methods.

**Alternative Approaches**

Other alternatives for appending elements to an array during a loop might include:

*   **Using `Array.prototype.splice()`**: This method can be more efficient than push because it modifies the original array in place.
*   **Using `Array.prototype.set()`**: This method is not widely supported and may have performance implications.
*   **Using a custom implementation with a specific data structure**: Depending on the specific requirements, using a custom data structure or algorithm might provide better performance.

Keep in mind that these alternatives are not necessarily more efficient than the approaches tested in this benchmark. The best approach depends on the specific use case and requirements.

I hope this explanation helps you understand the JavaScript microbenchmark on MeasureThat.net!

Related benchmarks:

In loop, push(...) vs spread (version: 0)

Comparing the various ways to append to a large array during a loop

Comparing performance of: Control (for push) vs Spread

Created: 3 years ago by: Guest

Jump to the latest result

Control (for push)

Spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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