Benchmark: spread vs concat for adding new value to array

Tests:

spread
const array1 = Array.from({length: 5000}, (v, i) => i) const newArray = [...array1, 'newvalue']
concat
const array1 = Array.from({length: 5000}, (v, i) => i) const newArray = array1.concat(['newvalue'])

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread
concat

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 16_1_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 16 on iOS 16.1.1

View result in a separate tab

Test name	Executions per second
spread	9245.2 Ops/sec
concat	10373.3 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll explain the benchmark in detail.

**Benchmark Definition**

The provided JSON represents a JavaScript microbenchmark test case. A benchmark is a performance measurement of an application or part of an application. In this case, the benchmark tests two different approaches for adding a new value to an array: using the spread operator (`...`) and concatenation (`.concat()`).

**Options Compared**

There are only two options being compared in this test:

1. **Spread Operator (`...`)**: This approach creates a new array by spreading the elements of `array1` into a new array, followed by adding the new value `'newvalue'`.
2. **Concatenation (`.concat()`)**: This approach creates a new array by concatenating `array1` with an array containing the new value `'newvalue'`.

**Pros and Cons**

* **Spread Operator (`...`)**:
	+ Pros:
		- Creates a new array, which can be more efficient than modifying the original array.
		- Can be more readable for some developers.
	+ Cons:
		- May incur additional memory allocation.
		- Not supported in older browsers or environments (e.g., Internet Explorer).
* **Concatenation (`.concat()`)**:
	+ Pros:
		- Modifies the original array, which can reduce memory allocation and garbage collection.
		- Widely supported across modern browsers and environments.
	+ Cons:
		- Can be less readable for some developers due to the use of a method call.

**Library**

There is no external library used in this benchmark. The JavaScript code uses only built-in functions like `Array.from()` and the spread operator (`...`).

**Special JS Feature or Syntax**

The test case does not use any special JavaScript features or syntax, such as async/await, destructuring, or object literals.

**Other Considerations**

When choosing between these two approaches, consider the trade-offs in terms of memory allocation, performance, and readability. If you need to modify an array frequently, concatenation might be a better choice. However, if you prefer to create a new array or have concerns about modifying the original array, the spread operator (`...`) could be a better option.

**Other Alternatives**

If you're interested in exploring alternative approaches for adding elements to an array, consider:

1. Using `push()`: This method modifies the original array and is generally faster than concatenation.
2. Using `unshift()`: This method adds an element to the beginning of the array and can be more efficient than using `concat()` or the spread operator (`...`).
3. Using a library like Lodash, which provides various array manipulation methods.

Keep in mind that the best approach depends on your specific use case, performance requirements, and personal preference as a developer.

Related benchmarks:

spread vs concat for adding new value to array (version: 0)

Comparing performance of: spread vs concat

Created: 2 years ago by: Guest

Jump to the latest result

spread

concat

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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