Benchmark: JS native vs js native loop vs Ramda vs. Lodash 2

JS native vs js native loop vs Ramda vs. Lodash 2 (version: 0)

Compares performance on the same task using Lodash vs two styles of Ramda vs two styles of "native" Javascript. In all cases the task is pulling "counter" property from each item in an array, filtering out odd items, squaring them, then returning those squared values that have less than two digits.

Comparing performance of: JS native vs Ramda with transducer vs Ramda with transducer (no prop) vs Ramda with currying and composition vs Ramda without relying on currying or composition vs Ramda with currying and composition (no pluck) vs Lodash vs js native loop

Created: 2 years ago by: Guest

Jump to the latest result

HTML Preparation code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.28.0/ramda.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

AخA
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.28.0/ramda.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>

Script Preparation code:

var data = _.range(100000).map(function(i) {
  return {
    counter: i
  }
});

function isOdd(num) {
  return num % 2 === 1;
}

function square(num) {
  return num * num;
}

function lessThanThreeDigits(num) {
  return num.toString().length < 3;
}

​x
 
var data = _.range(100000).map(function(i) {  return {    counter: i  }});​function isOdd(num) {  return num % 2 === 1;}​function square(num) {  return num * num;}​function lessThanThreeDigits(num) {  return num.toString().length < 3;}

Tests:

JS native

var result = data
  .map(({counter}) => counter)
  .filter(isOdd)
  .map(square)
  .filter(lessThanThreeDigits)

 
var result = data  .map(({counter}) => counter)  .filter(isOdd)  .map(square)  .filter(lessThanThreeDigits)

Ramda with transducer

var transducer = R.compose (
  R.map(R.prop('counter')),
  R.filter(isOdd),
  R.map(square),
  R.filter(lessThanThreeDigits),
);

var result = R.transduce (
  transducer,
  (acc, val) => {
    acc.push(val);
    return acc;
  },
  [],
  data,
);

 
var transducer = R.compose (  R.map(R.prop('counter')),  R.filter(isOdd),  R.map(square),  R.filter(lessThanThreeDigits),);​var result = R.transduce (  transducer,  (acc, val) => {    acc.push(val);    return acc;  },  [],  data,);

Ramda with transducer (no prop)
var transducer = R.compose ( R.map(({counter}) => counter), R.filter(isOdd), R.map(square), R.filter(lessThanThreeDigits), ); var result = R.transduce ( transducer, (acc, val) => { acc.push(val); return acc; }, [], data, );
var transducer = R.compose (
R.map(({counter}) => counter),
R.filter(isOdd),
R.map(square),
R.filter(lessThanThreeDigits),
);

var result = R.transduce (
transducer,
(acc, val) => {
acc.push(val);
return acc;
},
[],
data,
);
Ramda with currying and composition
var result = R.pipe( R.pluck('counter'), R.filter(isOdd), R.map(square), R.filter(lessThanThreeDigits) )(data);
var result = R.pipe(
R.pluck('counter'),
R.filter(isOdd),
R.map(square),
R.filter(lessThanThreeDigits)
)(data);
Ramda without relying on currying or composition
var result = R.filter(lessThanThreeDigits, R.map(square, R.filter(isOdd, R.pluck('counter', data))));
var result = R.filter(lessThanThreeDigits,
R.map(square,
R.filter(isOdd,
R.pluck('counter', data))));
Ramda with currying and composition (no pluck)
var result = R.pipe( R.map (({counter}) => counter), R.filter(isOdd), R.map(square), R.filter(lessThanThreeDigits) )(data);
var result = R.pipe(
R.map (({counter}) => counter),
R.filter(isOdd),
R.map(square),
R.filter(lessThanThreeDigits)
)(data);

Lodash

var result = _.chain(data)
  .map('counter')
  .filter(isOdd)
  .map(square)
  .filter(lessThanThreeDigits)
  .value();

 
var result = _.chain(data)  .map('counter')  .filter(isOdd)  .map(square)  .filter(lessThanThreeDigits)  .value();

js native loop

let result = [];
for (let i=0; i<data.length; i++) {
  const { counter } = data[i];
  if (isOdd (counter)) {
    let squared = square (counter);
    if (lessThanThreeDigits (squared)) {
      result.push (squared);
    }
  }
}

 
let result = [];for (let i=0; i<data.length; i++) {  const { counter } = data[i];  if (isOdd (counter)) {    let squared = square (counter);    if (lessThanThreeDigits (squared)) {      result.push (squared);    }  }}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
JS native
Ramda with transducer
Ramda with transducer (no prop)
Ramda with currying and composition
Ramda without relying on currying or composition
Ramda with currying and composition (no pluck)
Lodash
js native loop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:101.0) Gecko/20100101 Firefox/101.0

Browser/OS: Firefox 101 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
JS native	169.1 Ops/sec
Ramda with transducer	45.9 Ops/sec
Ramda with transducer (no prop)	167.2 Ops/sec
Ramda with currying and composition	50.8 Ops/sec
Ramda without relying on currying or composition	50.7 Ops/sec
Ramda with currying and composition (no pluck)	183.6 Ops/sec
Lodash	151.4 Ops/sec
js native loop	243.9 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 4 months ago):

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

What is being tested?

The benchmark compares the performance of four different approaches to filter an array of numbers and push the squared value to an output array:

JS Native Loop: A simple loop that iterates through the input array, checks if the number is odd, squares it, and pushes the result to the output array.
Lodash: The filter method from Lodash is used to create a new array with only the odd numbers, which are then squared and pushed to an output array.
Ramda with Currying and Composition: Ramda's filter function is used with curried and composited logic to achieve the same result as Lodash.
Ramda with Transducer: Another approach using Ramda's transducer functionality to filter and map the data.

Key insights

The JS Native Loop appears to be the fastest, likely due to its simplicity and direct access to the input array.
Lodash is relatively fast, thanks to its optimized filter method.
Ramda's approaches are slower than Lodash and the native loop, possibly due to the overhead of functional programming concepts like currying and transducers.

Comparison

Here's a rough ranking of the approaches by their performance:

JS Native Loop (~50-60% faster than the next best)
Lodash
Ramda with Transducer
Ramda with Currying and Composition

Keep in mind that these results may vary depending on the specific use case, input data, and browser/OS configurations.

Takeaways

When dealing with simple filtering tasks, a native loop can be an efficient solution.
Lodash's filter method is a solid choice when you need to perform multiple operations on an array.
Ramda's functional programming concepts require more overhead, but can still offer benefits like immutability and composability.

I hope this analysis helps!

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**What is being tested?**

The benchmark compares the performance of four different approaches to filter an array of numbers and push the squared value to an output array:

1. **JS Native Loop**: A simple loop that iterates through the input array, checks if the number is odd, squares it, and pushes the result to the output array.
2. **Lodash**: The `filter` method from Lodash is used to create a new array with only the odd numbers, which are then squared and pushed to an output array.
3. **Ramda with Currying and Composition**: Ramda's `filter` function is used with curried and composited logic to achieve the same result as Lodash.
4. **Ramda with Transducer**: Another approach using Ramda's transducer functionality to filter and map the data.

**Key insights**

* The JS Native Loop appears to be the fastest, likely due to its simplicity and direct access to the input array.
* Lodash is relatively fast, thanks to its optimized `filter` method.
* Ramda's approaches are slower than Lodash and the native loop, possibly due to the overhead of functional programming concepts like currying and transducers.

**Comparison**

Here's a rough ranking of the approaches by their performance:

1. JS Native Loop (~50-60% faster than the next best)
2. Lodash
3. Ramda with Transducer
4. Ramda with Currying and Composition

Keep in mind that these results may vary depending on the specific use case, input data, and browser/OS configurations.

**Takeaways**

1. When dealing with simple filtering tasks, a native loop can be an efficient solution.
2. Lodash's `filter` method is a solid choice when you need to perform multiple operations on an array.
3. Ramda's functional programming concepts require more overhead, but can still offer benefits like immutability and composability.

I hope this analysis helps!

Related benchmarks: