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

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; }
Direct assign an item to an empty array
const items = new Array(); 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
Direct assign an item to an empty array

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

Browser/OS: Chrome 114 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Push item to an array	9688.7 Ops/sec
Append an item by spread	1198.9 Ops/sec
Direct assign an item to an initialized array	10073.2 Ops/sec
Direct assign an item to an empty array	9743.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Definition and Purpose**

The benchmark is designed to compare four different approaches for adding items to an array:

1. **Push**: Using the `push()` method to add an item to the end of the array.
2. **Spread**: Using the spread operator (`...`) to create a new array with the original array and the additional item.
3. **Direct Assign**: Directly assigning the value to an existing element in the array using bracket notation (`items[i] = i;`).
4. **Empty Array Assign**: Creating a new empty array and then assigning the values one by one.

The benchmark aims to measure which approach is the fastest for adding items to an array of a fixed size (1000 elements).

**Options Compared**

Here's a brief summary of each option:

1. **Push**: This is a straightforward way to add an item to the end of the array.
2. **Spread**: This creates a new array with the original array and the additional item, which may involve some overhead due to memory allocation and copying.
3. **Direct Assign**: This involves directly assigning the value to an existing element in the array, which may lead to issues if the index is out of bounds or if the array is not initialized properly.
4. **Empty Array Assign**: This creates a new empty array and then assigns the values one by one, which may be slower due to the overhead of creating a new array.

**Pros and Cons**

Here are some pros and cons for each approach:

1. **Push**:
	* Pros: Simple, efficient, and well-supported.
	* Cons: May lead to issues if the array is large or if there are many consecutive pushes.
2. **Spread**:
	* Pros: Creates a new array with the original array and the additional item, which can be useful for certain use cases.
	* Cons: May be slower due to memory allocation and copying.
3. **Direct Assign**:
	* Pros: None obvious.
	* Cons: Can lead to issues if the index is out of bounds or if the array is not initialized properly.
4. **Empty Array Assign**:
	* Pros: None obvious.
	* Cons: May be slower due to the overhead of creating a new array.

**Library and Special JS Features**

None of the benchmarks use any specific libraries, but they do test some general JavaScript features:

1. **Array methods**: The benchmarks test various array methods, such as `push()`, `assign()`, and bracket notation (`items[i] = i;`).
2. **Memory allocation**: The spread operator creates a new array, which involves memory allocation.
3. **JS engine optimizations**: The benchmark tests the JS engine's optimization of different approaches, which may vary between browsers.

**Other Considerations**

When interpreting the results, consider the following:

1. **Browser variations**: The benchmark results may vary between browsers due to differences in implementation and optimizations.
2. **Array size**: The benchmark uses a fixed array size (1000 elements), which may not be representative of real-world scenarios where array sizes can vary greatly.

**Alternatives**

Other approaches for adding items to an array could include:

1. **Using `concat()` method**: Instead of using the spread operator, you could use the `concat()` method to create a new array.
2. **Using a loop with indexing**: You could use a traditional loop with indexing (e.g., `items[i++] = i;`) instead of the push or assign methods.
3. **Using a library function**: Depending on the specific use case, you might consider using a library function that optimizes array manipulation, such as `array.prototype.add()`.

Keep in mind that these alternatives may have different trade-offs and implications for performance, readability, and maintainability.

Related benchmarks:

Add item to array: push vs spread vs assign vs assign+grow (version: 0)

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

Created: one year ago by: Guest

Jump to the latest result

Push item to an array

Append an item by spread

Direct assign an item to an initialized array

Direct assign an item to an empty array

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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