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

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 usign Array.from
const items = Array.from(new Array(MAX_SIZE), (_, k) => k)

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 usign Array.from

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; rv:109.0) Gecko/20100101 Firefox/117.0

Browser/OS: Firefox 117 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Push item to an array	194618.2 Ops/sec
Append an item by spread	234.9 Ops/sec
Direct assign an item to an initialized array	281840.6 Ops/sec
Direct assign an item usign Array.from	78561.2 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark, "Add item to array: push vs spread vs assign vs assign with from:", tests four different approaches for adding an item to an array:

1. `push()`
2. Spread operator (`...`)
3. Direct assignment using `Array.prototype.push()` (similar to `assign` in some other contexts)
4. Direct assignment using `Array.from()` constructor.

**Approaches Compared**

The benchmark compares the performance of these four approaches on a large array with 1000 elements, populated with sequential integers from 0 to 999.

* **`push()`**: This method appends an item to the end of the array and returns the new length of the array.
* **Spread operator (`...`)**: This method creates a new array by copying all elements from the original array and adding the new element.
* **Direct assignment using `Array.prototype.push()`**: This method directly modifies the existing array by pushing the new element to it.
* **Direct assignment using `Array.from()` constructor**: This method creates a new array with the specified length, populated with values generated by the provided callback function.

**Pros and Cons of Each Approach**

1. **`push()`**:
	* Pros: Simple and widely supported; no need for explicit type conversions.
	* Cons: Can be slower than other approaches due to the overhead of creating a new array element.
2. **Spread operator (`...`)**
	* Pros: Efficient and concise way to create a new array with an additional element.
	* Cons: Creates a new array, which can lead to increased memory allocation and garbage collection.
3. **Direct assignment using `Array.prototype.push()`**:
	* Pros: Modifies the existing array, reducing memory allocations.
	* Cons: May not be as efficient as other approaches due to the overhead of calling `push()`.
4. **Direct assignment using `Array.from()` constructor**:
	* Pros: Creates a new array with a specified length and populates it efficiently.
	* Cons: Requires explicit type conversions and may be less concise than other approaches.

**Library Used**

None of the provided benchmark cases use any external libraries.

**Special JS Feature/Syntax**

The benchmark uses modern JavaScript features, including:

1. **Template literals**: Used in the `for` loop initialization string (`"const items = [];\r\nfor (let i = 0; i < MAX_SIZE; i++) {\r\n  items.push(i); \r\n}"`).
2. **Arrow functions**: Used in some benchmark cases (`"items = [...items, i];"`).

**Other Considerations**

When choosing an approach for adding an item to an array, consider the trade-offs between:

* Memory allocation and garbage collection overhead
* Performance and efficiency
* Code conciseness and readability

In this specific benchmark, the spread operator appears to be the fastest approach, followed closely by direct assignment using `Array.from()`. The `push()` method is slower due to its overhead of creating a new array element.

Related benchmarks:

Add item to array: push vs spread vs assign vs assign with from: (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 usign Array.from

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 usign Array.from

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):