Benchmark: Function Comparison 2

HTML Preparation code:


<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js'></script>

Script Preparation code:

function formatNode(data) {
    return data.map(row => {
        const {
            id,
            label,
            ...properties
        } = row;
        return {
            id,
            label,
            properties: _.mapValues(properties, v => _.first(v))
        };
    });
}

function format(data) { return data.map(row => formatt(row)) }
function formatt({id, label, ...properties}) {
    return {
        id, label,
        properties: _.mapValues(properties, v => _.first(v))
    }
}

function formatNode2(data) {
  return data.map(row => {
     const { id, label, ...properties} = row;
     return { id, label, properties: Object.values(properties).flat(Infinity) };
  });
}

function format2(data) {
  const {id, label, ...prop} = data
  return {
    id, label,
    properties: Object.values(prop).flat()
  }
}

Tests:

Function A
const input = [{ id: 1, label: 'label 1', property_1: ['prop_1'], property_2: ['prop_2'] }, { id: 2, label: 'label 2', property_3: ['prop_3'], property_4: ['prop_4'] } ] const funcA_res = formatNode(input)
Function B
const input = [{ id: 1, label: 'label 1', property_1: ['prop_1'], property_2: ['prop_2'] }, { id: 2, label: 'label 2', property_3: ['prop_3'], property_4: ['prop_4'] } ] const functB_res = format(input)
Function C
const input = [{ id: 1, label: 'label 1', property_1: ['prop_1'], property_2: ['prop_2'] }, { id: 2, label: 'label 2', property_3: ['prop_3'], property_4: ['prop_4'] } ] const functC_res = formatNode2(input)
Function D
const input = [{ id: 1, label: 'label 1', property_1: ['prop_1'], property_2: ['prop_2'] }, { id: 2, label: 'label 2', property_3: ['prop_3'], property_4: ['prop_4'] } ] const functD_res = format2(input)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Function A
Function B
Function C
Function D

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and its options, pros and cons, and other considerations.

**Benchmark Description**

The test case compares four JavaScript functions that format an array of objects with properties that contain arrays of values. The goal is to determine which function performs better in terms of execution speed.

**Functions Compared**

1. `formatNode`: Takes an input array of objects as an argument and returns a new array with the formatted data.
2. `format`: Same as above, but uses a different syntax for destructure assignment.
3. `formatNode2`: Similar to `formatNode`, but uses the spread operator (`...`) instead of destructuring.
4. `format2`: Same as above, but uses the `Object.values()` method and the `flat()` method.

**Pros and Cons of Each Approach**

1. **Destructuring (Format)**:
	* Pros: More concise syntax, easier to read.
	* Cons: May not be supported in older browsers or environments that don't understand destructuring.
2. **Spread Operator (`formatNode`/`format2`)**
	* Pros: More concise syntax, widely supported across modern browsers and environments.
	* Cons: May not be as readable for those unfamiliar with the spread operator.
3. **Object.values() + flat() (Format2)**
	* Pros: Can handle objects with nested arrays more efficiently than destructuring or spread operators.
	* Cons: May require additional libraries or polyfills, and its syntax can be less intuitive.

**Library Used**

The benchmark uses Lodash, a popular JavaScript library for functional programming utilities. Specifically, it uses the `_.mapValues()` function to map object values to their first element.

**Special JS Features/Syntax**

None of the functions use special JavaScript features or syntax that would require additional explanation.

**Other Considerations**

1. **Performance**: The benchmark measures execution speed across multiple browsers and devices, which provides a good indication of performance consistency.
2. **Readability**: While readability is important, it's not necessarily the primary concern for this type of benchmark.
3. **Browser Support**: The benchmark uses Chromium 79, but most modern browsers support the functions compared.

**Alternatives**

1. **Alternative function syntaxes**: If you wanted to compare alternative function syntaxes, such as using `map()` with a callback or using ES6 classes instead of functions.
2. **Different libraries or frameworks**: Comparing the performance of different libraries or frameworks for tasks like data formatting.
3. **Additional optimization techniques**: Measuring the impact of optimization techniques like caching, memoization, or parallel processing on execution speed.

Overall, this benchmark provides a good comparison of four JavaScript functions for formatting arrays of objects with properties that contain arrays of values. The results can help identify performance differences and inform decisions about which approach to use in different scenarios.

Latest run results:

Run details: (Test run date: 4 years ago)

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

Browser/OS: Chromium 79 on Linux

View result in a separate tab

Test name	Executions per second
Function A	327260.1 Ops/sec
Function B	312395.0 Ops/sec
Function C	286307.5 Ops/sec
Function D	494926.1 Ops/sec

Related benchmarks:

Function Comparison 2 (version: 0)

Comparing performance of: Function A vs Function B vs Function C vs Function D

Created: 4 years ago by: Guest

Jump to the latest result

Function A

Function B

Function C

Function D

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