DEV Community

loading...
Cover image for TO each || !TO each

TO each || !TO each

mcarpenter profile image Matthew Carpenter ・2 min read

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
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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'}

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)
      }
    }
  }
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)

pic
Editor guide