Benchmark: Array.prototype.concat vs push w/ spread operator vs spread operator

Tests:

Array.prototype.concat
var arr1 = [ 1,2,3,4,5,6,7,8,9,10 ]; var arr2 = [ 1,2,3,4,5,6,7,8,9,10 ]; var newArr = arr1.concat(arr2);
push with spread operator
var arr1 = [ 1,2,3,4,5,6,7,8,9,10 ]; var arr2 = [ 1,2,3,4,5,6,7,8,9,10 ]; var newArr = arr1.push(...arr2);
spread operator
var arr1 = [ 1,2,3,4,5,6,7,8,9,10 ]; var arr2 = [ 1,2,3,4,5,6,7,8,9,10 ]; var newArr = [...arr1, ...arr2];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
push with spread operator
spread operator

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Firefox 71 on Windows

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	4893896.5 Ops/sec
push with spread operator	2058024.9 Ops/sec
spread operator	3463128.2 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks, comparing different approaches to achieve similar results. In this explanation, we'll break down the provided JSON benchmark definition, test cases, and latest benchmark result.

**Benchmark Definition**

The benchmark definition provides a brief description of the test case: "Compare the new ES6 spread operator with the traditional `concat()` method".

**Test Cases**

There are three test cases:

1. **`Array.prototype.concat`**: This test case uses the traditional `concat()` method to combine two arrays.
2. **`push with spread operator`**: This test case uses the `push()` method with a spread operator (`...`) to concatenate two arrays.
3. **`spread operator`**: This test case uses a spread operator (`...`) to concatenate two arrays, similar to the previous one but without using `push()`.

**Options Compared**

The three test cases compare different approaches to achieve the same result:

* Traditional `concat()` method
* `push()` with a spread operator (`...`)
* A simple spread operator (`...`)

**Pros and Cons of Each Approach**

1. **Traditional `concat()` method**:
	* Pros: Widely supported, easy to read, and understand.
	* Cons: Can be slower due to the need for a function call and creating a new array.
2. **`push()` with spread operator (`...`)**:
	* Pros: Fast, modern, and concise syntax.
	* Cons: Not as widely supported in older browsers or older versions of JavaScript engines.
3. **Simple spread operator (`...`)**:
	* Pros: Modern, concise syntax, and potentially faster due to the avoidance of function calls.
	* Cons: May not be as readable for non-JavaScript developers.

**Libraries Used**

None are explicitly mentioned in this benchmark definition.

**Special JS Features or Syntax**

The benchmark definition uses modern JavaScript features such as:

* Spread operator (`...`)
* Template literals (e.g., `var newArr = [...arr1, ...arr2];`)

These features are widely supported in modern browsers and JavaScript engines.

**Other Alternatives**

If the test cases were modified to use other approaches, some alternatives could include:

* Using `Array.prototype.reduce()` or `Array.prototype.slice()` to concatenate arrays.
* Using a library like Lodash to perform array concatenation.
* Implementing custom concatenation logic using loops or recursive functions.

However, the spread operator and `push()` with spread operator are likely the most efficient and modern approaches for this specific task.

Related benchmarks:

Array.prototype.concat vs push w/ spread operator vs spread operator (version: 0)

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

Comparing performance of: Array.prototype.concat vs push with spread operator vs spread operator

Created: 5 years ago by: Guest

Jump to the latest result

Array.prototype.concat

push with spread operator

spread operator

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):