Benchmark: spread or push 2

Tests:

spread
const nodes = [ {id: 1, graphKey: 'key1'}, {id: 9, graphKey: 'key9'}, {id: 3, graphKey: 'key3'}, {id: 4, graphKey: 'key4'}, {id: 5, graphKey: 'key5'}, {id: 6, graphKey: 'key5'}, {id: 7, graphKey: 'key5'}, {id: 8, graphKey: 'key5'}, {id: 10, graphKey: 'key5'}, {id: 11, graphKey: 'key5'}, {id: 12, graphKey: 'key5'}, {id: 13, graphKey: 'key5'}, {id: 14, graphKey: 'key5'}, {id: 15, graphKey: 'key5'}, {id: 16, graphKey: 'key5'}, {id: 17, graphKey: 'key5'}, ] const selected = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21] const selectedNodeIds = selected.reduce((result, currentSelected) => { const node = nodes.find((n) => n.id === currentSelected); return node ? [...result, node.graphKey] : result; }, []) console.log(selectedNodeIds);
push
const nodes = [ {id: 1, graphKey: 'key1'}, {id: 9, graphKey: 'key9'}, {id: 3, graphKey: 'key3'}, {id: 4, graphKey: 'key4'}, {id: 5, graphKey: 'key5'}, {id: 6, graphKey: 'key5'}, {id: 7, graphKey: 'key5'}, {id: 8, graphKey: 'key5'}, {id: 10, graphKey: 'key5'}, {id: 11, graphKey: 'key5'}, {id: 12, graphKey: 'key5'}, {id: 13, graphKey: 'key5'}, {id: 14, graphKey: 'key5'}, {id: 15, graphKey: 'key5'}, {id: 16, graphKey: 'key5'}, {id: 17, graphKey: 'key5'}, ] const selected = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21] const selectedNodeIds = selected .map((sel) => { const neededNode = nodes.filter((n) => n.id === sel); return neededNode.length ? neededNode[0].graphKey : undefined; }) .filter((sel) => sel); console.log(selectedNodeIds);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
spread
push

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36 Edg/125.0.0.0

Browser/OS: Chrome 125 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
spread	109283.5 Ops/sec
push	91300.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net!

The provided benchmark definition is a simple test that compares two approaches to extract node IDs from an array using JavaScript. The test case consists of two individual tests: "spread" and "push".

**Benchmark Definition**

The benchmark definition json contains:

* `Name`: The name of the benchmark, which in this case is "spread or push 2".
* `Description`: An empty string indicating that there's no description for this benchmark.
* `Script Preparation Code` and `Html Preparation Code`: Empty strings suggesting that no preparation code is required.

**Test Cases**

The test cases are defined as an array of objects, each containing:

* `Benchmark Definition`: A string representing the JavaScript code used to create the benchmark. This code defines two variables: `nodes` and `selected`, which contain arrays of node IDs.
* `Test Name`: The name of the individual test case.

**Individual Test Cases**

The first test case is "spread", which uses the `reduce()` method to extract node IDs:
```javascript
const selectedNodeIds = selected.reduce((result, currentSelected) => {
  const node = nodes.find((n) => n.id === currentSelected);
  return node ? [...result, node.graphKey] : result;
}, []);
```
This approach uses the `reduce()` method to iterate over the `selected` array and find matching nodes in the `nodes` array. For each match, it adds the corresponding `graphKey` value to the `result` array.

The second test case is "push", which uses the `map()` method followed by `filter()`:
```javascript
const selectedNodeIds = (
  selected.map((sel) => {
    const neededNode = nodes.filter((n) => n.id === sel);
    return neededNode.length ? neededNode[0].graphKey : undefined;
  })
).filter((sel) => sel);
```
This approach first maps the `selected` array to an array of node IDs using `map()`, and then filters out any `undefined` values using `filter()`.

**Comparison**

The benchmark compares the performance of these two approaches:

* `spread`: Uses the `reduce()` method, which is generally considered a more efficient and idiomatic way to iterate over arrays in JavaScript.
* `push`: Uses the `map()` method followed by `filter()`, which can be less efficient due to the overhead of creating intermediate arrays.

**Pros and Cons**

* **Spread**: Pros:
	+ More concise and expressive code
	+ Avoids unnecessary array creation
Cons:
	+ May have slower performance due to the use of `reduce()`
* **Push**: Pros:
	+ Can be faster due to the avoidance of `reduce()` and intermediate arrays
Cons:
	+ Less concise and less expressive code
	+ Creates more intermediate arrays

**Other Considerations**

In general, when choosing between these approaches, consider the following:

* If you need to perform complex transformations on each element of an array, `map()` followed by `filter()` might be a better choice.
* If you need to perform aggregate operations or maintain state across iterations, `reduce()` is usually a better option.

**Alternatives**

If you're interested in exploring other approaches, consider the following:

* **forEach()**: Instead of using `map()` and `filter()`, you can use `forEach()` with a callback function to achieve similar results.
* **for...of` loop: You can use a traditional `for...of` loop to iterate over arrays, which might be more readable in some cases.

I hope this explanation helps!

Related benchmarks:

spread or push 2 (version: 0)

Comparing performance of: spread vs push

Created: one year ago by: Guest

Jump to the latest result

spread

push

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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