Benchmark: Test spreads1 - MeasureThat.net

Script Preparation code:

var items = (new Array(1000).fill(0)).map((_, idx) => ({
    id: idx,
    someProp: new Array(),
    also: false,
    maybe: 1,
    hmm: {
        id: idx + 1,
        id2: idx + 1
    }
}))

Tests:

Test array spread
const innerIds = items.reduce((acc, item) => [...acc, item.hmm.id, item.hmm.id2], []);
Test array concat
const innerIds = items.reduce((acc, item) => acc.concat(item.hmm.id, item.hmm.id2), []);
Test array push
const innerIds = items.reduce((acc, item) => { acc.push(item.hmm.id); acc.push(item.hmm.id2); return acc}, []);
Test object spread
const objectSet = items.reduce((acc, item) => ({...acc, [item.id]: item}), {});
Test object assign
const objectSet = items.reduce((acc, item) => Object.assign(acc, {[item.id]: item}), {});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Test array spread
Test array concat
Test array push
Test object spread
Test object assign

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark, specifically designed to measure the performance of different array and object manipulation techniques.

**Benchmark Definition**

The benchmark definition is represented by the `Script Preparation Code` field in the top-level JSON object:
```javascript
var items = (new Array(1000).fill(0)).map((_, idx) => ({
  id: idx,
  someProp: new Array(),
  also: false,
  maybe: 1,
  hmm: {
    id: idx + 1,
    id2: idx + 1
  }
}));
```
This code creates an array of 1000 objects, each with a unique `id` property and various nested properties.

**Test Cases**

The benchmark consists of four individual test cases, each represented by a JSON object. Each test case has a unique `Benchmark Definition`, which defines the operation to be performed on the `items` array or object.

1. **Test array spread**: `const innerIds = items.reduce((acc, item) => [...acc, item.hmm.id, item.hmm.id2], [])`;
This test case uses the spread operator (`...`) to create a new array by concatenating the `id` and `id2` properties of each object.

Pros:

* Efficient use of modern JavaScript features
* Simple and concise code

Cons:

* May not be supported in older browsers or environments
* Can lead to slower performance due to unnecessary array cloning

2. **Test array concat**: `const innerIds = items.reduce((acc, item) => acc.concat(item.hmm.id, item.hmm.id2), [])`;
This test case uses the `concat` method to concatenate the `id` and `id2` properties of each object.

Pros:

* Wide browser support
* Simple and easy to understand

Cons:

* May lead to slower performance due to unnecessary array cloning
* Less efficient than spread operator in modern browsers

3. **Test array push**: `const innerIds = items.reduce((acc, item) => { acc.push(item.hmm.id); acc.push(item.hmm.id2); return acc}, [])`;
This test case uses the `push` method to add elements to an array.

Pros:

* Simple and easy to understand
* Wide browser support

Cons:

* May lead to slower performance due to unnecessary array cloning
* Less efficient than spread operator in modern browsers

4. **Test object spread**: `const objectSet = items.reduce((acc, item) => ({...acc, [item.id]: item}), {})`;
This test case uses the spread operator (`{...}`) to create a new object by copying properties from an existing object.

Pros:

* Efficient use of modern JavaScript features
* Simple and concise code

Cons:

* May not be supported in older browsers or environments
* Can lead to slower performance due to unnecessary object cloning

5. **Test object assign**: `const objectSet = items.reduce((acc, item) => Object.assign(acc, {[item.id]: item}), {})`;
This test case uses the `Object.assign` method to add properties to an object.

Pros:

* Wide browser support
* Simple and easy to understand

Cons:

* May lead to slower performance due to unnecessary object cloning
* Less efficient than spread operator in modern browsers

**Library Usage**

The benchmark uses several libraries, including:

* `Array.prototype.push`: used by the `Test array push` test case.
* `Object.assign`: used by the `Test object assign` test case.
* `Array.prototype.concat`: used by the `Test array concat` test case.

These libraries are built-in to modern browsers and do not require additional installation or configuration.

**Special JS Features**

The benchmark uses several modern JavaScript features, including:

* Spread operator (`...`)
* Arrow functions (`() => { ... }`)
* Object destructuring (`{ [item.id]: item }`)

These features are widely supported in modern browsers and are used to make the code concise and efficient.

**Alternatives**

If you're interested in exploring alternative approaches, here are a few options:

1. **Manual array manipulation**: Instead of using built-in methods like `push`, `concat`, or `Object.assign`, you can use manual loops to manipulate arrays and objects.
2. **Library alternatives**: You can experiment with different libraries that implement similar functionality, such as Lodash or Underscore.js.
3. **Browser-specific optimizations**: If you're targeting a specific browser or environment, you may want to explore browser-specific optimizations or workarounds.

Keep in mind that these alternatives may require additional setup, configuration, or testing to ensure compatibility and performance.

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 108 on Linux

View result in a separate tab

Test name	Executions per second
Test array spread	15.5 Ops/sec
Test array concat	102.5 Ops/sec
Test array push	69067.7 Ops/sec
Test object spread	1567.9 Ops/sec
Test object assign	135.8 Ops/sec

Related benchmarks:

Test spreads1 (version: 0)

Comparing performance of: Test array spread vs Test array concat vs Test array push vs Test object spread vs Test object assign

Created: one year ago by: Guest

Jump to the latest result

Test array spread

Test array concat

Test array push

Test object spread

Test object assign

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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