Welcome to a new series on learning Underscore and Lodash.

When I comes to choosing JavaScript frameworks, I’m very fussy. I believe it pays to be fussy discerning.

The Internet is suffering from a bad dose of page bloat, with the average web page weighing in at more then a hefty 2mb, and this is increasing all the time.

More and more devices are mobile now, so users are increasingly relying on 4G or even 3G connections, and the result is a crappy user experience.

Casual use of over-sized JavaScript frameworks are part of the problem. If you care about your users, it pays to take a hard look at which frameworks you really need, and how much of those frameworks you are actually using.

Which JavaScript frameworks are essential. Provided you know the JavaScript language well, I don’t believe there are any libraries or frameworks that are 100% essential.

However, there are some that are near essential. Why spend lots of time reinventing the wheel when there’s free open source code available that that’s probably better quality than you’ll end up writing anyway? Isn’t it better to be focused on solving the real business problems? Ignoring libraries and frameworks altogether is a recipe for slow productivity.

The main framework that I use is jQuery. It has plenty of detractors, but if you know it well then you understand where it can be slow and you just don’t code like that. If you don’t need to support IE8 or worse, its only a 32kb download when minified and gzipped. And because it’s so widely used, there’s a very good chance that your users will already have a cached copy and not even need to download it from your site (or CDN).

youmightnotneedjquery.com is a great site. I agree that you might not need it, but the examples show that in many cases jquery is so much more elegant than raw JavaScript.

Apart from jQuery, I like underscore / lodash. They are separate libraries, but they are similar (lodash was originally a fork of underscore). In this post I’ll use the symbol _ to mean both underscore and lodash (and underdash).

What is _ ?

It’s a utility library offering core functionality. Underscore was originally created by Jeremy Ashkenas, who is also the creator of Backbone and CoffeeScript. John-David Dalton forked Underscore and enhanced it, naming the fork Lodash.

Other contributors to Underscore and/or lodash include Benjamin Tan, Justin Ridgewell, Mathias Bynens, Graeme Yeates, Brad Dunbar and Blaine Bublitz

For details on the differences between the two see this stack overflow question

For details of some of the features added to v3 of lodash, watch Lo-Dash and JavaScript Performance Optimizations

John and Jeremy began discussing a merge this year and created Underdash

How big?

Both libraries contain a lot of functionality, but are small.

Underscore v1.8.3 has 131 functions (including aliases) and is only 5k minified and gzipped.

Lodash v3.10.1 has 219 functions altogether, and is 17k minified and gzipped, but can be lot smaller than this because it can be configured to only use the functions that you are actually using with lodash partials

Common objection #1: _ is so old / out of fashion

More than any other language, there is a whole load of hype surrounding JavaScript. The idea of frameworks being in or out of fashion is not healthy. We want to write quality software that will last, not just something to be thrown out when the next fashionable framework comes in.

Both _ remain popular, they just don’t have the hype train that brand new libraries and frameworks tend to have.

_ is very mature, Underscore has had over 2000 commits. Lodash has had over 5000. Both are still very much under active development.

Common objection #2: It’s not going to be as fast as native JavaScript

This is correct. It’s not as fast. It’s faster!

Don’t believe me? Try this demo yourself: jsperf performance tests

I like this test because you can see the actual implementation code alongside the results. The “Real fast native with pre-allocation” is fastest


var arrlen = arr.length, r = new Array(arrlen), ridx = 0;
for (var i = 0; i < arrlen && r.length < limit; i++) {
m = square(arr[i]);
if (odd(m)) r[ridx++] = m;
}
r = r.slice(0, ridx);


Ordinary mortals like me aren’t going to produce something like that on the first attempt.

If you would automatically think to write the real fast native with pre-allocation then your way smarter than me. You’re also probably too smart for your team-mates, because not many people are going to find that code easy to read.

Realistically most people would write the basic native implementation or something similar to this if they weren’t using a library:


var r = arr.map(square).filter(odd).slice(0, limit);


You might be using it without even realising

Backbone is built on top of Underscore. Drupal 8 uses Underscore. Many other do too. In fact lodash is the most depended on module on npm, and at the time of writing underscore is the 4th most depended upon. For details see here:
most depended upon

_ vs $

For most functions, $ and _ are about as readable as each other (quite easy to read).

jQuery ($) is designed primarily for DOM manipulation, whereas _ is primarily about logical operations on objects away from the DOM. So although you’ll find functions such as find and filter in both _ and $, comparisons are like comparing apples with oranges.

The map function is logically equivalent, both brands of _ are a few times faster than $, however your users won’t notice any difference unless your object is huge. If you only need to do small map operations, choose based on what your team is more comfortable with.

https://jsperf.com/native-vs-array-js-vs-underscore/147

There are no substantial differences between
$.grep vs _.filter

lodash performs better than jQuery at extend, but again jQuery is fast enough in most cases not to matter.

_.contains is faster than $.InArray but both are slower than native underscore contains vs InArray vs indexOf

The general performance pattern here is _ is faster than $, so if you use both and are dealing with large datasets, its usually better to either use _ or native code.

In the next episode

We will be covering the most commonly used functions in the latest versions of underscore and lo dash, along with examples of how you might solve a problem using native JavaScript, and how _ makes the problem simpler or more efficient.

We will also cover any differences between the same functions in Underscore

Further Reading

Page bloat update: The average web page is more than 2 MB in size
Eric Clemons – JavaScript Fatigue
Lo-Dash and JavaScript Performance Optimizations – John-David Dalton
Lodash: 10 Javascript Utility Functions That You Should Probably Stop Rewriting
Eloquent Javascript with Underscore.js
You Might Not Need Underscore
Brian Lonsdorf: Hey Underscore, You’re Doing It Wrong!