Benchmark: _.set Lodash.js vs Native

HTML Preparation code:

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.4/lodash.min.js"></script>

Script Preparation code:

var max1 = 100000; // 100,000 (100 Thousand)
var max2 = 10000000; // 10,000,000 (10 Million)
var max3 = 100000000; // 100,000,000 (100 Million)

var arr1 = [];
//for (var i = 0; i <= max1; i++) { arr1.push(i); }

var arr2 = [];
for (var i = 0; i <= max1; i++) { arr2.push(i); }

var arr3 = [];
//for (var i = 0; i <= max3; i++) { arr3.push(i); }

Tests:

Native
const target = {}; const segments = ['pouet', 'toto']; arr2.forEach(function (element, index) { let pointer = target; let thisSegments = [...segments, index]; for (const segment of thisSegments) { pointer[segment] = pointer[segment] || {}; pointer = pointer[segment]; } pointer = index; });
Lodash.js filter
const target = {}; const segments = ['pouet', 'toto']; arr2.forEach(function (element, index) { let thisSegments = [...segments, index]; _.set(target, thisSegments, index); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Native
Lodash.js filter

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

Browser/OS: Chrome 135 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Native	134.3 Ops/sec
Lodash.js filter	94.7 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of two approaches: creating an object with nested properties using native JavaScript and using Lodash's `set` function.

**Native JavaScript Approach**

In this approach, we create an array `arr2` with 100,000 elements and iterate over it to set a series of nested object properties. The process involves:

1. Creating an empty target object.
2. Iterating over the array with `forEach`, creating a new segment by appending the index to the original segments array.
3. Using a `for...of` loop to iterate over the segments and create the corresponding nested object structure.
4. Assigning the current value of the index to the last created property.

The native JavaScript approach is simple, lightweight, and leverages built-in language features.

**Lodash.js `set` Function Approach**

In this approach, we use Lodash's `set` function to achieve the same result as the native JavaScript approach. The process involves:

1. Creating an empty target object.
2. Iterating over the array with `forEach`, creating a new segment by appending the index to the original segments array.
3. Using the `set` function to set the nested property in the target object.

The Lodash.js `set` function is a utility function that allows you to dynamically access and update nested properties in an object. It takes three arguments: the object, the path to the property, and the value.

**Comparison and Considerations**

| Approach | Native JavaScript | Lodash.js `set` |
| --- | --- | --- |
| **Pros** | Lightweight, simple, leverages built-in language features | Abstraction provides readability, easy-to-use API |
| **Cons** | May require more manual iteration and logic for complex paths | Additional dependency (Lodash), potentially slower due to function call overhead |

The Lodash.js `set` approach offers better readability and maintainability, as the code is more concise and abstracted. However, it comes with a performance cost due to the additional function call overhead.

**Library - Lodash**

Lodash is a popular JavaScript utility library that provides various functions for tasks such as array manipulation, object creation, and more. The `set` function is part of this library and allows you to dynamically access and update nested properties in an object.

**Alternative Approaches**

If the performance difference between native JavaScript and Lodash.js is not critical, alternative approaches could be considered:

1. **Using a dedicated object creation library**: Libraries like Immutable.js or Object.assign can provide more efficient and concise ways to create objects.
2. **Caching intermediate results**: If the benchmark is sensitive to repeated computations, caching intermediate results could reduce overhead.

Keep in mind that the performance differences between these approaches may be negligible for most use cases. The choice ultimately depends on the specific requirements and constraints of your project.

Related benchmarks:

_.set Lodash.js vs Native (version: 0)

Comparing performance of: Native vs Lodash.js filter

Created: 6 years ago by: Guest

Jump to the latest result

Native

Lodash.js filter

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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