Benchmark: Push vs Spread JavaScript

Script Preparation code:

var arr = [11, 22, 33, 44, 55, 66, 77, 88, 99, 111, 222, 333, 444, 555, 666, 777, 888, 999];

Tests:

Push to array Test
arr.push(1000);
Spread Test
arr = [...arr, 1000];

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Push to array Test
Spread Test

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

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

**What is tested?**

The provided JSON represents two test cases, each measuring the performance difference between two approaches: using the `push()` method and using the spread operator (`...`) to add an element to an array.

**Options compared:**

1. **`arr.push(1000);`**: This approach uses the `push()` method to add a new element to the end of the array.
2. **`arr = [...arr, 1000];`**: This approach uses the spread operator (`...`) to create a new array with the original elements and then adds the new element.

**Pros and Cons:**

1. **`push()` method**:
	* Pros:
		+ Efficient in terms of memory usage, as it only allocates a new element in the array's internal buffer.
		+ Can be faster for large arrays due to optimized implementation.
	* Cons:
		+ May not be as readable or intuitive for developers who are not familiar with it.
2. **Spread operator (`...`)**:
	* Pros:
		+ More expressive and easier to read, especially for developers accustomed to working with JavaScript.
		+ Can be faster for small arrays due to optimized implementation in modern browsers.

However, the spread operator's performance advantage over `push()` is often negligible unless dealing with extremely large datasets. In reality, both approaches have similar performance characteristics in most cases.

**Library and purpose:**

None of the provided test cases use a JavaScript library.

**Special JS feature or syntax:**

The spread operator (`...`) was introduced in ECMAScript 2015 (ES6) and is now widely supported by modern browsers. It's a convenient way to create a new array by copying elements from an existing array or other iterable.

**Benchmark preparation code explanation:**

The provided `Script Preparation Code` section initializes an array `arr` with 22 elements, which will be used as the base for both test cases.

**Other alternatives:**

There are two other common ways to add an element to an array:

1. **Using `concat()`**: This approach uses the `concat()` method to create a new array by concatenating the original array with the new element.
2. **Using `set()`**: This approach uses the `set()` method (available in modern browsers) to add a single element to the end of the array.

MeasureThat.net already includes tests for these alternative approaches, which can be found in their benchmark catalog.

In summary, the two test cases compare the performance of adding an element to an array using the `push()` method and the spread operator (`...`). While both approaches have similar performance characteristics, the spread operator is often preferred due to its readability advantages.

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.101 Safari/537.36

Browser/OS: Chrome 104 on Linux

View result in a separate tab

Test name	Executions per second
Push to array Test	5199428.5 Ops/sec
Spread Test	3.2 Ops/sec

Related benchmarks:

Push vs Spread JavaScript (version: 0)

Comparing performance of: Push to array Test vs Spread Test

Created: 2 years ago by: Registered User

Jump to the latest result

Push to array Test

Spread Test

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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