4.2 Native JavaScript Functions in ES5

So in the last video, we took all the work that we've done on this video series so far, and kind of threw it out in favor of using the lodash library. Lodash does a lot of these things for us, like map and reducing filter, and so we just replaced our filter function. So you can see here it's commented out, and now we're using the lodash filter function here. In this video, I want to talk about, whether or not we even need lowdash for some of these things, and this isn't to talk about should you load dependencies? I mean, you need to make those decisions for your application, for a number of reasons. But just for the sake of argument today, we're gonna talk about filter, map, and reduce because those are three functions that actually happen to be in native JavaScript as of ES-5. Now, if you're not familiar with what ES-5 is, the very short story is, ECMAScript, as you see here in this Wikipedia article, is, the official name of JavaScript. And ECMA is the, governing standards body that, publishes standards, and publishes the JavaScript spec. Okay? So, if we, look at what Wikipedia has to say about the fifth edition, it was in December of 2009 here. So as of the recording of this video, it has been out for over five years. And so these functions that I'm going to show you have been a part of the native language as far as the spec is concerned for at least five years. When browsers got around to implementing them, is a different story. But these are mostly in, I believe in almost every browser. Just to show you what I mean by that. There is this great website, I'll put it in the notes. It's Kingaxe.github.io/compat-table and it has compatibility for the different ECMAScript standards. Let's do a quick search for .map. Okay, so here's Array.prototype.map and you can see it's all green, so is filter and so is reduce. So if we're looking at the top here, that's IE9, ten plus, and all of these other JavaScript standards, which means, it has really good support, as does most of the ES-5 standard. Okay. So, enough about politics and governing bodies and specs. Let's take a look at what these functions actually do. There shouldn't be any surprises here. I'm gonna go to the MDN website, one of my favorites for just quick JavaScript documentation. This is maintained by the Mozilla team,and it's just really well maintained. This is the array.prototype.filter method, which means that you can take any array. And call dot filter on it just like an array can do dot join and other things that you're used to where you're calling dot to string on something. And so now as of ES 5, arrays have a filter method on them, on their prototype. So if we look at the way the filter method works, we can see that it's gonna work very similarly. Instead of a taking a collection on a call back it doesn't need to take a collection because it knows that it's the collection that you're calling it on. And so the call back is really all you need to pass it. Map works the same way. And so does reduce. So let's do what we did with loadash and just substitute in the native version of filter for ours. So here, we're at where we've substituted in the underscore.filter, which is a reference to the lowdash library. And, we're just going to swap this out for the native version, so you can get rid of that part there and just say collection.filter. And then, it just takes the callback. Returns the right value and then that's it. We'll just also change this here. Be all beers.filter and I don't need this opening parentheses. And that should do it. So I'll save that. Let's pull open our Beer List one more time, and we have all of our beers here and let's just make sure filtering still works. It sure does, and so this is a different way of doing filter. The advantage is pretty obvious. You don't need a library, and you don't need to write it yourself. Filter map and reduce and a bunch of other methods that the ES5 standard defines are available to you just right on the array prototype. Now a couple disadvantages are, it doesn't work on objects, it's only for arrays. Where as the lodash version can take an object the one that we did also didn't work on objects, but lodash does. But another disadvantage, which is maybe a little more philosophical but more in line with what we're talking about when we talk about functional programming, is that it's no longer a functional call. If we look at this again, this is not calling the filter function and passing it everything it needs. Now, it's saying, call filter on the all beers collection and then filter inside there is going to assume that you want to call it on the value of this. And, and since it's called on all beers, this will be all beers. So, when this gets implemented by the native code, it's relying on the value of this, and so there are problem with you know, the way that you can override this. So you won't know for sure, when you you call this sometimes, that it's doing exactly what you expect. Because it's not a pure function, it doesn't take as parameters exactly what it needs. It relies on this value that it assumes is there. Not only that, but performance wise, these functions, as it is right now are actually somewhat significantly slower than using a for loop and if you know what, if you remember what I said about lodash, lodash rewrote underscore to take advantage of for loops. Underscore will try to use the native filter or the native method first, and if it doesn't have it, it will fall back to some sort of for loop, or something that it does have access to. But lodash realized, or the author of lodash, I should say, realized that it would be much faster to just always do the for loop. And so, it does, and you get some really nice performance gains. Now that may change in the future but, for now, not only is it more functional, so a little more pure, and possibly a little more easier to maintain, it's also faster. So, if you're willing to take on this dependency of something like lodash or something you write yourself you'll get a lot of benefits for using it. In the next video, we're gonna just wrap up the course and I'm gonna give you a couple, suggestions of where you can go from here if you're still interested in functional programming. I'll see you there