Three Essential Projects for Elegant JavaScript

DZone 's Guide to

Three Essential Projects for Elegant JavaScript

It doesn't take very long for your JavaScript to go out of control. Learn how to keep things clean with three essential projects. Make sure to share your timesaver projects too!

· Web Dev Zone ·
Free Resource

For a lot of my simple scripting, I gravitate towards running on NodeJS. JavaScript is great, there are loads of libraries to help out with any conceivable problem. The problem is the amount of boilerplate you start to introduce into your projects. Take a look at the code you wrote two months ago and it'll give you a headache to follow. Here are some projects I've found that get rid of that inevitable migrane. 

Remove Pointless Loops and More With lodash 

Just this week, I was writing another piece of cringy code. I had to loop through a collection to find items with a particular id, and I had to consolidate data across a number of lists. A less experienced version of me would have gone with something like this: 

var vehicles = []; 

for(var i =0; i < collection.length; i++){
   //find if I've added details about this object before 
   Vehicle v = findVehicle(collection[i].vehicleID); 


function findVehicle(list, id){
for(var i = 0; i < list.length; i++){
if(list[i].vehicleID === id){
        return list[i];
  return null;

But, why write all this boilerplate code? Shouldn't there be libraries out there to allow me to focus on the core business logic and not clutter up my codebase with such unnecessary loopery! Yes, there is! Enters lodash, a utility library that delivers modularity and performance. 

Gone is my clumsy code, and instead, I can do quick searches through arrays in no time: 

var _ = require('lodash'); 

//find a vehicle 
var vehicle = _(vehicles).find({vehicleId: id});

The syntax here is so simple—you just pass through the attributes and the values that need to match. 

Need to get multiple items out of your original list that match the criteria? Use filter

//find a list of vehicles 
var vehicleList = _(vehicles).filter({vehicleId: id});

There's so much more to this library. It's kinda like Underscore on steroids. 

Avoid Dating Issues With MomentJS

Dealing with dates is a nightmare in every language, and with JavaScript, it was all going to hell until MomentJS showed up. It has now become an essential inclusion in all my JavaScript projects. 

MomentJS has everything that you might need for dealing with time. You can easily construct Moment objects and compare them to find out if a time is in the past, format them to display dates nicely anywhere, and manipulate your dates to move back and forward in time. 

What really helps with MomentJS is the additional plugins that others have contributed.

Just this week, I had to write a piece of code that checked how many of a particular weekday (or weekdays) appeared in between two dates. I didn't even try to start—I checked StackOverflow. From there, I discovered  moment-weekday-calc, which does just what I need. 

Here's a quick example that counts all the Fridays since the beginning of 2015 :

moment().weekdayCalc('1 Jan 2015','31 Mar 2016',[5]);   

Make Your Data Sing With D3

Finally, when you're presenting data you don't just want to use tables. Graphs are powerful, and interactive graphs are amazing.  I do a lot of stuff that requires visualization, so I always go to d3.js to make the best graphs possible. 

Not only do you get all the standard visualizations that you'd expect in Excel or Numbers, but you get a whole host of quirky techniques to show your data in different ways. Just take a look at the examples folder to see what you can do... and that's just the start. 

Just as with lodash and MomentJS, the construction of these complicated things is made pretty simple, and boilerplate free. 

I'd love to hear what your essential JavaScript libraries are. Let me know in the comments.

javascript, lodash, momentjs

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}