Vanilla Javascript (JS) has been great…especially when the only thing I did was toy problems. But alas, it is too small a tool to build practical, life-sized applications alone. Unless you’re the type of person who enjoys spending time writing long, windy code that basically triples the length of your code, getting acquainted with the various JS libraries can only serve to help you.
Libraries are essentially codes that give you access to useful functions beyond the built-in features. Underscore is a lightweight JS library that provides numerous small functions. Check out the documentation to see what docs dreams are made of. Totes goals.
Libraries like Underscore make your code simpler to write and easier to read; consider the range function for instance:
You want an array of a range of numbers incremented by 1. Sounds simple enough for anyone who has five fingers on each hand. Despite the conceptual simplicity, with vanilla JS you end up having to do some mental acrobatics:
The long way is straightforward, but it’s…long.
let nums = [];
for (let i = 0; i < 5; i++) {
nums.push(i);
} // loop through numbers 0 - 4 (inclusive), and append to arraynums;
=> [0, 1, 2, 3, 4]
Then there’s a shorter way, which honestly is not the first thing I would think to do:
[...Array(5).keys()]; // generate an array of 5 empty values, then turn their indices into an array=> [0, 1, 2, 3, 4]
Well, good thing programmers are lazy. Not just lazy, but also smart. Not just lazy and smart, but also community-minded. With Underscore, you can achieve the same task as above with this:
_.range(5);
=> [0, 1, 2, 3, 4]Wow. Say less fam.
Such clean.
So read.
Much intuit.
Wow.
For a no-commitment, hassle-free tryout of Underscore right in the browser, just add the following line within the <head> tag of your html file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>Open up this file in your browser. You should now be able to access the Underscore library through the CDN. Type _ in the console and see what you get!
As in the example above, Underscore functions are called like so:
_.functionName(arg1, [arg2, ...])Here are a few functions that everyone wanted but didn’t have:
_.invert // returns a copy of the object where the keys and their corresponding values are switched.
_.invert({a: 'one', b: 'two', c: 'three'});
=> {one: 'a', two: 'b', three: 'c'} // omgWell slap my butt and call me Brenda. You mean you can look up the key of an object by its value? Unreal.
(The catch is that the values must be unique and able to be string-serializable but still wow)
_.functions // returns a sorted list of the names of every function property in an object.
_.functions({ // some object with methods });
=> ["method1", "method2", "method3", ...]Stop. The. Madness.
_.extend // shallowly mashes objects together, the first object being the dumpee
_.extend({a: 'one'}, {b: 'two'});
=> {a: 'one', b: 'two'}I am DONE.
Other than methods for objects, we also have methods like:
_.uniqueId // generates a globally unique ID. You can optionally pass in a prefix
_.uniqueId('swag');
=> 'swag_14'And last but not least… I will end this post with what I believe is a much-needed, appropriate point:
_.template // returns a function that can be evaluated for rendering. Useful for rendering bits from JSON data sources. TBT ERB LOL. The returned function can take a data object with keys corresponding to the variable in template.
let inspire = _.template("<p>The world ain’t all sunshine and rainbows. It’s a very mean and nasty place and I don’t care how tough you are it will beat you to your knees and keep you there permanently if you let it. You, me, or nobody is gonna hit as hard as <%= something %>. But it ain’t about how hard ya hit. It’s about how hard you can get hit and keep moving forward. How much you can take and keep moving forward. That’s how winning is done!</p>")_.inspire({ something: "JAVASCRIPT" })=> "<p>The world ain’t all sunshine and rainbows. It’s a very mean and nasty place and I don’t care how tough you are it will beat you to your knees and keep you there permanently if you let it. You, me, or nobody is gonna hit as hard as JAVASCRIPT. But it ain’t about how hard ya hit. It’s about how hard you can get hit and keep moving forward. How much you can take and keep moving forward. That’s how winning is done!</p>"
// Find me, get to know me at my personal site!
