Name: Use Native JavaScript Array Methods instead of Dependency Library
Uploaded: 2017-09-09T13:45:02-05:00
Description: We are so tied to libraries that we use things like underscore or JQuery whenever we want to do any simple operation, we'll see how to get rid of this practice by knowing a little better JavaScript's native array methods and, along the way, remove those unneeded dependencies!

We are so tied to libraries that we use things like underscore or JQuery whenever we want to do any simple operation, we'll see how to get rid of this practice by knowing a little better JavaScript's native array methods and, along the way, remove those unneeded dependencies!

Use Native JavaScript Array Methods instead of Dependency Library



Here we have our array of data and some unit tests passing. We're going to go through each of those and just refactor them to use native JavaScript array methods. In this case, we just want to trigger a side effect for each item on the list. You might use underscore.each for doing this, but JavaScript has its own for each array method that we can use that does exactly the same, applies a callback, a side effect for each element of the list.

Now, we want to return a list of hero names. You might be familiar with the pluck function, but we can use a much powerful function which is the map function which expects an arrow function. To the right of the arrow, we're going to return whatever that we want to transform, which is in this case our name. This code is exactly the same.

After that, we're going to look for all the heroes where their power is equal to 70. For that we use another underscore, the function aware. Let's use instead the filter native function where we specify that we're looking for power = 70.

This will do exactly the same, and it's more flexible because, for example, you can do this, greater or equals or just this, which is something that it's impossible to do with underscore's were function. This is equivalent to the previous one.

Now, we want to find the single hero with power 90 which we know beforehand it's going to be Superman. Starting from ECMAScript 6, aka ES2015, we have a native find function which does exactly the same. This code is cleaner this way.

Now, we're going to use our superhero array. We're just using a regular number array. We're just seeing if this array contains the values three and seven. In one case, it returns true, and in the other one returns false.

Starting with ES2016, which is ES7, we have a new function which is the includes functions. That's exactly this. Great.

Now, we want to return the most powerful hero. In underscore, this is quite clean because we have a max function and a min function. How can we achieve this with native JavaScript methods? We can use the reduce native function to do something like this. If the power of A is greater than the power of B, we return B. If not, we return B.

This function will return us the hero with the greatest power. Obviously, everyone knows that it's Batman. I'm sorry, Superman. Reduce is useful for a lot of other stuff, but we are not going to cover that in this lesson.

Finally, we want to chain and do many operations. In underscore and loadout, this is quite chunky. We have to use the chain function at the end, call this value. If you notice, we're just transforming our array of heroes into just an array of names and just checking if this array of names of superheroes contains Green Arrow.

We can do this much cleaner if we just concatenate some functions as we have seen. Now, there is no need for an extra value here because JavaScript functional programming native functions are functions that return the list again. We can concatenate many functions. Chaining function, it's cleaner this way.

Now, we can finally go to the top of our file, and remove our dependency of underscore from this again. Nothing breaks. We have removed one dependency because we didn't need it. We just used native JavaScript array methods to refactor our legacy code.

Use Native JavaScript Array Methods instead of Dependency Library

Share this video with your friends