Benchmark: Object.assign vs _.defaultsDeep vs Object Destructuring

HTML Preparation code:

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

Script Preparation code:

var schema = {
  name: undefined,
  password: undefined,
  photo: undefined,
  role: 1,
  level: 1,
  resPass: false,
  stories: {
  	one: 'Hola mundo',
    two: false,
    three: false
  }
}

var user = {
  name: "Jacob",
  password: 123,
  photo: "img.jpg",
  stories: {
    two: "Adios mundo"
  }
}

Tests:

Object.assign
let objectAssign = Object.assign({}, schema, user); objectAssign.stories = Object.assign(schema.stories, user.stories); console.log(objectAssign);
_.defaults
const defaultsDeep = _.defaultsDeep(schema, user); console.log(defaultsDeep);
Destructuring
const obj = { ...schema, ...user, stories: { ...schema.stories, ...user.stories } }; console.log(obj);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.assign
_.defaults
Destructuring

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 19 days ago)

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

Browser/OS: Chrome 143 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Object.assign	612775.2 Ops/sec
_.defaults	553982.3 Ops/sec
Destructuring	605075.8 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 benchmark and explain what's being tested.

The provided JSON represents a JavaScript microbenchmark on MeasureThat.net, which compares three different approaches to merge two objects:

1. `Object.assign()`
2. `_` (Lodash) `defaultsDeep()` function
3. Object Destructuring (`{ ...schema, ...user, ... }`)

**Option 1: `Object.assign()`**

`Object.assign()` is a built-in JavaScript method that merges all the properties of the specified objects into a new object.

Pros:

* Wide browser support (since it's a built-in method)
* Simple and straightforward to use

Cons:

* Can lead to unexpected behavior if not used correctly, especially when dealing with null or undefined values.
* Performance can be slower compared to other approaches.

**Option 2: `_` (Lodash) `defaultsDeep()` function**

`.defaultsDeep()` is a utility function from the Lodash library that returns a new object with the properties of `schema` merged into it, and any missing properties set to their default values. If two properties have different types (e.g., a number and a string), `.defaultsDeep()` will preserve the type of the first property.

Pros:

* Provides more control over the merging process, including handling null and undefined values.
* Can be faster than `Object.assign()` due to its optimized implementation.

Cons:

* Requires an additional dependency (Lodash library) which may increase bundle size.
* May have a steeper learning curve compared to `Object.assign()`.

**Option 3: Object Destructuring (`{ ...schema, ...user, ... }`)**

Object destructuring is a modern JavaScript feature that allows you to extract properties from objects using the spread operator (`...`). When used with the object literal syntax (`{ ... }`), it can be used to merge two objects.

Pros:

* Simple and concise way to merge objects.
* Fast and efficient, as it doesn't require creating a new object or calling any methods.

Cons:

* Only supported in modern browsers (ECMAScript 2015+).
* May not work correctly with null or undefined values.

**Other considerations**

* The benchmark uses Chrome 122 as the browser, which is a relatively recent version. If you need to support older browsers, you may want to consider using polyfills or transpilation.
* The test cases use a specific schema and user object, which may not be representative of real-world scenarios.

**Library: `_` (Lodash)**

The Lodash library provides a variety of utility functions for working with JavaScript objects, arrays, and other data structures. `.defaultsDeep()` is one of these utility functions, which helps with merging objects by setting default values for missing properties.

If you're interested in exploring alternative approaches or improving the performance of this benchmark, here are some alternatives:

* `Object.create()`: Another way to merge objects using the `Object.create()` method.
* `merge()`: A small library specifically designed for object merging and deep copying.
* Using `JSON.parse(JSON.stringify())` with a custom replacer function: This can be used to serialize and deserialize objects, which can help with merging.

These alternatives may have different trade-offs in terms of performance, readability, and browser support.

Related benchmarks:

Object.assign vs _.defaultsDeep vs Object Destructuring (version: 0)

Comparing performance of: Object.assign vs _.defaults vs Destructuring

Created: 4 years ago by: Guest

Jump to the latest result

Object.assign

_.defaults

Destructuring

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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