4.1 Underscore and Lodash

For the majority of this course, we've been working on building these tiny utility functions like filter, map, reduce, pluck, add, etc. And we've been putting them together on this FP object, so that we end up with, basically, our own little functional utility library. Now, what we could do with that, if we were using some sort of dependency loader like RequireJS or Browserify, we could put this FP object in a different file and then require it in. Also we could just use separate script tags like we're doing right now with fluid [UNKNOWN] and jQuery. All for the reason of keeping the FP library outside of our application logic. And we'd be able to take that FP library and include it in other projects because none of these functions like filter, map, and reduce are tied to our beer logic at all. There's nothing, about the beers in those functions on purpose. And that allows us to reuse them in any other project that we want. And so that makes this FP library really powerful and useful. So in this video I'd like to talk about two existing libraries that include the functions that we've created and a lot more. So that we don't have to go and try to come up with every possible utility function that we could ever need. Someone's already done that for us, so let's take a look. The first one is called underscore and it's at underscorejs.org. You may have seen this already because it's bundled with backbone, it's bundled with WordPress now, and a lot of other libraries because people have noticed that this is a really useful thing to have around, and so they just started bundling it with their other libraries. So if you come to this documentation page, you can scroll on the left-hand side and see a list of all the functions that they've exposed and made available. And you'll see familiar ones like map and filter and pluck and reduce. And you'll see a lot of ones that we haven't touched, like memorize and throttle, and debounce, and once, and bind. And just a lot of things that are really useful if you just read the documentation. For any of them, it gives you a nice description of what it does, and a little example of how you might use it. And so this is a really powerful library that gives you access to a bunch of functional utilities. Now, we're not gonna spend too much time with underscore, and I'll explain why in a minute. But let's look at the other library that does this too. It's called lodash which is haha, play on the word underscore, and it actually is underscore, just rewritten to be faster. And it has some extra methods added on, but all of the underscore methods are available here as well. So if you were already using underscore, the idea is that you should be able to drop in lodash as a replacement and not see any difference cuz it uses the same symbol, the underscore, and all on the same method names, even if it aliases them to other methods. So, we have this documentation page. The difference with lodash is that those have been re-written to use more for loops, and a lot of other Voodoo magic to make everything a lot faster. So if you do performance tests between Underscore and lodash, depending on the browser you're running in, you'll see some, sometimes very huge performance gains. And so we typically where I work, we typically use lodash instead of Underscore. Now to show you how this works I kinda wanna just start by dropping in the Underscore or sorry, the lodash filter method in place of the one that we use in our application. So, we're gonna start by commenting out our filter function and then where we use it, which is here in the make filter method, so we'll just replace fp.filter with _.filter and down in the actual filter switch I'll do the same thing. And so I can just save this and if you're wondering how are we loading the lodash library, well, we already did that. If you open the index file, we've been loading it the whole time because we've been using it for the templating that we are doing on our page. Now normally we wouldn't just include lodash just for the templates, but I knew we would need it later to look at the functional utility side of it. So we've been using it all along. So, back in the browser, we can click on our application and refresh. We're loading all of our beers, we can still filter, and just to be totally safe, we'll look at the console, and we see we've got no errors. So we're doing great. We have no problem and you might you might kind of get a little suspicious. Like maybe we just wrote our filter function to look just like the lodash one, and you're right, we did. But we also wrote it to just do generic filtering. And so by keeping all of our application logic out of the utility functions we can easily swap in a totally generic filter library and have no problem. So that's a really nice benefit of doing things this way. Let's add one lodash thing that we don't currently have. So there is a function called sample here, and we're just gonna look at the documentation. So it gets a random element or n random elements out of a collection. So let's go ahead and look at our code. I've added a filter in our filter list and we're going to uncomment that and it's called the surprise filter. And in our appjs we want to add the surprise case. So, we'll set filtered beers in this case to, instead of using filter by type or underscore.filter, we're going to _.sample all beers. Now, by default, if we look back at the documentation, by default it just brings us one beer, which is what we want. If we passed a number, it would give us that many random beers, and it would put it in an array, but if we do it by default, it does just give us the one we want. But it will only be that one item and it wont be wrapped in an array, which is not my favorite thing about this function. I wish that it just always passed an array, but we'll just have to fix that in our application. So to fix that, we'll use the _.sample function and then we'll just wrap the return in an array literal using the square brackets. Now, you keep hearing me say _., and I just want to make sure that it's clear that's the underscore character that the lodash library is assigned to. So I will say underscore but we are not using underscore library. We're using lodash. It's just mapped to the same character. Now if we go back to our code and move the console out of the way and refresh. It will bring us back to all the beers and if we click on surprise we get good dog snowpants. Okay, let's just make sure this still works. Click on surprise again. The dragon blood IPA. So this is a nice little, we can see that it's actually calculating correctly as well. This is a nice little, beer recommender if you don't know what to drink you just click surprise and it will suggest a beer for you. So hopefully that demonstrates just how easy it is to grab something from lodash, look at how it's used, and just drop it in your application. And if you're kind of getting used to how these functions work, not only will you be able to use one at a time, but you'll be able to pass two together, three together, and make these really nice composable functions that do things exactly the way you want them to be done, but without having to inject all your logic into them. So that's a basic overview of underscore and lodash and hopefully it explains how that fits into this idea of a, of a functional utility library. In the next video, we'll talk about how some of these methods are actually available in JavaScript natively and how you could use them.