It was sort of a surprise for me when I discovered inconsistencies in the most popular JavaScript libraries in how they handle their each and forEach loops. This post compares:

forEach Loop in Native JavaScript

each Loop in Lo-Dash

each Loop in jQuery

each Loop in Underscore.js

forEach Loop in Underscore.js

forEach Loop in Native JavaScript

JavaScript Libraries are important (e.g., jQuery, Lo-Dash, Underscore), but in the case of functional loops ( forEach and each ) they create a lot of confusion (for loop can be broken with ‘break’). Let’s inspect the example of native JavaScript code for the forEach method:

[1,2].forEach(function(v){ alert(v); return false; })

This will display us two alert boxes. Try the native JavaScript code yourself in JSFiddle.

This is an expected behavior in most cases because with each iteration we invoke a new function. Unlike the for (var i=0; i<arr.length; i++) {} code that has no function/iterators.

However, in Lo-Dash and jQuery similar code breaks the loops!

Breaking each Loop in Lo-Dash

The Lo-Dash code with each produces only one alert:

_.each([1,2],function(v){ alert(v); return false; })

Try the above Lo-Dash code yourself in JSFiddle.

Breaking each Loop in jQuery

Likewise, the jQuery each example shows only the first alert:

$.each([1,2],function(i, v){ alert(v); return false; })

Try the jQuery code yourself in JSFiddle.

Non-Breaking each Loop in Underscore.js

To complicate the matter, Underscore.js and Backbone.js remain true to the native JavaScript interpretation.

The Underscore.js each example that iterates through the each item and doesn’t break:

_.each([1,2],function(v){ alert(v); return false; })

Try the Underscore each method in JSFiddle.

Non-Breaking forEach Loop in Underscore.js

Just for the sake of it, the Underscore forEach() was tested. It reliably produced the results similar to the native forEach() : two alerts!

The Underscore forEach() code:

_.forEach([1,2],function(i, v){ alert(v); return false; })

Try the Underscrore.js forEach() code yourself at JSFiddle.

[Sidenote] Reading blog posts is good, but watching video courses is even better because they are more engaging. A lot of developers complained that there is a lack of affordable quality video material on Node. It's distracting to watch to YouTube videos and insane to pay $500 for a Node video course! Go check out Node University which has FREE video courses on Node: node.university. [End of sidenote]

The Code-Breaking Difference Between Lo-Dash and Underscore

The conclusion of this brief post is that Lo-Dash is not equal to Underscore, unless a special underscore-compatible version is being used. This was kindly pointed out to me by John-David Dalton (@jdalton):

@azat_co Right Lo-Dash isn’t a drop-in unless you use the Lo-Dash.underscore.js build (it’s linked to on the homepage). Also in cdnjs. — John-David Dalton (@jdalton) November 22, 2013

PS: Underscore.js forEach is more browser compatible than native forEach because the latter was a later addition to the JavaScript API and is not supported by older browsers.

--

Best Regards,

Azat Mardan

Microsoft MVP | Book and Course Author | Software Engineering Leader



https://www.linkedin.com/in/azatm

To contact Azat, the main author of this blog, submit the contact form or schedule a call at clarity.fm/azat and we can go over your bugs, questions and career.