Six ES6 methods to level up your Array game
Time to level up our
Arrays have added new functionality that will enhance our programs and streamline the way we write code. In this post I will highlight six ES6
Array methods, outlining the ways we may have solved problems in the past and illustrating how we can use these new functions to do it (better) now.
Array version of old and busted vs new hotness.
Let’s get it.
Table Of Contents
- Bonus: Array.prototype.filter()
Array.of() method creates a new
Array instance and can be used similarly to the constructor form of
Array.of() avoids the key
Array() gotcha that occurs when we pass in a number. Let’s create.
There are a couple cases where this may be useful, but generally I still recommended creating an array by using the array literal syntax we have become accustomed to:
Array.from() method creates a shallow copy of an
Array. We may have accomplished this in the past by creating a
shallowCopy() function as outlined below.
However, we can simplify that now with
A note about
Array.from(): This method copies the values, not the reference. So, the two arrays are not equal, as opposed to assigning an array to another variable, which ensures they point to the same location in memory, for example:
For more on value vs reference, check out this post.
fill() method fills all (or part) of an array with a value from a start index up to (but not including) an end index. The first parameter is the value to fill the array, while the second parameter is the start index, which defaults to 0. The third parameter is the end index, which defaults to
Please note that this method will not change the length of the array. So if you have an empty array, it will not add items:
How might we use this function? Well, let’s envision the following scenario: What if you have a game board represented by an array and you wanted to (re)initialize each value in the array to -1 (basically “reseting” the game)?
find() method takes a “matching” function and returns the first value that is true or
undefined if no value is found.
Cool…so how might we use this to improve our JS skills? Glad you asked, I got you. This code is a modified example from a server validation script I wrote, which checks that our AWS infrastructure has been properly built via Terraform. With the context covered, let’s get to the code.
As we can see, the
find() method helped us reduce a lot of “boilerplate” code. These are
for loops we have all written a minimum of 27,841,991 times and now we can (for the most part) stop writing them. Let’s keep leveling up!
Say I wanted to find the index of the first value in an
Array of numbers greater than 25, in ES5 (or earlier) I might’ve done something like this…
…but now ES6 is in the building! Enter
findIndex(). This method takes a matching function and returns the index of the first element in the Array, which satisfies the condition.
What if we want to determine whether a value exists in an Array? We can use the
includes() method to do this.
No post on leveling up can dared be written without the almighty
filter(). While not ES6 (originally introduced in ES5), this is a powerful method that can greatly improve code readability and efficiency.
filter() takes a matching function and returns an array of all the elements that match the condition.
Let’s return the list of elements greater than 25, showing both pre and post ES5 implementations.
For a more in depth example, check out this snippet on Github.
In this post we have shown that by utilizing these new
- Array method references from Mozilla:
- Array API cheatsheet by Dr. Axel Rauschmayer
- Level up your .filter game from CSS-Tricks
- A reference on whether an Array method mutates or not created by @rem