Benchmark: Array concat vs spread operator vs push vs object assign

Tests:

Array.prototype.concat
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].concat(params);
spread operator
var params = [ "hello", true, 7 ] var other = [ 1, 2, ...params ]
Push
var params = [ "hello", true, 7 ]; var other = [ 1, 2 ].push(...params);
Object assign
var params = [ "hello", true, 7 ]; var other = Object.assign([], params);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Array.prototype.concat
spread operator
Push
Object assign

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 28 days ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:133.0) Gecko/20100101 Firefox/133.0

Browser/OS: Firefox 133 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Array.prototype.concat	17773072.0 Ops/sec
spread operator	21564862.0 Ops/sec
Push	26631212.0 Ops/sec
Object assign	5186868.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its various test cases.

**Benchmark Overview**

MeasureThat.net is comparing four different methods for concatenating or merging arrays in JavaScript:

1. `Array.prototype.concat()`
2. Spread operator (`...`)
3. `Array.prototype.push()` with spread syntax (`push(...params)`)
4. `Object.assign()` method

The benchmark aims to determine which approach provides the best performance.

**Individual Test Cases**

Here's a brief explanation of each test case:

1. **`Array.prototype.concat()`**: This is a traditional method for concatenating two arrays in JavaScript. The `concat()` method creates a new array and copies elements from both input arrays into it.
2. **Spread operator (`...`)**: This is the new ES6 spread operator, introduced in ECMAScript 2015. It allows creating a new array by spreading elements from an existing array into a new array.
3. **`Array.prototype.push()` with spread syntax (`push(...params)`)**: This method uses the spread operator to merge elements from `params` into the existing array. The `push()` method is typically used for adding one or more elements to the end of an array, but the spread syntax allows merging multiple arrays.
4. **`Object.assign()` method**: This method is used for merging objects, not arrays. However, in some cases, it can be used with arrays by creating an object with array values.

**Pros and Cons**

Here are the pros and cons of each approach:

1. `Array.prototype.concat()`:
	* Pros: Simple to use, widely supported.
	* Cons: Creates a new array, may incur performance overhead due to memory allocation.
2. Spread operator (`...`)":
	* Pros: More concise, efficient, and modern.
	* Cons: May not be supported in older browsers or environments.
3. `Array.prototype.push()` with spread syntax (`push(...params)`)":
	* Pros: Efficient and modern, allows for multiple merges.
	* Cons: May require a newer JavaScript engine or environment to work correctly.
4. `Object.assign()` method:
	* Pros: Widely supported, can be used with objects containing arrays.
	* Cons: Not designed for array merging, may incur performance overhead.

**Library and Purpose**

In this benchmark, no specific libraries are mentioned as being used by the test cases. The focus is on comparing native JavaScript methods for array concatenation and merging.

**Special JS Features or Syntax**

The spread operator (`...`) is a special feature introduced in ES6 (ECMAScript 2015) that allows creating new arrays by spreading elements from an existing array into a new array.

**Other Alternatives**

If the spread operator is not supported, other alternatives for array concatenation and merging include:

1. Using the `Array.prototype.slice()` method to create a shallow copy of one array and then concatenating it with another.
2. Using the `Array.prototype.forEach()` method to iterate over elements from both arrays.
3. Using a library like Lodash or Underscore.js, which provide utility functions for array manipulation.

However, these alternatives may not be as efficient or modern as using the spread operator or native methods like `push()` and `Object.assign()`.

Related benchmarks:

Array concat vs spread operator vs push vs object assign (version: 0)

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

Comparing performance of: Array.prototype.concat vs spread operator vs Push vs Object assign

Created: 4 years ago by: Guest

Jump to the latest result

Array.prototype.concat

spread operator

Push

Object assign

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