AngularJS + Underscore The ultimate web-development toolkit (2018)

Before starting my latest web-development project I was looking for some robust javascript frameworks that I could use.

I was familiar with AngularJS and I loved it, but it doesn’t have a lot of utility methods and I was looking for some solution to solve that problem.

So, I thought about using UnderscoreJS, which is a collection of utility methods with angularJS and I got myself a killer web development toolkit. In this blog post, I have summed up UnderscoreJS methods which I find useful. visit to view all the available methods.

Using Underscore with Angular:

Combining angular and underscore is pretty straightforward, just add import underscore in your index.html, then add it as a service.

And then we could inject it into our controllers.

Useful Underscore methods:

I have compiled a list of my favourite underscoreJS methods, you can always visit to view all the methods that are available in underscore.


This method is used to determine whether the specified value is undefined or not, I know you could always do typeof value === “undefined” to check whether it is undefined or not, but I find this neater.

(Returns a boolean value true/false)


This is also a very useful method, it allows you to define default values for something if they are not present.

var data = {"model":"T", "manufacturer": "Ford", "price": "200"};
_.defaults(data, {"model":"N/A", "N/A": "Ford", "price": "0"})

output: ---> {"model":"T", "manufacturer": "Ford", "price": "200"}

_.defaults({},{"model":"N/A", "N/A": "Ford", "price": "0"})	
output: ---> {"model":"N/A", "N/A": "Ford", "price": "0"}


This method comes handy when you want to search something in the array of objects using some attributes present in the object.
consider the example below.

var data = [{'model':"T", 'manufacturer':'Ford'},{'model':"P", 'manufacturer':'Ford'},{'model':"E", 'manufacturer':'Ford'},{'model':"a", 'manufacturer':'GM'},{'model':"g", 'manufacturer':'GM'}];
_.where(list, properties) 
_.where(data, {'manufacturer':'ford'})
=>[{'model':"T", 'manufacturer':'Ford'},{'model':"P", 'manufacturer':'Ford'},{'model':"E", 'manufacturer':'Ford'}]


This method operates on arrays, and it removes duplicates in the array.
Consider the following example:

_.uniq(array, [isSorted], [iteratee])
=> ['Tim','Jon','Jim'];


if you ever wanted to extract some values from an array of objects, well the pluck method let’s you do that.
Here is the example:

var people = [{name:'Joe', hobby:'baseball'}, {'Jane', hobby:'swimming'}, {'Tim', Hobby:'basketball'}, {'Duke', hobby:'cricket'}];


By merging these two awesome web development frameworks together we can get a pretty nice web development experience, as angular serves as an awesome MVC, and underscore provides a very useful collection of utility methods.

About me:

I am Mohammed Lakkadshaw. A freelance javascript developer with expertise in NodeJs Angular and React. If you like this article please share them on Twitter Facebook and Google+.







Leave a Reply

Your email address will not be published. Required fields are marked *