Client Pay Portal

A Bit About Underscore.js

Around the beginning of June, I came across this article by Joel Hooks. Joel challenges JavaScript developers to stop writing for loops and start using the each method provided by underscore.js . I decided to jump in with both feet and made a conscious effort to not write any type of loop for the next 30 days (just to test it out), and I still haven’t written one. Underscore is now a tool that I’m going to keep in my utility belt.

First, let’s talk about Underscore.js

“If I sit down in front of a blank HTML page, and want to start being productive immediately, what do I need?”
                                               - Underscore.js website

I first looked at underscore about a year and a half ago when I started learning some Backbone, and I’m not going to lie, I was scared and the very first line scared me off. I had just gotten comfortable with the concept of object-oriented programming in JavaScript, and as soon as I saw “useful functional programming helpers” I discarded it because there was no way I was going to start getting into functional programming. Fast forward to today and I’m kicking myself for not getting into underscore sooner. Underscore has tons of helper functions that make development quicker and easier. The Gzipped and minified version of the library is only 5kb (to compare, minified jQuery 2.1.1 is 83kb), and after using it for a while, it’s super powerful.

Underscore Highlight Reel

I just want to go over a few of the underscore functions that I’ve found incredibly useful (and am using them in production client code). First, without a doubt the most useful function that I’ve used is the each function:

Use it now, and you will be a better developer for it. For me, this was the gateway drug into the world of underscore. Once I was comfortable with each, I slowly delved into the rest of the library to see what I could use.

Another useful function is debounce:

Instead of hashing out some timers and different detections, this handy helper packages it all up very nicely for us. I’m loving this one too.

Want to recreate an object without looping through it and finding certain properties? No problem, underscore has you covered with pick:

Sometimes you don’t need all of the properties in an object, so why have them clutter up your application?

These are just a few of MANY incredibly useful functions underscore provides. I encourage you to take a look at the full offering on the underscore website – it provides examples for each function, is super detailed, and easy to understand.

Clean Before Lean on a Team

Admittedly, using underscore takes slightly longer than doing some of these things in vanilla JavaScript, but to echo the last note made on Joel’s article: write code that is readable before squeezing out the bytes. If you are a one-person operation writing all of the code by yourself and you’re the only one who will ever have to work with it, sure, go ahead and figure out the most minimal code to write, but if you’re on a team or care about readability, underscore will help you out. I used my impressive rhyming skills to come up with CLEAN BEFORE LEAN ON A TEAM (if you or anyone you know has said this before me then you can have all the credit, I promise). You should always make sure you and your team members can read your code and underscore.js is going to be a great help in that endeavor.

So go ahead, read Joel’s article and start the 30-day no-loop challenge today.



Wiz E. Wig, Mascot & Director of Magic
Wiz E. Wig

Director of Magic