Run results for: Lodash vs. Ramda vs. VanillaJS

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: Lodash funcional style (idiomatic) vs Lodash funcional style (performance optimized with spread) vs Ramda without relying on currying or composition vs Ramda with currying and composition vs Ramda with transducers vs VanillaJS funcional style (idiomatic) vs VanillaJS funcional style (performance optimized with spread) vs VanillaJS procedural.

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser: Chrome 132

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

VanillaJS procedural

7K/s

VanillaJS functional style performance optimized

6K/s

Lodash performance optimized functional

5K/s

Lodash idiomatic funcional

3K/s

VanillaJS functional style

3K/s

Ramda without relying on currying or composition

907/s

Ramda with currying and compositio

890/s

View exact numbers

Test name	Executions per second
✓ VanillaJS procedural	6,620 Ops/sec
VanillaJS functional style performance optimized	6,326 Ops/sec
Lodash performance optimized functional	5,170 Ops/sec
Lodash idiomatic funcional	2,920 Ops/sec
VanillaJS functional style	2,731 Ops/sec
Ramda without relying on currying or composition	907 Ops/sec
Ramda with currying and compositio	890 Ops/sec

HTML Preparation code:

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

Script Preparation code:

var data = [];
for (var i = 0; i < 10000; i++) {
     data.push({ counter: i });
}

function isOdd(num) {
  return num % 2 === 1;
}

function square(num) {
  return num * num;
}

function lessThanThreeDigits(num) {
  return num.toString().length < 3;
}

var expected = data.map(o => o.counter).filter(isOdd).map(square).filter(lessThanThreeDigits);

Tests:

Lodash funcional style (idiomatic)
var result = _.chain(data) .map('counter') .filter(isOdd) .map(square) .filter(lessThanThreeDigits) .value();
Lodash functional style (performance optimized with spread)
var result = _.reduce(data, function(acc, d) { var c = d.counter; return (isOdd(c) && lessThanThreeDigits(square(c))) ? [...acc, square(c)] : acc; }, []);
Ramda without relying on currying or composition
var result = R.filter(lessThanThreeDigits, R.map(square, R.filter(isOdd, R.pluck('counter', data))));
Ramda with currying and composition
var result = R.pipe( R.pluck('counter'), R.filter(isOdd), R.map(square), R.filter(lessThanThreeDigits) )(data);
Ramda with transducers
const xf = R.compose( R.map(R.prop('counter')), R.filter(isOdd), R.map(square), R.filter(lessThanThreeDigits) ); const result = R.transduce(xf, R.flip(R.append), [], data);
VanillaJS funcional style (idiomatic)
var result = data.map(o => o.counter).filter(isOdd).map(square).filter(lessThanThreeDigits);
VanillaJS functional style (performance optimized with spread)
var result = data.reduce((acc, d) => { var c = d.counter; return (isOdd(c) && lessThanThreeDigits(square(c))) ? [...acc, square(c)] : acc; }, []);
VanillaJS procedural
var result = new Array(); for (var i = 0; i < data.length; i++) { var c = data[i].counter; if (isOdd(c)) { var r = square(c); if (lessThanThreeDigits(r)) { result.push(r); } } }