Benchmark: lodash set vs spread conditional merge

HTML Preparation code:

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

Tests:

lodash set
const a = {b:{q: "QWe", w:"ert",e:"ert",r:"ret",t:"rty",y:"werw",u:"ytu",i:"reh",o:"eeh",p:"Weas"}}; _.set(a,".b.c", "what");
spread
const a = {b:{q: "QWe", w:"ert",e:"ert",r:"ret",t:"rty",y:"werw",u:"ytu",i:"reh",o:"eeh",p:"Weas"}}; a.b = { ...a.b, c: "what" };
just if
const a = {b:{q: "QWe", w:"ert",e:"ert",r:"ret",t:"rty",y:"werw",u:"ytu",i:"reh",o:"eeh",p:"Weas"}}; if(a.b){ a.b.c = "what"; }else{ a.b = {c: "what"}; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
lodash set
spread
just if

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 llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks!

**Benchmark Overview**

The benchmark compares three ways to merge or update an object in JavaScript: using Lodash's `set` method, spreading the new object using the syntax `{ ...a.b, c: 'what' }`, and using an if-else statement.

**Lodash's `set` Method**

Lodash is a popular utility library for JavaScript that provides various helper functions. In this case, we're using its `set` function to update the value of `c` in the object `a.b`.

Pros:

* Concise and readable syntax
* Efficient implementation under the hood

Cons:

* Requires including an additional library (Lodash) in our test environment
* May not be suitable for all use cases where `set` is not a valid method (e.g., older browsers)

**Spreading Object Literals**

The spreading syntax `{ ...a.b, c: 'what' }` creates a new object with the same properties as `a.b`, but with an additional property `c`. This approach is often used in modern JavaScript code.

Pros:

* No additional libraries required
* Easy to understand and implement

Cons:

* May be slower due to the creation of a new object
* Can lead to unexpected behavior if not properly tested

**If-Else Statement**

The if-else statement checks if `a.b` exists, and if so, updates its value. This approach is often used in older JavaScript code or when working with legacy browsers.

Pros:

* No additional libraries required
* May be faster due to the simplicity of the implementation

Cons:

* Less readable syntax compared to Lodash's `set`
* May lead to errors if not properly tested (e.g., checking for existence instead of using the optional chaining operator)

**Considerations**

When choosing an approach, consider the following factors:

* Performance: If speed is critical, the if-else statement might be faster. However, this comes at the cost of readability.
* Readability: Lodash's `set` method and spreading object literals are often more readable than the if-else statement.
* Browser support: Make sure to test your code across various browsers, including older ones.

**Other Alternatives**

If you're looking for alternative approaches or optimizations, consider the following:

* Using `Object.assign()` instead of spreading syntax
* Using a library like `obj-proxy` for more advanced object updates
* Optimizing performance by using techniques like memoization or caching

Keep in mind that benchmarking and optimization can be complex topics. Be sure to thoroughly test your code and consider various factors when choosing an approach.

In conclusion, each approach has its pros and cons, and the choice ultimately depends on your specific use case, performance requirements, and personal preference.

Related benchmarks:

lodash set vs spread conditional merge (version: 0)

Comparing performance of: lodash set vs spread vs just if

Created: 5 years ago by: Guest

Jump to the latest result

lodash set

spread

just if

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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