Javascript Programming & Data Processing with Underscore

At Shockoe.com, many of us heavily use Underscore JS within our Javascript codebases. Underscore provides a number of great functions that implement very common Javascript programming tasks, but a lot of the docs aren’t super self explanatory. It can sometimes be difficult to figure out how to use the various functional programming concepts that Underscore implements in your day-to-day code.

Fortunately, an excellent example data set fell into my lap the other week!

One of my coworkers handed me a giant CSV file containing all of the states in the United States, and asked me to turn it into a JSON array. While I tackled this task with the bulk text editing tools built into my text editor of choice (shout out to Sublime Text 3), this struck me as a pretty nifty data set to do some simple bulk data processing on.

We’ve made this JSON file available on Bitbucket for the public, and I’ll be using it as the demo data set for all of these examples. Get the JSON from our Bitbucket, and place it within the folder you intend to run these examples from, in a file named cities.json.

If needed, get Underscore.js from npm. Just run npm install -g underscore.

Now spin up a node.js instance, and run

let cities = require('./cities.json');
let _ = require('underscore');

The rest of these examples assume these variables will be defined and unmodified.

Let’s go ahead and do a couple of simple operations.

//How about picking 10 random lucky cities from the list?
let theWinners = _.sample(cities, 10);

//get every city from states ending in 'ia'
let iaIaUnderscoreFhtagn = _.filter(cities, function(city){
	return city.endsWith('ia');
});

//or split the string into a city/state object
let citiesObjects = _.map(cities, function(city){
	let splitCity = city.split(', ');

	//pull out the state
	let state = splitCity.pop();

	//and join the city back together
	let city = splitCity.join(', ');

	return {
		state : state,
		city : city
	};
});

//let's see how many towns named Pawnee there are out there
let pawneeCount = _.reduce(cities, function(currentCount, currentCity){
	//get rid of the state name
	let splitCity = currentCity.split(', ');
	splitCity.pop();

	//re-join the city name and compare it to our search term
	if(splitCity.join(', ') === 'Pawnee'){
		return ++ currentCount;
	}else{
		return currentCount;
	}
//start the count at 0
}, 0);

//well, now I want to know what they are!
let pawneeList = _.filter(cities, function(currentCount, currentCity){
	let splitCity = currentCity.split(', ');
	splitCity.pop();

	return splitCity.join(', ') === 'Pawnee';
});

Underscore also really encourages javascript code reuse by making small functions that only accomplish a single task. Take the following utility function:

function getNameForCity(cityString){
	//split out the state token from the full city name.  There's always a 
	//comma and a space between the city and space in this data.
	let splitCity = cityString.split(', ');
	return splitCity[splitCity.length - 1];
}

Using just this one function we can do a number of things, such as counting the number of cities in each state:

let countOfCitiesByState = _.countBy(cities, getNameForCity);

Grouping the list of cities into an array of cities for each state:

let citiesGroupedByState = _.groupBy(cities, getNameForCity);

Getting rid of all of the cities in the state of Virginia:

let citiesWithoutVirginia = _.reject(cities, function(city){
	return getNameForCity(city) === 'Virginia';
});

How about getting rid of cities in _any_ Virginia (looking at you, WV):

let citiesWithoutVirginia = _.reject(cities, function(city){
	return getNameForCity(city).indexOf('Virginia') !== -1;
});
Alex Otañez

Alex Otañez

March 14, 2016

Alex has more than 10 years of international experience in Strategic IT Transformation and Custom App Development. His expertise in various industries ranges from Consumer Goods to Retail to Finance while assisting clients in the areas of Business Strategy & Development, Security & Compliance, and Technology Transformation. As one of Shockoe’s founding members, Alex is focused on business strategy, security & compliance, digital innovation, mobile management, and operational transformations.

More like this delivered right to you:

Sign up for our Newsletter to get our latest posts plus invitations to our events and access to future whitepapers.

Related Posts

Seeing the Member Experience in a “User-Experience” World

Seeing the Member Experience in a “User-Experience” World

In the world of product development, we are often always saying “user” _______. User-centered design, user analytics, user personas, user journeys, etc, etc.It’s a term that holds importance because it is a genuine focus on the end-user experience.  It’s also often...

7 Tips for Utilizing Amazon Alexa to Engage with Customers

7 Tips for Utilizing Amazon Alexa to Engage with Customers

Amazon first released Alexa virtual assistant and smart speaker Echo in late 2014. An in-home virtual assistant is an impressive tool, but creating a seamless user experience with it can be a challenge. So how do companies overcome this challenge? What engagement can...

Ready to drop us a line?