Benchmark: Spread operator vs Array.push vs array[lastIndex]

Tests:

Using spread operator
const basicData = [{id: 1}, {id: 2}, {id: 3}]; const finalData = [...basicData, {id: 4}];
Using push function
var basicData = [{id: 1}, {id: 2}, {id: 3}]; basicData.push({id: 4});
Add to last index of array
var basicData = [{id: 1}, {id: 2}, {id: 3}]; basicData[basicData.length] = {id: 4};

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Using spread operator
Using push function
Add to last index of array

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36 Edg/135.0.0.0

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Test name	Executions per second
Using spread operator	25436416.0 Ops/sec
Using push function	42488332.0 Ops/sec
Add to last index of array	41950552.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark test and its various components.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark test on MeasureThat.net, which compares three different approaches for adding an element to an array: using the spread operator (`[...]`), the `push()` function, and accessing the last index of the array directly (`array[lastIndex]`).

**Test Cases**

There are three individual test cases:

1. **Using spread operator**: This test case uses the spread operator to add a new element to an array.
```javascript
const basicData = [{id: 1}, {id: 2}, {id: 3}];
const finalData = [...basicData, {id: 4}];
```
The `...` operator creates a new array by copying all elements from the original array (`basicData`) and adding the new element at the end.

2. **Using push function**: This test case uses the `push()` function to add an element to an array.
```javascript
var basicData = [{id: 1}, {id: 2}, {id: 3}];
basicData.push({id: 4});
```
The `push()` function adds a new element at the end of the array.

3. **Add to last index of array**: This test case uses direct indexing (`array[lastIndex]`) to add an element to an array.
```javascript
var basicData = [{id: 1}, {id: 2}, {id: 3}];
basicData[basicData.length] = {id: 4};
```
This approach assumes that the last index of the array is known and used directly.

**Options Compared**

The three test cases compare different approaches for adding an element to an array:

* **Spread operator (`[...]`)**: Creates a new array by copying all elements from the original array and adding the new element at the end.
* **Push function**: Adds a new element at the end of the original array.
* **Direct indexing (`array[lastIndex]`)**: Uses direct indexing to add an element at the known last index of the array.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

1. **Spread operator (`[...]`)**:
	* Pros: Creates a new array, avoids mutating the original array.
	* Cons: May incur additional memory allocation, can be slower due to array creation.
2. **Push function**:
	* Pros: Simple, fast, and efficient.
	* Cons: Modifies the original array, may lead to unexpected behavior if not used carefully.
3. **Direct indexing (`array[lastIndex]`)**:
	* Pros: Fast, direct access to the last element.
	* Cons: Assumes that the last index is known and valid; can be error-prone if not handled correctly.

**Libraries Used**

There are no libraries explicitly mentioned in the benchmark test cases. However, it's worth noting that using external libraries like Lodash or Ramda might provide additional functionality for array manipulation and testing.

**Special JS Features/Syntax**

The benchmark test does not use any special JavaScript features or syntax beyond the standard language features. If you're interested in exploring more advanced topics, MeasureThat.net provides a wide range of benchmarks that cover various aspects of JavaScript performance.

**Alternatives**

If you'd like to explore alternative approaches for adding an element to an array, consider the following:

* **Array.prototype.concat()**: Similar to the spread operator, but creates a new array and returns it.
* **Array.prototype.reverse()` + `Array.prototype.shift()`: Reverses the array and then shifts one element off the end to add a new element.
* **Using a custom function or library**: Depending on your specific use case, you might find alternative solutions using custom functions or specialized libraries like Immutable.js.

Keep in mind that performance optimization is highly dependent on the specific use case and environment. These alternatives might not always provide better performance or readability than the original approaches used in the benchmark test.

Related benchmarks:

Spread operator vs Array.push vs array[lastIndex] (version: 0)

Comparing performance of: Using spread operator vs Using push function vs Add to last index of array

Created: 6 years ago by: Guest

Jump to the latest result

Using spread operator

Using push function

Add to last index of 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):