|

9 New Array Functions in ES6

new array functions in es6

There are many new extensions to the array object in ES6. In this journey of learning the foo of ES6, we will set our targets on mastering the ways of new functions like Array.of(), Array.from(), Array.fill(), Array.find(), Array.findIndex(), Array.copyWithin(), Array.entries(), Array.keys(), and Array.values(). These new functions make it easier to fill up arrays, or find data within them. In addition to that it is now easier to work with specific keys and values in the array itself. These newer functions are lessening the need for utility libraries so they are definitely welcome. Let’s put the rubber to the road with all of the new array extensions in ES6 right now.


1. Array.of()

To learn about the new Array.of() function, let us first take a look at a strange little quirk in ES5 concerning using the Array constructor. We’ll set up an array of prices, then take a look at the length of the array.

When the code runs, it tells us that we have an array with a length of 5000. What?! We only passed one value, 5000, into the array. Well in ES5, if you pass just one value to the array constructor which is numeric, an array of that size will be created. That is kind of strange, don’t you think? This is the purpose of Array.of(). Let have a redo with our new function.

Nice! In this go round, we find the length of prices to be 1. That seems to make much more sense. Array.of() is a new way of creating an array which fixes this odd behavior in ES5. If you create an array with just one numeric value, the array is created with just that value and not the amount of that value.


2. Array.from()

Let’s see how the new Array.from() function works. Below we have set up an array with three values of 500, 700, and 1000. On the second line, we make a call to Array.from() and pass in prices as the first argument, and an arrow function as the second argument. By running the code, we see that the prices are now taxed at 5 percent. Array.from() creates a brand new array based on prices, and for each element in that array the arrow function is called. So basically we take each price and multiply it by 1.05 denoting a tax rate of 5 percent.


Using Array.from() with three arguments

In the prior example, we passed two arguments to the Array.from() function. The first was the array we were working with, and the second was a function. In this example we will pass an array, a function, and also an object. Say you had a site that listed items for sale, but for each item sold you had to pay a listing fee of 5 dollars. Let’s see how to calculate this.

What is happening here is that the third argument to Array.from() is an object which becomes this in the function. That is why we are able to take the price and add this.listingfee to give us the total price. Note that when using this technique, we need to use a standard function as opposed to an arrow function for the second argument to Array.from(). This is because arrow functions do not allow meddling with the this value.


3. Array.fill()

ES6 now gives you an easy way to fill up an array using Array.fill(). Let’s see a quick example.

So it looks like this function will overwrite any existing values in all keys of the array with the provided value. Since we call .fill() on the prices array which has 3 elements in it, all elements in the array are now 9000. There is also an option to pass a second argument to Array.fill() in order to start at a specific index. Let’s see how to do that.

By passing the value of 2 as the second argument, we are telling the fill function to start filling the array at the 2nd index. Since arrays are 0 based as we know, it is the third value in our array that gets overwritten with the value of 2000.

Now, why only pass two arguments when you can pass three?! Here we will pass another argument to Array.fill(). This will demonstrate that the second argument specifies what index to start at while the third argument specifies where to stop. Check it out now.

We added a few more values to our original array so that it is a bit easier to see how this works. Notice that we begin filling with the value of 2000 at index 2 and stop at index 4. Note that the filling stops before actually placing a value in the index. This is why you see only index 2 and 3 with the value of 2000.


4. Array.find()

Array.find() is another new function added to arrays in ES6. You can use it to easily find a value in an array that meets a given criteria. Let’s see how it works.

Notice that we pass an arrow function to the .find() function. That function is applied against every element in the array, and as soon as it finds a value that meets the criteria, that value is returned. It does not continue to return all values that meet the criteria. This is why we only get one result in this example. Let’s run through this example just one more time to see it in action.

So here, we use a compound expression in the arrow function to be more specific. We specify that we want a value that is less than 777 but also greater than 600. 700 is the first value to meet that criteria, so we get that result back.


5. Array.findIndex()

In addition to Array.find(), we now also have the Array.findIndex() function which works in a similar way but instead of returning the value, it returns the index. Let’s see how it works.

Here we use a regular JavaScript function passed into the .findIndex() function. We simply return the result of price being equal to this. this is set to 1000, which is the second argument to .findIndex(). We can see that the value of 1000 lives at index 5 of the zero based array.


6. Array.copyWithin()

Array.copyWithin() is an interesting addition to the array function library in ES6. With it, you can copy values inside the array just like the name implies. It takes a value from one index, and places it in another. Here is an example.

The key to understanding copyWithin() is what the arguments mean. Argument 1 is the index which will be overwritten. It is where data will be copied to. The second argument is the data to copy from. So in our example, we are saying that we are going to copy the data at index 1 (600) and paste it into index 3 (800). After the function runs, we see that index 3 no longer holds 800, it now holds 600. It is working as expected. There is also the option to pass a third argument to copyWithin(). This third argument tells us how many items to copy. Let’s see how it works.

The destination index is 2, or the third value in the array. We start copying form index 0, or the first value in the array. We are going to copy three successive values starting at index 0. So the result correctly displays 500 in the 2nd index position, followed by two additional copied values of 600 and 700. Index 5 and 6 are unaffected and so they contain their original values of 1000 and 1500.


7. Array.entries()

The Array.entries() function is a really cool addition to the language. It takes an array, and creates a listing so to speak of each entry. Let’s examine closely how it works.

First up, we simply set up an array of words. Then we log out the value of calling .entries() on that array. Interesting! It results in an array iterator. Hmm, well we learned that we can call the .next() function on iterators, so let’s try that out!

Awesome! We can see that we get the first list so to speak of the array. The iterator object is not done, so it is set to false. However the value contains an array which holds two values. At index 0 of that array is the index of where Lenovo lives. That is index 0. At index 1 is the value itself, which is Lenovo. Very neat. Finally, since we know we can use the spread operator on iterators, let’s go ahead and do that now.

The .entries() function gives us the index / value pair of the array.


8. Array.keys()

Array.keys() works in a similar way to Array.entries() except that it only provides the keys of the array. See it in action now.


9. Array.values()

Finally, we have our Array.values() function which is similar to the prior two examples but provides only the values at each key. Observe young Jedi.


9 New Array Functions in ES6 Summary

You are now wielding special kung foo powers in your handling of arrays in ES6. No longer are you confined by the burdens of working with arrays such as was done in ES5. On your path to enlightenment you have found new and easier ways to get your work done, and as such, we hope you have found this journey exciting.