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: 8 months ago)

User agent: Mozilla/5.0 (Linux; arm_64; Android 12; MNA-LX9) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.7339.122 YaBrowser/25.10.1.122.00 SA/3 Mobile Safari/537.36

Browser/OS: Yandex Browser 25 on Android

View result in a separate tab

push with spread operator

24.9M/s

spread operator

16.2M/s

Array.prototype.concat

7.5M/s

View exact numbers

Test name	Executions per second
✓ push with spread operator	24,911,214 Ops/sec
spread operator	16,170,172 Ops/sec
Array.prototype.concat	7,542,472 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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: 6 years ago by: Guest

Go to the latest result

Array.prototype.concat

push with spread operator

spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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: 6 years ago by: Guest

Go to the latest result

Array.prototype.concat

push with spread operator

spread operator

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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