How to rewrite this ramda.js code in vanilla JS

Question

I am removing ramda from some code I've inherited as part of an effort to reduce the JavaScript size. But I'm stuck with the below because this line really baffles me as it apparently doesn't operate on any object.

var iterate = R.addIndex(R.forEach);

The relevant code looks like this:

var lis = $(el).find("ul.navbar-nav:not(.navbar-right) > li:not(.nav-more)");

var iterate = R.addIndex(R.forEach);

iterate(function(li) {
    // Other code

}, lis);

How can I write it in vanilla JS?

Answer 1

Convert the object to a standard array using Array.from() and then you JS Array.forEach():

const iterate = (fn, o) => Array.from(o).forEach(fn)

iterate(function(li) {
  // Other code   
}, lis);

Answer 2

When R.addIndex() is applied to R.forEach() it creates a function that simply iterates over the items and for each assigns an index starting from zero:

var lis = ["a", "b", "c"];

var iterate = R.addIndex(R.forEach);

iterate(function(li, index) {
  console.log(li, index)
}, lis);

<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/ramda.min.js"></script>

This is very easy to replace with vanilla JavaScript using Array.from with Array.forEach():

var lis = ["a", "b", "c"];

var iterate = (fn, list) =>
  Array.from(list)
    .forEach(fn);

iterate(function(li, index) {
  console.log(li, index);
}, lis);

In case Array.from() is not available and an ES5 solution is needed, then Array.prototype.slice() can be used to convert to array:

var lis = ["a", "b", "c"];

var iterate = function(fn, list) {
  Array.prototype.slice.call(list)
    .forEach(fn);
}

iterate(function(li, index) {
  console.log(li, index);
}, lis);

Finally, it is possible to convert to a simple for loop that works with any array-like

var lis = ["a", "b", "c"];

var iterate = function(fn, list) {
  for (var i = 0; i < list.length; i++)
    fn(list[i], i);
}

iterate(function(li, index) {
  console.log(li, index);
}, lis);