Benchmark: Array concat vs spread operator vs push vs object assign vs slice vs Array from vs for loop

Array concat vs spread operator vs push vs object assign vs slice vs Array from vs for loop (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 vs slice(0) vs slice vs Array.from vs for loop`

Created: 6 years ago by: Guest

Go to the latest result

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);
slice(0)
var params = [ "hello", true, 7 ]; var other = params.slice(0);
slice
var params = [ "hello", true, 7 ]; var other = params.slice();
Array.from
var params = [ "hello", true, 7 ]; var other = Array.from(params);
for loop
var params = [ "hello", true, 7 ]; var other = [] for (var i = params.length; i--; ) { other.unshift(params[i]) }

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

slice

103.2M/s

slice(0)

98.5M/s

Push

61.6M/s

spread operator

53.8M/s

Array.prototype.concat

16.3M/s

for loop

15.7M/s

Array.from

13.7M/s

Object.assign

2.4M/s

Fastest: slice (43.7x faster)

View exact numbers

✓ slice: 103,156,480 ops/sec
• slice(0): 98,494,936 ops/sec
• Push: 61,634,896 ops/sec
• spread operator: 53,840,336 ops/sec
• Array.prototype.concat: 16,327,606 ops/sec
• for loop: 15,659,686 ops/sec
• Array.from: 13,708,486 ops/sec
• Object.assign: 2,360,165 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
slice(0)
slice
Array.from
for loop

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

slice

107.4M/s

slice(0)

106.8M/s

Array.from

68.2M/s

Push

66.6M/s

spread operator

57.2M/s

Array.prototype.concat

16.3M/s

for loop

15.6M/s

Object.assign

3.4M/s

View exact numbers

Test name	Executions per second
✓ slice	107,355,728 Ops/sec
slice(0)	106,790,616 Ops/sec
Array.from	68,226,128 Ops/sec
Push	66,580,240 Ops/sec
spread operator	57,207,780 Ops/sec
Array.prototype.concat	16,290,284 Ops/sec
for loop	15,645,769 Ops/sec
Object.assign	3,440,688 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 explain what's being tested.

The benchmark is comparing different ways to concatenate or manipulate arrays in JavaScript:

* `Array.prototype.concat()`
* The new ES6 spread operator (`...`)
* `push()` method
* `Object.assign()` method
* `slice()` method with two variations: `slice(0)` and plain `slice()`
* `Array.from()` method

The goal is to determine which approach has the best performance in different scenarios.

Now, let's discuss each approach:

**1. `Array.prototype.concat()`**: This method creates a new array by concatenating the elements of two or more arrays. It's an older method that was widely used before ES6.

Pros: Well-established and widely supported.
Cons: Can be slower than other methods due to its internal implementation.

**2. The new ES6 spread operator (`...`)**: This is a shorthand way to expand an array or object into individual elements.

Pros: More concise and expressive, making it easier to read and write code.
Cons: May not work as expected in older browsers or environments that don't support ES6 features.

**3. `push()` method**: This method adds one or more elements to the end of an array without creating a new array.

Pros: Efficient and flexible for adding single elements.
Cons: Can lead to slower performance when adding multiple elements, as it requires shifting existing elements down.

**4. `Object.assign()` method**: This method copies the properties from one or more source objects to a target object.

Pros: Convenient for copying objects, but can be slow due to its internal implementation.
Cons: Not designed for manipulating arrays, leading to slower performance compared to native array methods.

**5. `slice()` method with two variations**: `slice(0)` returns a shallow copy of the original array, while plain `slice()` creates a new array with the specified range of elements.

Pros: Efficient and flexible for creating subsets of arrays.
Cons: Can be slow when using large ranges or deep copies.

**6. `Array.from()` method**: This method creates a new array from an iterable (e.g., a string, another array, or an object).

Pros: Convenient for creating arrays from various sources, with decent performance.
Cons: May not work as expected in older browsers or environments that don't support ES6 features.

The latest benchmark results show the relative performance of each approach:

* `slice()` and `slice(0)` seem to be the fastest approaches, likely due to their optimized internal implementations.
* The new spread operator (`...`) is close behind, making it a popular choice for code readability and expressiveness.
* `Array.prototype.concat()` falls behind, but still performs reasonably well in many cases.
* `push()` method is slower than native array methods, but can be used when adding single elements.
* `Object.assign()` method is the slowest approach due to its internal implementation and lack of support for native array manipulation.

Keep in mind that performance differences may vary depending on specific use cases, browser versions, and other factors.

Array concat vs spread operator vs push vs object assign vs slice vs Array from vs for loop (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 vs slice(0) vs slice vs Array.from vs for loop

Created: 6 years ago by: Guest

Go to the latest result

Array.prototype.concat

spread operator

Push

Object.assign

slice(0)

slice

Array.from

for loop

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 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 vs slice(0) vs slice vs Array.from vs for loop`