Benchmark: Array push vs Spread

Script Preparation code:

var list = Array.from({ length: 1000 }).map((_, i) => `Item ${i + 1}`);

Tests:

A: push
var newList = []; list.forEach(item => newList.push(item));
B: Spread
var newList = []; list.forEach(item => newList = [ ...newList, item ]);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
A: push
B: Spread

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Browser/OS: Chrome 133 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
A: push	119916.5 Ops/sec
B: Spread	3000.5 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 world of JavaScript microbenchmarks on MeasureThat.net!

The provided benchmark measures the performance difference between two approaches to add elements to an array in JavaScript:

1. Using `Array.prototype.push()`
2. Using the spread operator (`...`) with assignment (`newList = [ ...newList, item ]`)

**Options compared:**

* **Push vs Spread**: Two different methods for adding elements to an array.
	+ Pros of Push:
		- Widely supported and well-established method.
		- Efficient in most cases.
	+ Cons of Push:
		- Can lead to poor cache locality due to frequent resizing of the internal array.
		- May be slower for large arrays or deep arrays (due to repeated reallocations).
	+ Pros of Spread:
		- Modern and efficient way of adding elements to an array.
		- Avoids resizing issues and provides better cache locality.
	+ Cons of Spread:
		- Requires support for the spread operator (`...`) in older browsers and Node.js versions.

**Other considerations:**

* **Array concatenation**: Another approach that can be considered, but it's generally slower than push or spread due to creating a new array.
* **Using `Array.prototype.splice()`**: While not directly related to adding elements at the end of an array, `splice()` is often used for inserting elements, which can lead to similar performance issues as pushing.

**Library and special JS feature:**

There's no specific library or advanced JavaScript feature mentioned in this benchmark. The focus is on comparing two basic approaches to manipulate arrays in JavaScript.

**Explanation of the spread operator (`...`):**

The spread operator is a relatively new addition to the JavaScript language, introduced in ECMAScript 2015 (ES6). It allows you to expand an array or other iterable into individual elements, which can be used as arguments for a function or assigned to a new variable. In this benchmark, the spread operator is used with assignment (`newList = [ ...newList, item ];`) to create a new array by appending `item` to the existing `newList`.

**Benchmark preparation code:**

The script preparation code creates an array `list` with 1000 elements using `Array.from()` and `map()`. This is done to provide a common starting point for both test cases.

**Individual test cases:**

There are two individual test cases:

1. **Push**: Creates a new empty array `newList` and uses `forEach()` to push each element from `list` onto `newList`.
2. **Spread**: Creates a new empty array `newList` and uses `forEach()` to assign each element from `list` to `newList`, using the spread operator with assignment.

**Latest benchmark result:**

The latest results show that Chrome 81 on Desktop (Mac OS X 10.14.6) executes **push** approximately 67423 times per second, while executing **spread** approximately 1527 times per second. This suggests that push is currently faster than the spread approach in this specific test case.

Keep in mind that benchmark results may vary depending on the specific environment and browser version used.

**Other alternatives:**

If you're looking for alternative approaches to adding elements to an array, consider:

* **Array concatenation**: Creating a new array by concatenating existing arrays using `push()` or the spread operator.
* **Using `Array.prototype.splice()`**: Inserting or replacing elements in an array using `splice()`, which can lead to similar performance issues as pushing.

However, these alternatives are generally slower than using `push` or the spread operator.

Related benchmarks:

Array push vs Spread (version: 0)

Comparing performance of: A: push vs B: Spread

Created: 5 years ago by: Registered User

Jump to the latest result

A: push

B: Spread

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