Benchmark: Lodash Streams vs Vanilla Javascript

Script Preparation code:

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

var arr = [];
for(var i = 0; i < 100000; i++){
  arr.push({value:getRandomInt(100)});
}

Tests:

Lodash
result = _(arr) .filter((value) => value > 50 ) .map((value) => ({ "value": value })) .value(); console.log(result);
Vanilla Javascript
const result = arr .filter(value => value > 50) .map(value => ({ value })); console.log(result);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash
Vanilla Javascript

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_1_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.1.1 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 18 on iOS 18.1.1

View result in a separate tab

Test name	Executions per second
Lodash	580.9 Ops/sec
Vanilla Javascript	556.8 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 26 days ago):

LLMs can make mistakes. Check important info.

This benchmark compares the performance of two approaches to filtering and mapping an array of objects in JavaScript: one using the Lodash library and the other using vanilla JavaScript.

### Benchmark Overview

1. **Benchmark Name**: Lodash Streams vs Vanilla Javascript
2. **Array Preparation**: 
   - A function `getRandomInt(max)` generates random integers between 0 and 99.
   - An array named `arr` is populated with 100,000 objects, where each object contains a single property `value` with random integer values.

### Test Cases

1. **Lodash Version**:
   ```javascript
   result = _(arr)
       .filter((value) => value > 50)
       .map((value) => ({ "value": value }))
       .value();
   console.log(result);
   ```
   - This version uses **Lodash**, a popular JavaScript utility library that provides helpful functions for manipulating arrays, objects, and other data types. 
   - The `_()` function initializes a Lodash chain, allowing for a sequence of method calls (`filter` and `map`) to be executed in a readable, chainable manner.
   - **Lodash Pros**:
     - Chainable functions can lead to more readable and maintainable code.
     - The library may optimize performance internally for various scenarios.

2. **Vanilla JavaScript Version**:
   ```javascript
   const result = arr
       .filter(value => value > 50)
       .map(value => ({ value }));
   console.log(result);
   ```
   - This version uses native JavaScript Array methods `filter` and `map`.
   - Both methods are part of the Array prototype and allow for concise manipulation of array data without the need for external libraries.

### Performance Results

- **Lodash**: 580.92 executions per second
- **Vanilla JavaScript**: 556.76 executions per second

### Pros and Cons

#### Lodash
- **Pros**:
  - Provides a comprehensive set of utilities beyond just array manipulation, such as object cloning and deep comparisons.
  - Can offer optimized performance in specific use cases, especially with large datasets or more complex data structures.
  - Makes it easier to write readable and clear code.

- **Cons**:
  - Adds an additional dependency to the project, which can increase bundle size.
  - Slightly lower performance in this specific benchmark compared to vanilla JavaScript.

#### Vanilla JavaScript
- **Pros**:
  - No external dependencies or libraries required, leading to smaller bundle sizes and fewer compatibility issues.
  - Typically faster for straightforward operations due to direct access to the language's core functionalities.

- **Cons**:
  - For more complex operations, code can become less readable compared to using a library that provides chainable methods.
  - Developers may need to handle edge cases manually that libraries like Lodash can manage automatically.

### Other Considerations

- The choice between using Lodash or vanilla JavaScript often depends on project requirements, team familiarity with libraries, and the complexity of operations. While Lodash may enhance productivity with its extensive utilities, vanilla JavaScript is generally preferred for simpler tasks due to its performance and avoidance of overhead.
- Alternatives to Lodash include other utility libraries like *underscore.js*, or even modern JavaScript frameworks like React or Vue.js that come with built-in functionalities that might reduce the need for such utility libraries for specific tasks.

### Conclusion

In this benchmarking test, both Lodash and vanilla JavaScript demonstrate their capabilities for filtering and mapping operations. While Lodash provides a more expressive and potentially optimized approach in some scenarios, vanilla JavaScript showcases its performance advantage without the added complexity of library dependencies. Each approach has its merits, and the decision to use one over the other will depend on the specific needs of the project and the preferences of the development team.

Related benchmarks:

Lodash Streams vs Vanilla Javascript (version: 1)

Comparing performance of: Lodash vs Vanilla Javascript

Created: 26 days ago by: Guest

Jump to the latest result

Lodash

Vanilla Javascript

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 26 days ago):