5 New ES6 Array Methods You Should Be Aware Of

ES6 turned our JavaScript world upside down by introducing new features that change the way developers code. Everyday I seem to find more and more little gems that were introduce with ES6. Some of these include new methods to static and prototype arrays.

The five that I want to go over are:

• from
• of
• find
• findIndex
• fill

Now it is important to note that these are not all of the new methods introduced but are some that I find the most useful. It is also important to note that since these methods were recently released, there is need of a complier like Babel or polyfills to use in all browsers.

from

To get you hooked on this post, Ill start with my favorite addition, the from method. I find this very useful as I work more and more with component based frameworks. These frameworks sometimes manage CSS and HTML with JS objects, so there are instances where objects need to be converted into an array. The from method creates a new Array instance from an array-like or iterable object.

Array.from("Print");
// returns ["P", "r", "i", "n", "t"]

This method can really be pushed to it’s full extent when utilizing the second parameter of the from method. This method can execute a map callback function of the newly created array.

const inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];
console.log(Array.from(inventory, fruit => fruit.quantity + 2));
// [4, 2, 7]

of

The of method accepts arguments and returns a new array with the individual arguments as entries to the new Array instance.

Array.of("Money", "Ball", "Win");
// returns ["Money", "Ball", "Win"]

This method differs from the Array constructor’s handling of integer numbers as follows:

Array.of(3);
// returns [3]
Array(3); 
// returns [,,]

find

This method provides a test function as a callback, which when satisfied returns the first element that passed. If no elements pass, then undefined is returned. This method cannot be used to mutate the array.

const inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];
console.log(inventory.find(fruit => fruit.name === 'cherries'));
// { name: 'cherries', quantity: 5 }

This method is very robust in the when dealing with a large code base. It can be used to query large arrays of information and return a specific result.

findIndex

Taking the find method once step further, the findIndex will run a similar test through an array and return the index location of the first passed test result. Following the previous find example:

const inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];
console.log(inventory.find(fruit => fruit.name === 'cherries'));
// 2

fill

The fill method fills all the elements of an array from a start index to an end index with a static value. The start and end index values are optional. The default of start is zero and the default of end is this.length.

[1, 2, 3].fill(1);

// results in [1, 1, 1]
[1, 2, 3].fill(4, 1, 2);         
// [1, 4, 3]

This method is very useful when there is a need to replace an array with default values or to update specific value(s) based on user input.