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

Historical Performance Data aggregated from 50 community runs

Desktop Results:

Chrome 39 runs

Push

66.4M/s

spread operator

56.0M/s

Array.prototype.concat

16.8M/s

Object assign

2.8M/s

Fastest: Push (24.0x faster)

View exact numbers

✓ Push: 66,419,524 ops/sec
• spread operator: 56,024,888 ops/sec
• Array.prototype.concat: 16,821,766 ops/sec
• Object assign: 2,769,591 ops/sec

Firefox 6 runs

Push

36.8M/s

spread operator

30.8M/s

Array.prototype.concat

28.9M/s

Object assign

6.5M/s

Fastest: Push (5.6x faster)

View exact numbers

✓ Push: 36,776,576 ops/sec
• spread operator: 30,828,732 ops/sec
• Array.prototype.concat: 28,876,736 ops/sec
• Object assign: 6,526,298 ops/sec

Safari 5 runs

spread operator

579.9M/s

Array.prototype.concat

45.6M/s

Push

16.1M/s

Object assign

9.4M/s

Fastest: spread operator (61.5x faster)

View exact numbers

✓ spread operator: 579,928,064 ops/sec
• Array.prototype.concat: 45,553,844 ops/sec
• Push: 16,111,264 ops/sec
• Object assign: 9,432,858 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 3 days ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/153.0.0.0 Safari/537.36

Browser/OS: Chrome 153 on Linux

View result in a separate tab

Push

40.3M/s

spread operator

34.1M/s

Array.prototype.concat

10.5M/s

Object assign

1.7M/s

View exact numbers

Test name	Executions per second
✓ Push	40,316,092 Ops/sec
spread operator	34,116,620 Ops/sec
Array.prototype.concat	10,543,207 Ops/sec
Object assign	1,712,041 Ops/sec

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

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

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

Go to the latest result

Array.prototype.concat

spread operator

Push

Object assign

Historical Performance Data aggregated from 50 community runs

Desktop Results:

Chrome 39 runs

Firefox 6 runs

Safari 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

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

Go to the latest result

Array.prototype.concat

spread operator

Push

Object assign

Historical Performance Data aggregated from 50 community runs

Desktop Results:

Chrome 39 runs

Firefox 6 runs

Safari 5 runs

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 spread operator vs Push vs Object assign`