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

concat 5000

12K/s

spread 5000

9K/s

concat 10000

4K/s

spread 100000

3K/s

View exact numbers

Test name	Executions per second
✓ concat 5000	12,202 Ops/sec
spread 5000	9,297 Ops/sec
concat 10000	4,457 Ops/sec
spread 100000	3,269 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.

object concat vs spread (version: 0) Benchmark.js

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

Created: 2 years ago by: Guest

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

object concat vs spread (version: 0) Benchmark.js

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

Created: 2 years ago by: Guest

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

Related benchmarks

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