Hello there, if I've sucked you in with my catchy title it's for a good reason! I want to tell you about Underscore. Underscore is a library full of useful functional programming helpers. I will go through .forEach
as an example. If you have not heard of Underscore, I would like to introduce it to you right now!
"Underscore helps you write code that clearly expresses your intention"
How do you mean?
Lets take our example of arr.forEach
, which executes a provided function once .forEach
array element.
forEach Example
const arr = [1,2,3];
arr.forEach(e => console.log(e));
//1, 2, 3
Wouldn't it be awesome if we could write it just like we said it? Let's take a look at the _.each
example below. For each element in the array execute logger function.
//_.each(element, index, list)
const arr = [1,2,3];
function logger(ele){
console.log(ele)
}
_.each(arr,logger)
//1,2,3 [1,2,3]
What about objects?
Great question! Well in the example below (spoiler alert), Underscore handles objects the same way it would an array. WOAH!
//.each(element, index, list)
const objList = { pie1: 'Apple', pie2: 'Blueberry', pie3: 'Peach'}
function logger(ele){
console.log(ele)
}
_.each(objList, logger)
//Apple, Blueberry, Peach { pie1: 'Apple', pie2: 'Blueberry', pie3: 'Peach'}
How Sway?
Let's dive into how this is even possible. Normally we would have to use a for loop and get the value of each key in the object(see below).
const objList = { pie1: 'Apple', pie2: 'Blueberry', pie3: 'Peach'}
for(let key in objList){
console.log(objList[key]);
}
//Apple, Blueberry, Peach
So... when we pop the hood and take a look at the engine, we find nothing more than, an if statement that checks to see if what you're passing in is an Array or Object. Followed by the appropriate for loop and a callback
. See the example below. The _ object works exactly like $ object in jQuery.
const _ = {
each(list, callback){
if(Array.isArray(list)){
for(let i = 0; i < list.length; i++){
callback(list[i], i, list);
}
} else {
for(let key in list){
callback(list[key], key, list)
}
}
}
Conclusion
This is a very small part of a very vast/helpful library. In fact it's all still really new to me, as i'm not an expert JS developer. I love to write code, I love to learn new libraries, but more importantly understand whats going on underneath it all. I hope my attempt to introduce you to underscore has helped, even if its just one person. Also, you can test underscore from google chrome dev tools by, opening chrome dev tools from the Underscore.JS website.
Drop a comment let me know what you think about underscore.
also let me know if you find corrections Thanks
Top comments (0)