Benchmark: Concat vs push(...) vs spread for large arrays

Script Preparation code:

window.top.tests = {control:[], concat:[], pushSpread: [], 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'); }
Concat
window.top.tests.concat = window.top.tests.concat.concat(window.test); if (window.top.tests.concat.length > window.cutoff) { window.top.tests.concat = []; console.log('reset concat'); }
Push (with spread)
window.top.tests.pushSpread.push(...window.test); if (window.top.tests.pushSpread.length > window.cutoff) { window.top.tests.pushSpread = []; console.log('reset push spread'); }
Spread
window.top.tests.spread = [...window.top.tests.spread, ...window.test]; 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)
Concat
Push (with spread)
Spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 138 on Windows

View result in a separate tab

Test name	Executions per second
Control (for push)	115349.0 Ops/sec
Concat	105985.7 Ops/sec
Push (with spread)	453005.9 Ops/sec
Spread	24379.4 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 Overview**

The provided benchmark compares three different ways to append elements to a large array: `push()`, `concat()`, and the spread operator (`...`). The goal is to determine which approach has the best performance for large arrays.

**Options Compared**

1. **Push()**: This method uses the `push()` method to add an element to the end of the array.
2. **Concat()**: This method uses the `concat()` method to create a new array and append the elements to it.
3. **Spread Operator (...)**: This method uses the spread operator (`...`) to create a new array and append the elements to it.

**Pros and Cons**

*   **Push()**:
    *   Pros: Fast, efficient, and widely supported. It's also a native JavaScript method that doesn't require additional libraries or syntax.
    *   Cons: May not be suitable for large arrays due to memory allocation and garbage collection overhead.
*   **Concat()**:
    *   Pros: Easy to understand and implement, especially for those familiar with array manipulation.
    *   Cons: Creates a new array each time it's called, which can lead to performance issues for large datasets. It also uses more memory than `push()` or the spread operator.
*   **Spread Operator (...)**:
    *   Pros: Efficient and scalable, as it avoids creating intermediate arrays and uses the native `Array.prototype.push()` method under the hood.
    *   Cons: Requires modern JavaScript support and might be less familiar to some developers.

**Library and Special JS Features**

There are no libraries or special JS features used in this benchmark. However, it's worth noting that the spread operator is a relatively recent addition to JavaScript (introduced in ECMAScript 2018) and may not be supported by older browsers or versions of Node.js.

**Other Considerations**

When working with large arrays, consider the following:

*   Use `push()` when you need to append elements to an existing array frequently.
*   Use the spread operator (`...`) when you need to create a new array without creating intermediate arrays.
*   Be mindful of memory allocation and garbage collection overhead when using `concat()`.
*   Consider using libraries like `lodash` or `underscore`, which provide optimized array methods for performance-critical applications.

**Alternative Benchmarking Approaches**

MeasureThat.net offers other benchmarking approaches, such as:

*   **Microbenchmarking**: Measures the execution time of small code snippets.
*   **Mega-benchmarking**: Measures the execution time of larger code snippets or entire applications.
*   **WebAssembly (WASM)**: Benchmarks JavaScript performance using WASM, which can provide better performance than native JavaScript in some cases.

Keep in mind that each benchmarking approach has its strengths and weaknesses, and the choice of approach depends on your specific use case and requirements.

Related benchmarks:

Concat vs push(...) vs spread for large arrays (version: 0)

Comparing the various ways to append to a large array

Comparing performance of: Control (for push) vs Concat vs Push (with spread) vs Spread

Created: 3 years ago by: Guest

Jump to the latest result

Control (for push)

Concat

Push (with spread)

Spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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