Benchmark: Object.assign vs SPREAD vs lodash assignIn

HTML Preparation code:

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

Script Preparation code:

var foo = {}
for (var i=0;i<100;i++) {
    foo['foo'+i] = i;
    foo['bar'+i] = i;
    foo['foobar'+i] = i;
}

var bar = {}
for (var i=0;i<100;i++) {
    bar['bar'+i] = i;
    bar['foo'+i] = i;
    bar['barfoo'+i] = i;
}

Tests:

Object.assign()
Object.assign({}, foo, bar)
SPREAD operator
var a = {...foo, ...bar}
Lodash assignIn
_.assign({}, foo, bar)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.assign()
SPREAD operator
Lodash assignIn

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark compares three different methods for merging two JavaScript objects: `Object.assign()`, the spread operator (`...`), and Lodash's `_.assignIn()` function.

**Here's a breakdown:**

* **`Object.assign({}, foo, bar)`:** This uses the built-in `Object.assign()` method. It creates a new object (using the empty object `{}`) and copies the properties from `foo` and then `bar` into it. This is a straightforward approach provided by JavaScript itself.

* **`var a = {...foo, ...bar}`:**  This uses the spread operator (`...`). It's a concise way to expand the contents of multiple objects directly into a new object. It essentially achieves the same result as `Object.assign()`.

* **`_.assign({}, foo, bar)`:** This utilizes Lodash's `_.assignIn()` function. Lodash is a popular JavaScript utility library that provides many helpful functions for working with data, arrays, and objects. In this case, `_.assignIn()` offers a similar functionality to `Object.assign()`.

**Pros and Cons:**

* **`Object.assign()`:**
    * **Pros:**  Native to JavaScript, widely understood.
    * **Cons:** Can be slightly less performant than the spread operator in some scenarios.
* **Spread Operator:**
    * **Pros:** Extremely concise and readable syntax, often faster than `Object.assign()`.
    * **Cons:** Requires understanding of ES6+ syntax.

* **Lodash `_.assignIn()`:**
    * **Pros:**  Offers more options for customization (e.g., handling nested objects), part of a comprehensive library with many other useful functions.
    * **Cons:** Adds an external dependency to your project, might be overkill if you only need basic object merging.

**Considerations:**

The benchmark results show that in this particular case, Lodash's `_.assignIn()` is slightly faster than the native `Object.assign()`, followed by the spread operator.  However, performance differences can vary depending on factors like:

* **Object size and structure:** Larger objects or complex nested structures might lead to different results.
* **Browser/Environment:** Performance optimizations differ across browsers and JavaScript engines.

**Alternatives:**

Other options for object merging include using libraries like Ramda or Immutable.js, which offer more specialized approaches for immutability and functional programming paradigms.

Let me know if you have any other questions!

Related benchmarks:

Object.assign vs SPREAD vs lodash assignIn (version: 0)

Comparing performance of: Object.assign() vs SPREAD operator vs Lodash assignIn

Created: 8 years ago by: Guest

Jump to the latest result

Object.assign()

SPREAD operator

Lodash assignIn

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):