{"componentChunkName":"component---src-pages-markdown-remark-fields-slug-js","path":"/engineering/be-more-manipulative-with-underscore-js/","result":{"data":{"markdownRemark":{"id":"3ee87568-86e5-5245-8c7b-abd9f8531df6","excerpt":"Manipulating collections like arrays and objects can be a hassle with vanilla JS. Thankfully there are libraries like Underscore which offer some extremely…","html":"

Manipulating collections like arrays and objects can be a hassle with vanilla JS. Thankfully there are libraries like Underscore which offer some extremely useful low level utility functions.

\n

Underscore JS provides much of the array/collection/object manipulating functionality similar to what you may have seen in other languages such as Ruby. As for calling the methods if you're familiar with JQuery, Underscore is identical except instead of \"$\" we use the library's namesake \"_\" to access the methods.

\n

Underscore has over 100 functions that can be used on collections, arrays, objects and functions (you read that right, function functions). I'm going to be discussing a few of the functions that work on collections, but definitely check out what else Underscore has to offer.

\n

Once you know how to re-create the same output with Underscore syntax, you'll never want to go back to plain old JS and using nested for loops. One of the most helpful tools Underscore provides for accomplishing this is...

\n

_.each

\n

The _each method does exactly what it sounds like. It works on collections (arrays or objects), and will iterate over each element in the collection invoking the function you specified with 3 arguments (value, index, list) with index being replaced by key if used on an object. It's also worth noting _.each returns the list if you want chain some more manipulation after calling _.each.

\n

Here's a quick example showing how it can be used and what's available to you when you call it.

\n
var someArray = ["a", "b", "c"];\n \n_.each(someArray, function (element, index, list) {\n    console.log("value: " + element + " index: " + index + " list: " + list)\n});\n \n// outputs\nvalue: a index: 0 list: a,b,c\nvalue: b index: 1 list: a,b,c\nvalue: c index: 2 list: a,b,c
\n

With that out of the way, let's think about what this means in terms of cleaning up our code. To do the above normally we would write a little for loop like this.

\n
for ( var i = 0; i < someArray.length; i++) {\n    console.log("value: " + someArray[i] + " index: " + i + " list: " + someArray);\n}
\n

Admittedly these two aren't all that different, but let's imagine we have a function defined elsewhere that will deal with handling the arguments passed in on each iteration. We can replace that same functionality with a significantly less verbose solution.

\n
_.each(someArray, doStuff);
\n

To quote Antoine de Saint Exupéry: \"It seems that perfection is attained not when there is nothing more to add, but when there is nothing more to remove.\" While it may not be perfection, there are certainly arguments to be made about performance, I think you would be hard pressed to find anything further simplify this code.

\n

_.map

\n

While _.each will return the original list you input, _.map will allow you to manipulate or otherwise transform the input as you please and then returns the new array. Map needs a minimum of 2 arguments, first the collection and then the function to be executed on each iteratee and also accepts a third argument which dictates the context for the iterating function.

\n
var numbersObject = {1:1, 2:4, 3:9};\n \nvar productArray = _.map(numbersObject, function(value, key) {\n    return value * key;\n});\n \n//proudctArray is now\n[1, 8, 27]
\n

Before you go writing some functions to pass as an argument to _.map be sure to take a peek at the other methods available in Underscore. Map is a little bit like having the Lego blocks to build whatever you want, but if you already have a pre-packaged Batcave available, it might not be the best use of your time building it from scratch.

\n

_.pluck

\n

To illustrate my childhood toy analogy let's talk about _.pluck. Pluck is basically just a refined version of _.map made for a specific use case. That's not to say there aren't ways of combining the two to achieve something a little more complex, but if standard _.pluck behaviour is all you're after then don't go re-inventing the wheel.

\n

Often with data objects we're interested in the values of a specific key, for example let's say we have an array of movies.

\n
var movies = [\n    {title: "Dracula", genre: "Horror", star: "Nosferatu"},\n    {title: "Cast Away", genre: "Drama", star: "Wilson"},\n    {title: "Airplane", genre: "Comedy", star: "Leslie Nielsen"}\n];
\n

Now we want to just have an array of the titles of these movies.

\n
var titlesArray = _.pluck(movies, 'title');\n \n//titlesArray is now\n["Dracula", "Cast Away", "Airplane"]
\n

Not much else to say about it, it works on collections and is extremely handy for a very common task.

\n

_.filter

\n

Another example of a more refined _.map function that comes in handy often enough. Aptly named this method will return an array of only the things that make it through your test.

\n
var numbers = [1,33,6,24,8,21,11,22];\n \nvar lessThanTen = _.filter(numbers, function(number) {\n    return number < 10;\n});\n \n//lessThanTen is now\n[1, 6, 8]
\n

Works on collections and kitchen sink faucets.

\n

_.conclusion

\n

Just kidding there's no _.conclusion method.

\n

I hope by now that you get the idea that if what you need to do isn't already a method, Underscore's _.map is a powerful tool for accomplishing whatever obscure collection manipulation your heart desires.

\n

So get out there, take a look through Underscore JS and start writing less obfuscated (nested) for loops with the help of _.each.

\n","headings":[{"value":"_.each","depth":2},{"value":"_.map","depth":2},{"value":"_.pluck","depth":2},{"value":"_.filter","depth":2},{"value":"_.conclusion","depth":2}],"fields":{"slug":"/engineering/be-more-manipulative-with-underscore-js/"},"frontmatter":{"metatitle":null,"metadescription":null,"description":null,"title":"Be More Manipulative with Underscore JS","canonical":null,"date":"February 16, 2016","updated_date":null,"tags":["JavaScript","UnderscoreJs"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/a0908f5af6a6436a7da16f3b91888bed/2ad7f/underscore.webp","srcSet":"/static/a0908f5af6a6436a7da16f3b91888bed/1c9b5/underscore.webp 200w,\n/static/a0908f5af6a6436a7da16f3b91888bed/f1752/underscore.webp 400w,\n/static/a0908f5af6a6436a7da16f3b91888bed/2ad7f/underscore.webp 800w,\n/static/a0908f5af6a6436a7da16f3b91888bed/e7405/underscore.webp 1200w,\n/static/a0908f5af6a6436a7da16f3b91888bed/99b9e/underscore.webp 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Zakary Hughes","github":null,"bio":"Zak is our resident front end development and design intern. He studied web design and development at the Northern Alberta Institute of Technology. One of his passions, outside of work, is fitness. Legend has it that he once ate a two-bite brownie in a single bite.","avatar":null}}}},"pageContext":{"id":"3ee87568-86e5-5245-8c7b-abd9f8531df6","fields__slug":"/engineering/be-more-manipulative-with-underscore-js/","__params":{"fields__slug":"engineering"}}},"staticQueryHashes":["1171199041","1384082988","1711371485","1753898100","2100481360","229320306","23180105","528864852"]}