Benchmark: Object copy vs spread

Script Preparation code:

window.defaults =  {
    autoComplete: null, // WARN: without null impossible to use with form.autoComplete: possible to change is user options will be empty/not cloned by default
    autoFocus: false,
    clearActions: 0,
    focusDebounceMs: 100,
    validateDebounceMs: 500,
    validationCase: 123,
    validationRules: {
      required: (v, setV) => setV === true && this.$isEmpty(v) && "This field is required",
    },
    validations: null,
    validationShowAll: false,
    disabled: false,
    readOnly: false,
    label: null,
    name: null,
    storage: "local",
    skey: null, 
  };

Tests:

Copy forEach
let opts = {}; Object.keys(defaults).forEach(k=>{ opts[k] = defaults[k] })
Spread
let opts = {...defaults}
Copy ignoring nulls
let opts = {}; Object.keys(defaults).forEach(k=>{ const def = defaults[k]; if (def != null) { opts[k] = def; } })

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Copy forEach
Spread
Copy ignoring nulls

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/116.0.0.0 Safari/537.36

Browser/OS: Chrome 116 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Copy forEach	689670.6 Ops/sec
Spread	11887800.0 Ops/sec
Copy ignoring nulls	714196.0 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 explanation of what is being tested in this benchmark.

The test case measures the performance difference between three approaches to create an object from another object:

1. **Object copy using `forEach`**: This approach iterates over the keys of the original object (`defaults`) and creates a new object (`opts`) by assigning each key-value pair from `defaults` to `opts`. The `forEach` method is used for this iteration.
2. **Spread operator ( Spread)**: This approach uses the spread operator (`...`) to create a new object that copies all the key-value pairs from `defaults`.
3. **Copy ignoring nulls**: This approach iterates over the keys of `defaults`, creates a new object, and only assigns values if they are not null or undefined.

**Options Comparison**

These three approaches are compared in terms of performance, which is measured as "ExecutionsPerSecond". The test aims to determine which method is faster for creating an object from another object.

**Pros and Cons**

1. **Object copy using `forEach`**: This approach has a potential performance advantage if the original object is large and has many keys, because it uses iteration instead of the spread operator, which can be slower for very large objects.
2. **Spread operator (Spread)**: This approach is generally faster and more concise than the first method, especially for small to medium-sized objects. However, its performance might degrade for very large objects due to the overhead of creating a new array and then spreading it into an object.
3. **Copy ignoring nulls**: This approach has some overhead due to the conditional assignment (`if (def != null) { ... }`) but may still be faster than using `forEach` if the original object has many null values.

**Library**

None of these methods rely on a specific library, but they do utilize built-in JavaScript features like `Object.keys()`, `forEach()`, and spread operator (`...`). The use of `defaults` and `opts` suggests that the benchmark is designed to test performance variations in object creation rather than relying on any external dependencies.

**Special JS Feature or Syntax**

The `forEach()` method, spread operator (`...`), and conditional assignment (`if (def != null) { ... }`) are all standard JavaScript features. However, some older browsers might not support these features or have slightly different behavior, which could potentially affect benchmark results.

**Alternatives**

Other methods to create an object from another object include:

* Using the `Object.assign()` method
* Utilizing libraries like Lodash (`_` function)
* Implementing a custom copy function using recursion or iteration

Keep in mind that these alternatives might not be as concise or efficient as the three methods tested here and may require additional dependencies or setup.

Related benchmarks:

Object copy vs spread (version: 0)

Comparing performance of: Copy forEach vs Spread vs Copy ignoring nulls

Created: one year ago by: Registered User

Jump to the latest result

Copy forEach

Spread

Copy ignoring nulls

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