Benchmark: spread or push on large array

Script Preparation code:

var testArray = new Array(100).fill(null).map((_, i) => `index-${i}`);
var testNewItem = `new-item`;

Tests:

spread
testArray = [...testArray, testNewItem];
push
testArray.push(testNewItem);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread
push

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 112 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
spread	876.9 Ops/sec
push	6425974.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 world of JavaScript microbenchmarks.

**What is tested?**

The provided benchmark tests two approaches to add an item to a large array: using the spread operator (`"..."` ) and using the `push` method. The test measures the performance difference between these two methods on a large array of 100 elements.

**Options compared**

There are two options being compared:

1. **Spread Operator (Spread)**: This approach uses the spread operator (`"..."` ) to create a new array with the original array's elements concatenated with the new item.
2. **Push Method (Push)**: This approach uses the `push` method to add the new item to the end of the existing array.

**Pros and Cons**

* **Spread Operator (Spread)**
	+ Pros:
		- Creates a new array, which can be more efficient for large datasets since it avoids mutating the original array.
		- Can be faster for some use cases due to optimized JavaScript engine behavior.
	+ Cons:
		- Requires creating an intermediate array, which can consume memory.
* **Push Method (Push)**
	+ Pros:
		- Modifies the existing array in-place, reducing memory usage.
		- Often considered more intuitive and readable for some developers.
	+ Cons:
		- May be slower due to the overhead of iterating over the entire array.

**Library usage**

There is no library used in this benchmark. It appears to be a simple JavaScript microbenchmark designed to compare two specific approaches.

**Special JS feature or syntax**

None are mentioned in the provided benchmark definition. However, it's worth noting that some browsers may exhibit different behavior when using the spread operator due to optimizations or caching.

**Benchmark preparation code**

The script preparation code creates a large array `testArray` with 100 elements and a string variable `testNewItem`. The HTML preparation code is empty, suggesting that this benchmark focuses solely on JavaScript performance.

**Other alternatives**

Other approaches to add an item to an array could include:

* Using the `concat()` method (not included in this benchmark).
* Creating a new array using `Array.from()` or `Array.prototype.slice()`, which might be slower due to their overhead.
* Using a library like Lodash, which provides optimized array manipulation functions.

Keep in mind that the best approach depends on your specific use case and performance requirements. This benchmark is designed to provide a simple comparison between two widely used methods.

Related benchmarks:

spread or push on large array (version: 0)

Comparing performance of: spread vs push

Created: 2 years ago by: Guest

Jump to the latest result

spread

push

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