Benchmark: object concat vs spread vs concat

Script Preparation code:

const getData = () => [...Array.from(Array(5000))].map(_ => ({
    a: 123,
    b: '123',
    c: [1, 2, 3]
}));

Tests:

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
concat
spread

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	2647.4 Ops/sec
spread	2099.4 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark definition and test cases, explaining what's being tested, the pros and cons of each approach, and other considerations.

**Benchmark Definition**

The benchmark measures the performance difference between three ways to concatenate objects in JavaScript:

1. `concat()`
2. Spread syntax (`...`)
3. Concatenation using a temporary variable

The script preparation code generates an array of 5000 objects with specific properties (a string, a number, and an array) for each test case.

**Test Cases**

There are two test cases:

### Test Case 1: `concat`

```javascript
const getData = () => [...Array.from(Array(5000))].map(_ => ({ a: 123, b: '123', c: [1,2,3]}));
const concatTest = () => {
  const a = getData();
  const b = a.concat(getData());
}
```

This test case uses the `concat()` method to concatenate two arrays of objects. The `concat()` method creates a new array and copies all elements from both arrays into it.

### Test Case 2: `spread`

```javascript
const getData = () => [...Array.from(Array(5000))].map(_ => ({ a: 123, b: '123', c: [1,2,3]}));
const spreadTest = () => {
  const a = getData();
  const b = [...a, ...getData()];
}
```

This test case uses the spread syntax (`...`) to concatenate two arrays of objects. The `...` operator creates a new array with all elements from both arrays.

**Options Compared**

The benchmark compares the performance of three options:

1. **concat()**: Uses the `concat()` method to create a new array and copy all elements from both arrays.
2. **Spread syntax (`...`)**: Uses the spread syntax to concatenate two arrays into a single array.
3. **Concatenation using a temporary variable**: Creates a temporary array by concatenating the first array with an empty array, then assigns the second array to the resulting array.

**Pros and Cons**

1. **concat()**:
	* Pros: Widely supported and well-established method for concatenating arrays.
	* Cons: Can be slower due to the overhead of creating a new array.
2. **Spread syntax (`...`)**:
	* Pros: More concise and efficient than using `concat()` or a temporary variable.
	* Cons: May not be supported in older browsers or environments.
3. **Concatenation using a temporary variable**:
	* Pros: Can be faster than using `concat()` due to reduced overhead of creating new arrays.
	* Cons: Requires more code and may not be as concise as the spread syntax.

**Library Usage**

None of the test cases uses any external libraries or frameworks. The benchmark only relies on built-in JavaScript features.

**Special JS Features or Syntax**

The benchmark uses the following special JavaScript features:

1. **Array.from()**: Used to create an array from a string.
2. **Spread syntax (`...`)**: Used for array concatenation and spread operation.
3. **Template literals**: Used in the `getData()` function to create a template literal.

**Alternatives**

If you want to measure the performance of other approaches, consider using different test cases or modifying the existing ones. For example:

1. Using different data structures (e.g., arrays with numbers instead of objects).
2. Adding more elements to each array.
3. Using different browsers or environments to compare support for spread syntax.

Keep in mind that benchmarking JavaScript performance can be complex, and results may vary depending on the specific use case and environment.

Related benchmarks:

object concat vs spread vs concat (version: 0)

Comparing performance of: concat vs spread

Created: 2 years ago by: Guest

Jump to the latest result

concat

spread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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