Benchmark: Add item to array: push vs spread vs assign:

Script Preparation code:

window.MAX_SIZE = 1000;

Tests:

Push item to an array
const items = []; for (let i = 0; i < MAX_SIZE; i++) { items.push(i); }
Append an item by spread
let items = []; for (let i = 0; i < MAX_SIZE; i++) { items = [...items, i]; }
Direct assign an item to an initialized array
const items = new Array(MAX_SIZE); for (let i = 0; i < MAX_SIZE; i++) { items[i] = i; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Push item to an array
Append an item by spread
Direct assign an item to an initialized array

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 132 on Linux

View result in a separate tab

Test name	Executions per second
Push item to an array	167241.3 Ops/sec
Append an item by spread	1002.6 Ops/sec
Direct assign an item to an initialized array	415122.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what is being tested in the provided JSON.

**Benchmark Definition**

The benchmark tests three different approaches to add an item to an array:

1. **Push**: Using the `push()` method to add an item to the end of an array.
2. **Spread**: Using the spread operator (`...`) to create a new array with the original array and the new item.
3. **Direct Assign**: Directly assigning the new item to an existing array using the assignment syntax.

**Options Compared**

The benchmark compares the performance of these three approaches:

* **Pros of each approach:**
	+ Push: Simple, efficient, and widely supported by JavaScript engines.
	+ Spread: Creates a new array, which can be beneficial for certain use cases (e.g., when working with large datasets).
	+ Direct Assign: Directly modifies the existing array, which can be faster but may have unexpected side effects if not used carefully.
* **Cons of each approach:**
	+ Push: May require more memory allocation and garbage collection compared to spread or direct assign.
	+ Spread: Creates a new array, which can lead to increased memory usage and potential performance overhead for large datasets.
	+ Direct Assign: Can be faster but may have unexpected side effects if not used carefully (e.g., modifying the original array).

**Library Usage**

None of the benchmark cases use any external libraries.

**Special JS Features/Syntax**

The benchmark does not mention any special JavaScript features or syntax. The code only uses standard JavaScript syntax and built-in methods.

**Alternative Approaches**

Other approaches to add an item to an array include:

* Using `concat()`: Instead of push, you can use the `concat()` method to create a new array with the original array and the new item.
* Using `Array.prototype.push.apply()`: This method applies the `push()` method to the array, which can be more efficient for large arrays.

It's worth noting that these alternative approaches may have different performance characteristics compared to push, spread, or direct assign.

Related benchmarks:

Add item to array: push vs spread vs assign: (version: 1)

Comparing performance of: Push item to an array vs Append an item by spread vs Direct assign an item to an initialized array

Created: 5 years ago by: Registered User

Jump to the latest result

Push item to an array

Append an item by spread

Direct assign an item to an initialized array

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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