Benchmark: object concat vs spread

Tests:

concat 10000
const data1 = [...Array.from(Array(10000))].map(_ => ({ a: 123, b: '123', c: [1,2,3]})); const data2 = [...Array.from(Array(10000))].map(_ => ({ a: 123, b: '123', c: [1,2,3]})); const concatTest = () => { const result = data1.concat(data2) } concatTest();
spread 100000
const data1 = [...Array.from(Array(10000))].map(_ => ({ a: 123, b: '123', c: [1,2,3]})); const data2 = [...Array.from(Array(10000))].map(_ => ({ a: 123, b: '123', c: [1,2,3]})); const spreadTest = () => { const result = [...data1, ...data2] } spreadTest();
concat 5000
const data1 = [...Array.from(Array(5000))].map(_ => ({ a: 123, b: '123', c: [1,2,3]})); const data2 = [...Array.from(Array(5000))].map(_ => ({ a: 123, b: '123', c: [1,2,3]})); const concatTest = () => { const result = data1.concat(data2) } concatTest();
spread 5000
const data1 = [...Array.from(Array(5000))].map(_ => ({ a: 123, b: '123', c: [1,2,3]})); const data2 = [...Array.from(Array(5000))].map(_ => ({ a: 123, b: '123', c: [1,2,3]})); const spreadTest = () => { const result = [...data1, ...data2] } spreadTest();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
concat 10000
spread 100000
concat 5000
spread 5000

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/119.0.0.0 Safari/537.36

Browser/OS: Chrome 119 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
concat 10000	4457.2 Ops/sec
spread 100000	3268.8 Ops/sec
concat 5000	12202.0 Ops/sec
spread 5000	9296.9 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark, specifically comparing the performance of two approaches: concatenating arrays using the `concat()` method and spreading arrays using the spread operator (`...`). The benchmark is designed to test the execution speed of these operations on arrays with varying sizes (10,000, 50,000, and 100,000 elements).

**Options Compared**

There are two options being compared:

1. **Concatenation using `concat()`**: This approach creates a new array by appending one or more arrays to an existing array.
2. **Spreading using the spread operator (`...`)**: This approach creates a new array by spreading out the elements of another array.

**Pros and Cons**

* **Concatenation using `concat()`**:
	+ Pros:
		- Widely supported and well-documented.
		- Can be used with existing code that uses `concat()`.
	+ Cons:
		- Creates a new array, which can lead to memory allocation overhead.
		- May not be as efficient as spreading for large arrays.
* **Spreading using the spread operator (`...`)**:
	+ Pros:
		- More modern and concise syntax.
		- Can be more efficient than concatenation for large arrays, since it avoids creating a new array.
	+ Cons:
		- Less widely supported (specifically in older browsers).
		- May require changes to existing code that uses `concat()`.

**Library Used**

None explicitly mentioned. However, the use of `Array.from()`, which is a modern JavaScript method for creating arrays from iterable sources, suggests that the benchmark is targeting modern browsers with good support for Array methods.

**Special JS Feature or Syntax**

The use of the spread operator (`...`) is a recent feature introduced in ECMAScript 2018. This syntax allows for more concise and expressive array creation, but may not be supported by older JavaScript engines or certain environments.

**Other Alternatives**

If concatenation using `concat()` is too slow or memory-intensive, other alternatives might include:

* Using `Array.prototype.push()`: This method can be used to append elements to an existing array without creating a new one.
* Using `Buffer` APIs: For large arrays of binary data, using Buffer APIs like `Buffer.concat()` or `Buffer.from()` can provide efficient memory management and performance.

Keep in mind that the choice of alternative depends on the specific use case, performance requirements, and target browsers.

Related benchmarks:

object concat vs spread (version: 0)

Comparing performance of: concat 10000 vs spread 100000 vs concat 5000 vs spread 5000

Created: 2 years ago by: Guest

Jump to the latest result

concat 10000

spread 100000

concat 5000

spread 5000

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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