Benchmark: Lodash Vanilla vs Lodash FP

HTML Preparation code:

<script src='https://cdn.jsdelivr.net/g/lodash@4(lodash.min.js+lodash.fp.min.js)'></script>

Script Preparation code:

  var fp = _.noConflict();
  
  var arr = [
    {
      type: 'foo',
      name: 'foo'
    },
    {
      type: 'bar',
      name: 'bar'
    },
    {
      type: 'foo',
      name: 'a'
    },
    {
      type: 'bar',
      name: 'b'
    },
    {
      type: 'foo',
      name: 'c'
    },
    {
      type: 'cat',
      name: 'cat'
    },
    {
      type: 'foo',
      name: 'foo'
    },
    {
      type: 'bar',
      name: 'uuu'
    },
    {
      type: 'bar',
      name: 'tttt'
    },
    {
      type: 'nothing',
      name: 'foo'
    },
    {
      type: 'foo',
      name: 'x'
    }
  ];

var _mapFn = (item) => Object.assign({}, {name: item.name.toUpperCase()});
var _filterFn = (item) => item.type === 'foo';

Tests:

Lodash Vanilla
const result = _.filter(_.map(arr, _mapFn), _filterFn);
Lodash FP
const result = fp.flow(fp.map(_mapFn), fp.filter(_filterFn))(arr);
Lodash Vanilla (Chained)
const result = _(arr).map(_mapFn).filter(_filterFn).value();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Lodash Vanilla
Lodash FP
Lodash Vanilla (Chained)

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 Definition JSON**

The provided JSON represents a benchmark test between two versions of Lodash: Vanilla and FP (Functional Programming). The test is designed to measure the performance of each version in filtering an array after mapping it with a custom function.

**Options Compared**

There are three options compared:

1. **Lodash Vanilla**: This option uses the traditional, imperative approach to map and filter arrays.
2. **Lodash FP**: This option uses a functional programming style to map and filter arrays.
3. **Chained Lodash Vanilla**: This option chains multiple methods on the same object to achieve similar results as the original vanilla implementation.

**Pros and Cons**

Here are some pros and cons of each approach:

* **Lodash Vanilla**:
	+ Pros: Familiar, imperative syntax; often easier to understand for those familiar with traditional JavaScript.
	+ Cons: May be slower due to the overhead of multiple function calls.
* **Lodash FP**:
	+ Pros: Often faster than traditional approaches due to pipeline optimization; more concise and expressive syntax.
	+ Cons: May require more mental overhead for those new to functional programming; less familiar syntax for some developers.
* **Chained Lodash Vanilla**:
	+ Pros: Similar performance characteristics to the original vanilla implementation; more readable syntax by chaining methods.
	+ Cons: May lead to increased memory usage due to object creation and method calls.

**Library and Purpose**

The `lodash` library is a popular JavaScript utility library that provides a wide range of functional programming helpers, including `map`, `filter`, and others. In this benchmark, it's used in both vanilla and FP styles to demonstrate the performance differences between the two approaches.

**Special JS Feature or Syntax**

In this benchmark, we're not explicitly using any special JavaScript features or syntax beyond the Lodash library itself. However, if you were to modify the code to use modern features like async/await or arrow functions, it might impact the performance results.

**Other Alternatives**

If you'd like to explore alternative implementations, here are a few options:

1. **Native JavaScript**: You could implement the map and filter functions using native JavaScript methods, such as `forEach` and `filter`.
2. **React Hooks**: If you're familiar with React, you might consider using React Hooks to implement functional components that perform similar operations.
3. **Other library implementations**: Depending on your needs, you might choose a different library like `lodash-es`, `ramda`, or `fp-js` for their unique features and performance characteristics.

When choosing an approach, consider the trade-offs between readability, maintainability, and performance. For most use cases, Lodash's FP implementation will provide a good balance of efficiency and ease of use.

Related benchmarks:

Lodash Vanilla vs Lodash FP (version: 0)

Comparing performance of: Lodash Vanilla vs Lodash FP vs Lodash Vanilla (Chained)

Created: 6 years ago by: Guest

Jump to the latest result

Lodash Vanilla

Lodash FP

Lodash Vanilla (Chained)

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):