Benchmark: Add a lot of elements to array: push vs destructuring

Tests:

spread operator
const before = Array(10000).fill('before') const after = Array(10000).fill('after') const other = [ ...before, ...after ]
Push
const before = Array(10000).fill('before') const after = Array(10000).fill('after') before.push(...after)

Historical Performance Data aggregated from 14 community runs

Desktop Results:

Chrome 14 runs

Push

17K/s

spread operator

12K/s

Fastest: Push (1.4x faster)

View exact numbers

✓ Push: 16,858 ops/sec
• spread operator: 12,109 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
spread operator
Push

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/137.0.0.0 Safari/537.36

Browser/OS: Chrome 137 on Mac OS X 10.15.7

View result in a separate tab

Push

24K/s

spread operator

18K/s

View exact numbers

Test name	Executions per second
✓ Push	23,884 Ops/sec
spread operator	18,285 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 benchmark test and explain what's being tested.

**Benchmark Test:**

The benchmark test is designed to compare two approaches for adding a large number of elements to an array in JavaScript:

1. **Spread Operator (Spread Syntax)**: This approach uses the spread operator (`...`) to concatenate two arrays.
2. **Push Method**: This approach uses the `push()` method to add one or more elements to the end of an array.

**What's Being Tested:**

The benchmark test is measuring the performance difference between these two approaches when adding 10,000 elements to an array.

**Options Compared:**

The two options being compared are:

1. **Spread Operator (Spread Syntax)**: This approach creates a new array by copying all elements from `before` and `after` arrays using the spread operator.
2. **Push Method**: This approach adds all elements from `after` array to the end of `before` array using the `push()` method.

**Pros and Cons of Each Approach:**

1. **Spread Operator (Spread Syntax)**:
	* Pros:
		+ More concise and expressive code
		+ Avoids modifying original arrays
	* Cons:
		+ Can be slower due to the overhead of creating a new array
		+ May incur additional memory allocation
2. **Push Method**:
	* Pros:
		+ Faster execution time, as it modifies the existing array in-place
		+ Less memory allocation required
	* Cons:
		+ More verbose code
		+ May modify original arrays

**Library Used:**

None explicitly mentioned in the benchmark definition or test cases. However, the use of `Array.prototype.fill()` and `Array.prototype.push()` suggests that the underlying JavaScript engine is being tested.

**Special JS Feature/Syntax:**

The spread operator (`...`) is a relatively new feature introduced in ECMAScript 2015 (ES6). It allows for concise array concatenation and spreading elements into objects. This syntax is widely supported across modern browsers and Node.js engines.

**Other Alternatives:**

If you need to add elements to an array, other alternatives could be:

1. **Array.prototype.concat()**: Similar to the spread operator, but returns a new array instead of in-place modification.
2. **Array.prototype.slice() + Array.prototype.push()**: Creates a shallow copy of `before` using `slice()`, then appends elements from `after` using `push()`.

Keep in mind that these alternatives might have slightly different performance characteristics compared to the spread operator and push method, but they can be useful depending on your specific use case.

Add a lot of elements to array: push vs destructuring (version: 0)

Comparing performance of: `spread operator vs Push`

Created: 4 years ago by: Guest

Go to the latest result

spread operator

Push

Historical Performance Data aggregated from 14 community runs

Desktop Results:

Chrome 14 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Add a lot of elements to array: push vs destructuring (version: 0)

Comparing performance of: spread operator vs Push

Created: 4 years ago by: Guest

Go to the latest result

spread operator

Push

Historical Performance Data aggregated from 14 community runs

Desktop Results:

Chrome 14 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: `spread operator vs Push`