Benchmark: Copy via reduce vs spread

Script Preparation code:

var reduce = (vals) => {
    return Object.entries(colors).reduce( (prev, [key, value]) => {
        /** Values need to be strings that are valid CSS colors */
        if (!value
            || typeof value !== "string" 
            || !CSS.supports("color", value)
        ) {
            throw new TypeError(`Expected valid CSS color; not ${value}`);
        }

        prev[key] = value;
        return prev;
    }, {});
}

var spread = (vals) => {
  for (const k in vals) {
    const value = vals[k]
    if (!value
        || typeof value !== "string" 
        || !CSS.supports("color", value)
	) {
		throw new TypeError(`Expected valid CSS color; not ${value}`);
	}
  }
  return {...vals}
}


var colors = {
    "hood": "rgb(161, 33, 148)",
    "frontbumper": "rgb(62, 237, 63)",
    "fenderL": "rgb(118, 208, 242)",
    "door1L": "rgb(255, 2, 66)",
    "door2L": "rgb(120, 69, 181)",
    "sideframeL": "rgb(211, 191, 91)",
    "roof": "rgb(81, 163, 226)",
    "sideskirtL": "rgb(23, 183, 150)",
    "door1R": "rgb(157, 64, 99)",
    "fenderR": "rgb(2, 48, 26)",
    "door2R": "rgb(139, 19, 179)",
    "sideskirtR": "rgb(141, 59, 133)",
    "sideframeR": "rgb(49, 97, 193)",
    "backbumper": "rgb(223, 68, 155)",
    "tailgate": "rgb(204, 28, 50)",
};

Tests:

copy via reduce
const new_colors = reduce(colors)
copy via spread
const new_colors = spread(colors)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
copy via reduce
copy via spread

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; rv:109.0) Gecko/20100101 Firefox/111.0

Browser/OS: Firefox 111 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
copy via reduce	186483.8 Ops/sec
copy via spread	203016.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the provided JSON benchmark data.

**Benchmark Definition**

The provided JSON represents two benchmark tests: `Copy via reduce` and `Copy via spread`. The main difference between these two tests lies in how an object is copied using JavaScript.

**Options Compared**

Two options are compared:

1.  **Spread operator (`Object.assign()`)**: This method creates a new object by copying all enumerable own properties from one or more source objects into a new object.
2.  **`reduce()` function**: This function applies a function against an accumulator and each element in the array (from left to right) to reduce it to a single value.

**Pros and Cons**

-   **Spread operator (`Object.assign()`)**
    *   Pros:
        *   Easy to use.
        *   Portable between browsers, as most modern browsers support `Object.assign()`.
        *   Does not throw errors if the source object is null or undefined.
    *   Cons:
        *   Can be slower than other methods (depending on browser and implementation).
        *   May incur a higher memory overhead due to creating a new object.

-  **`reduce()` function**
    *   Pros:
        *   More flexible, as it can be used for array operations beyond just copying.
        *   Can throw errors if the source object is invalid (depending on how the reducer handles invalid data).
    *   Cons:
        *   Requires more code and understanding of the `reduce()` function's behavior.
        *   May not be supported in older browsers or environments.

**Library**

There are no libraries used directly in this benchmark, but the `CSS` object is imported from the browser environment to test CSS color support. The `CSS.supports()` method checks if a certain feature (in this case, `color`) is supported by the browser.

**Special JS Feature/Syntax**

The provided code does not use any special JavaScript features or syntax beyond the standard spread operator and `reduce()` function. However, it does utilize CSS color values to test for valid CSS colors in the source object.

Now, let's explore other alternatives:

*   **`Object.entries()`**, `.forEach()`, or `.map()`**: These methods can be used to copy objects by iterating over their entries, but they would likely incur higher overhead and might not throw errors if invalid data is encountered.
*   **`lodash.cloneDeep()` (or `deepcopy() in older versions)**: This function provides a more comprehensive solution for deep cloning objects, which includes copying nested arrays and objects. However, it is an external library that needs to be imported or included in the benchmark.
*   **`JSON.parse(JSON.stringify(obj))`**: This method can create a deep copy of an object by serializing it as JSON and then parsing it back into an object. Although this works for simple objects, it may not work correctly with more complex data structures, such as arrays.

These alternatives would likely change the approach to benchmarking and might require adjustments to the `Test Name` in the Individual test cases section of the provided data.

Related benchmarks:

Copy via reduce vs spread (version: 0)

Comparing performance of: copy via reduce vs copy via spread

Created: one year ago by: Registered User

Jump to the latest result

copy via reduce

copy via spread

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