Benchmark: Add new element to array: push vs destructuring vs bracket access

Tests:

spread operator
var params = [ "hello", true, 7 ] var other = [ ...params, 'new' ]
Push
var params = [ "hello", true, 7 ]; params.push('new');
bracket access
var params = [ "hello", true, 7 ]; params[ params.length ] = 'new';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread operator
Push
bracket access

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 120 on Android

View result in a separate tab

Test name	Executions per second
spread operator	9522795.0 Ops/sec
Push	18724860.0 Ops/sec
bracket access	19028126.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and its options for you.

**Benchmark Overview**

The benchmark measures the performance of three different approaches to adding a new element to an array in JavaScript:

1. **Push**: Using the `push()` method to add a new element to the end of the array.
2. **Destructuring**: Using the spread operator (`...`) to create a new array with the original elements and the new one added at the end.
3. **Bracket Access**: Using direct array indexing to access the last element and assign a new value.

**Options Comparison**

Here's a brief summary of each option:

* **Push**:
	+ Pros: Simple, widely supported, and efficient for small arrays.
	+ Cons: May be slower than other methods for large arrays due to its overhead.
* **Destructuring (Spread Operator)**:
	+ Pros: Modern and efficient, especially for larger arrays. It also preserves the original array's structure.
	+ Cons: Less common in older JavaScript versions and may not work as expected in some cases.
* **Bracket Access**:
	+ Pros: Lightweight and fast, but requires direct indexing of the array length.
	+ Cons: May not be as intuitive or readable as other methods.

**Library Usage**

None of the test cases use external libraries, so there's no additional functionality to consider.

**Special JS Feature/Syntax**

The benchmark uses the **spread operator** (`...`), which is a modern JavaScript feature introduced in ECMAScript 2015 (ES6). It allows creating a new array by copying elements from an existing array. This syntax is not supported in older JavaScript versions, such as ES5.

**Other Considerations**

When choosing between these approaches, consider the following factors:

* **Array size**: For small arrays, `push()` and bracket access might be sufficient. For larger arrays, destructuring with the spread operator might be more efficient.
* **Readability and maintainability**: Bracket access can lead to more complex code, while `push()` is straightforward. Destructuring provides a balance between efficiency and readability.
* **Browser support**: The benchmark results indicate that Chrome Mobile 120 supports all three approaches.

**Alternative Approaches**

Other methods for adding an element to an array include:

* Using the `unshift()` method instead of `push()`, which adds the new element at the beginning of the array.
* Using the `concat()` method or the spread operator (`...`) with a separate array, which creates a new array by concatenating or spreading elements.

Keep in mind that these alternatives might have different performance characteristics and trade-offs.

Related benchmarks:

Add new element to array: push vs destructuring vs bracket access (version: 0)

Comparing performance of: spread operator vs Push vs bracket access

Created: 4 years ago by: Registered User

Jump to the latest result

spread operator

Push

bracket access

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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