10 Useful Things You Can Do With Underscore.js

Underscore is a widely used library of Javascript functions that help you do common things quickly and easily. There are a whole bunch of functions that help you manipulate arrays and array-like objects, which I'll focus on here. Read the docs for Underscore.js for more.

flatten

From the docs: Flattens a nested array (the nesting can be to any depth). If you pass shallow, the array will only be flattened a single level.

_.flatten([1, [2], [3, [[4]]]]);
=> [1, 2, 3, 4];

_.flatten([1, [2], [3, [[4]]]], true);
=> [1, 2, 3, [[4]]];

without

From the docs: Returns a copy of the array with all instances of the values removed.

_.without(['Lil Wayne', 'Lil Yachty', 'Lil Pump'], 'Lil Pump');
=> ['Lil Wayne', 'Lil Yachty’]

union

From the docs: Computes the union of the passed-in arrays: the list of unique items, in order, that are present in one or more of the arrays.

_.union(['yeezy', 'weezy', 'jeezy'], ['yeezy', 'jay-z', 'dame dash'], ['birdman', 'weezy']);
=> ["yeezy", "weezy", "jeezy", "jay-z", "dame dash", "birdman”]

intersection

From the docs: Computes the list of values that are the intersection of all the arrays. Each value in the result is present in each of the arrays

_.intersection(['yeezy', 'weezy', 'jeezy'], ['yeezy', 'jay-z', 'dame dash'], ['birdman', 'weezy', 'yeezy']);
=> ["yeezy”]

difference

From the docs: Similar to without, but returns the values from array that are not present in the other arrays.

_.difference(['yeezy', 'weezy', 'jeezy'], ['jeezy']);
=> ["yeezy", "weezy”]

zip

From the docs: Merges together the values of each of the arrays with the values at the corresponding position. Useful when you have separate data sources that are coordinated through matching array indexes.

_.zip(['Kanye West', 'Lil Wayne', 'Jay-Z'], ['Yeezus', 'Tha Carter II', 'The Blueprint']);
==> [['Kanye West', 'Yeezus'], ['Lil Wayne', 'Tha Carter II'], ['Jay-Z', 'The Blueprint']];

unzip

From the docs: The opposite of zip. Given an array of arrays, returns a series of new arrays, the first of which contains all of the first elements in the input arrays, the second of which contains all of the second elements, and so on.

_.unzip([['Kanye West', 'Yeezus'], ['Lil Wayne', 'Tha Carter II'], ['Jay-Z', 'The Blueprint']]);
==> [["Kanye West", "Lil Wayne", "Jay-Z"], ["Yeezus", "Tha Carter II", "The Blueprint”]]

object

From the docs: Converts arrays into objects. Pass either a single list of [key, value] pairs, or a list of keys, and a list of values. Passing by pairs is the reverse of pairs. If duplicate keys exist, the last value wins.

_.object(['Kendrick Lamar', 'Jay-Z', 'Lil Wayne'], ['California', 'New York', 'Louisiana']);
==> {Kendrick Lamar: "California", Jay-Z: "New York", Lil Wayne: "Louisiana"}

_.object([['Kendrick Lamar', 'California'], ['Jay-Z', 'New York'], ['Lil Wayne', 'Louisiana']]);
==> {Kendrick Lamar: "California", Jay-Z: "New York", Lil Wayne: "Louisiana”}

where

From the docs: Looks through each value in the list, returning an array of all the values that matches the key-value pairs listed in properties.

var listOfAlbums = [
    {
        title: "Graduation",
        artist: "Kanye West",
        year: 2007
    },
    {
        title: "Yeezus",
        artist: "Kanye West",
        year: 2013
    },
    {
        title: "Tha Carter II",
        artist: "Lil Wayne",
        year: 2005
    }
];

_.where(listOfAlbums, {artist: "Kanye West"});
=> [
    {title: "Graduation", artist: "Kanye West", year: 2006}, 
    {title: "Yeezus", artist: "Kanye West", year: 2010}
]
];

pluck

From the docs: A convenient version of what is perhaps the most common use-case for map: extracting a list of property values.

var rappers = [{name: 'lil wayne', age: 35}, {name: 'kanye west', age: 40}, {name: 'jay z', age: 48}];
_.pluck(rappers, 'name');
=> ["lil wayne", "kanye west", "jay z"]