 Hello. Yeah. Yeah. Hi, everybody. I'm Suryank. My talk is about this JavaScript library called underscore JS. How many of you have used underscore JS? Show of hands. Okay. How many of you like underscore JS? How many of you use Backwound? Okay. Yeah. So I, so this is me. Very strange So I work at Red Hat as a software engineer. I work as a web developer. And I've been working with Ruby and Python. And as a web developer, you JavaScript is kind of inevitable. So you have to kind of end up doing JavaScript. You learn things on the way. So this is one of the things I am, I kind of am working with right now underscore JS. And I like the way the library works, how it is very functional programming oriented and stuff like that. So I'm going to discuss underscore JS with you guys. So this is from, I just copy pasted from the website. So it's a utility build library for JavaScript that provides a lot of functional programming support. So how many of you have already used prototype JS? Yeah. So it's kind of, it tries to clone the functionality of prototype JS, except it's not very Ruby-ish. But yeah. So if you're using it with jQuery, it's very awesome. So how do you just include a script? So I'll just dive into how you do JavaScript. So this is how I used to do JavaScript. This is how a lot of us used to do JavaScript. Maybe still do, this is, so whenever we have to loop through arrays, we'll put a fall loop. And I hate this type of fall loops. You have to add a dot length and then I plus plus. So this, what the first loop does is it prints all the elements. The second one, it selects all the elements, which is greater than three. So I have a duplicate array, which is empty. And then if my element is greater than three, I push into that. And then multiply each element by five. I have another array, which is empty. And then I loop through the first array and I push, I multiply each element by five and I push into the array. I could do this in the same loop, but just for the sake of clarity. Yeah. But how underscore makes things more awesome. Okay. Sorry. Yeah. So I have the same array. And like jQuery, there is underscore has this variable called which is underscore. So everything is underscore dot each. So underscore does not, it does not extend the existing JavaScript objects. It has, it's like, it's very like a lot like jQuery. So underscore dot each. And then I first argument I pass the array. And the second argument I pass a function, which does the console dot log. So this again prints each element, elements. Very functional programming type. That's how underscore works. So select elements greater than three. I use underscore dot filter. I first argument I pass the array again. And then I return all the elements. I take a function and then and then return and return if n is more than three. Similarly, map. So, so I have to multiply each element by five, five. So I do underscore dot map array and then return element multiplied by five. How, how is it? Awesomeer than this. That's the same thing. But if you read through this, it requires a lot of brain cycles to understand what's happening, right? I, you have to read this comment to understand what this loop is really doing. On the other hand, this kind of is self-documenting. With one line of code, you kind of tell the whoever is looking into your code what you're doing, what you're trying to do. So underscore provides a lot of such functional programming capabilities, which some of which I'll be covering in this talk. So, so reduce and reduce, right? So again, underscore the reduce. First argument is the array. Second argument takes two parameters. The first parameter is what the, what the original argument is. Second is what gets passed on. So and, and it returns a and then adds a blank to it and B. So you will be wondering why I did array, array dot shift and array dot pop here, because if you do it otherwise, the thing which is returned is, so it starts with a blank and then you too have, or the second one is like blank and then happy birthday to you. I don't want that. So what I do is I pop the first, pop the first element of the array and pass it, pass it as the original argument, right? And then the rest of, so because, because it goes from right to left, this, this array is now, so the, the last element of the array is now missing. So this, this ARR does not have that last element. So this returns the proper set. So again, difference between reduce and reduce right is reduce will reduce from the left by default. Reduce right again. If you, if you need to reduce stuff in your element from the right, sometimes it, your direction is kind of important. So you use reduce right, all and any. So I have an, I have an array and underscore dot all returns true if all the elements match this criteria, which is it, which is defined by this function, function x return x percentile to not equals to 0, right? And any is, it returns true if any of the element returns true, okay? So what, so I have this array of objects. What I want is, I want name, I want the artist for each. So I want to add a, which has only the artists. So the easiest way to do is this map, albums and then return artist, right? But then underscore has a wrapper function around it, which is called pluck. So what pluck does is you, you pass the array and you passed, passed the, the attribute and it just returns that array. So it's the same, this will give the same result as this invoke. So you have a function and you want to run it on all the elements of the array, right? So I'll, so other way of doing is this map artist and then running two uppercase on each, each element. Instead I'll pass invoke artist and two uppercase as the, as an argument. So it runs two uppercase on each element of the, of the array. So if I have arguments to pass this, this will take further arguments. So you add all the arguments as after this. So if you're working on the, on with rich client side applications, your, your front end will be talking to a rest, rest interface and that will be returning a lot of data to you. So you'll, you'll probably have to do a lot of operations like this on the client side itself, right? So you have, say your, your backend returns this, this, this type of an array, an array or an array of objects. And what you want is just you, you want to filter out elements which has artist, Pink Floyd, right? So this, this underscore that where we'll do it for you. Again, min and max, it takes, it takes the optional argument of, of this fallback. If you do not put an optional argument, it will just do a min and max, do a sort and do a min and max on it. Sort by group by count by. So sort by will again, again take an function and sort by the, sort the array according to that function. Group by, so what group by will do is return a lot artist. So since artist is Pink Floyd, so the result will be something like Pink Floyd colon and then a list of all the objects which match that, that criteria. Similarly, count by will just do a count instead of having a list of arrays. So we'll move to some array. So those were the most, most important functional programming elements of which underscore provides. I have a few more helper functions which run on arrays. So first, last, initial and rest. It's kind of very self-documenting. If you just look at what, look at this, you'll know what it is doing, right? There's no, no need to, for me to explain, explain what's happening. So initial takes an array and so second argument is two. So it will leave out the last two elements and give the first, first three. Similarly rest. All this, if you have, have been working on Ruby, you'll know compact, you know flatten, you know unique. So you have a, you have a nested array. It'll flatten out, flatten it out for you. You have, you want to unique, only the unique elements will do it for you. Sometimes if you, if you want to loop through an array and it, if you map through an array and it will return a lot of null objects and non-objects and undefined stuff like that, you can compact it and it will remove all those things. Very helpful when you are doing client-side applications. Zip, if you are, if you have worked in Ruby or Python, zip. So you take two arrays and then zip it together as an array of arrays. Similarly, object will do it and make it, make it into an, a list of objects. No, it will make it into an object with key value as, as the array, array elements. I don't know how it's helpful though. Range, kind of very, so range 10 will, range 0 to 9 and this is how you take a, instead of doing fall loops, I hate fall loops. In JavaScript, at least, it's so, it's the braces and semicolons, even if you're adding in coffee script, it's like too much. Okay. So some helper function, it's a work on objects, get keys, get the values and you can get a pair of the same thing which zip does. Okay. This, like the boring part, I'll come to the very interesting part in the end. So pick an omit. So you have a, you have an object and you want only, you want to pick only, so you want to, want to clone of that object with keys, name and artist only. So this will do it for you. And if you want to omit us, us, a key, so this omit will help you with that. This, the end result is the last. So now we come to the interesting part, right. So function binding. So we have a object and we have a, we have a function, right. So what, underscore bind does it, it binds the, the function to that object. So I bind intro to pf. So when I run intro, so it, it, it returns welcome to this dot name. So this, the value of this is now bound to the object, right. So now this, this is possible. If you didn't bind it, of course it, the function doesn't know which object you're talking about. So it will return welcome to undefined. There's another very important is one of the most used functions from underscore. Backbone uses it a lot called bind all. It's a bit confusing, but hang on. So, so I have a, so I have defined pf. And then I define another attribute which is a function which returns I love this dot artist, right. So now if you do, so if you do a pf.intro and open and close brackets, it will return I love Pink Floyd, right. Because of course, it knows the value of this is this dot, this dot artist. But once you assign pf.intro to some, some other variable, this, the value of this is not known to this. So, so when you do why, there is no this, this is not defined. This is, this might be defined to some window object or something like that. So it will, it will, it will not give the results you want. But if you do bind all, so if you have pf.intro defined and you do bind all, and then you do a pf.intro, okay. This just removed the braces out here. And then we don't do why it gives the correct result. So this is how bind all works. It's very commonly used in Backbone. Sorry. Chaining. So jQuery allows you to do chaining and stuff, but underscore, I don't know why it's not very chaining efficient. So in order to chain, you have to go through a lot of loops. I'll explain. So say you have albums and so this is a taken from a previous example where I do a pluck and then I do a invoke, right? So this is how you do chaining in, in underscore. So first you do underscore dot chain, and then you pass your object. And then you do dot pluck artist. So this, this, this allows you to do chaining. So this passes the proper values to subsequent functions then invoke. And then so you have to do dot values to get the embedded object out. So this returns the proper value. So Django is nothing to do with the Python framework. There's a movie coming out for Django and Chained. So that's, yeah, there's another way to do it. I'll come. So use the object-united way. So you pass album to the underscore function, underscore object, and then you do pluck. I don't know why I tried doing invoke, but it didn't work. So just to make my point map to uppercase, it does the proper result. Template again, one of the most important features of underscore, which is again used a lot by Backbone. So we have albums. So we, I have, I have to define a template. So underscore dot template, and this uses Ruby style, ERB style tagging tags. So I have, so if you have used, how many of you used ERB? So you have, if you have used ERB, you will be familiar with this type of tags, right? So I, you will love artists and name. So I, this, this compiles the template template for me and stores it to temp. So when I do temp album zero, you'll get this, right? It again allows you to do, use the other functions of underscore inside your template. So you can do dot each album's function and then, and then close. And then when you do temp album, so any, any guesses what you'll get? You'll get a P and then you will love first Pink Floyd's Dark Side of the Moon and then slash P. Then again, P, you'll love Beatles Abbey Road. This is how you'll get it. So we have been, we have been used to this style of doing templates on the, on the server side. This is, this is how you do, this is one of the ways you can do templating on the client side. And it's, it works for me. So that's all. So from, so there's a lot of other, so you can just go to underscore JS, this one huge page here. They also have annotated source code around. So you can just check out what's, what's happening behind the scenes.