ES6 in Action: New Array.* and Array.prototype.* Methods

In this article, we’ll discuss most of the new methods available in ES6 that work with the Array type, using Array.* and Array.prototype.*.

When discussing them, I’ll write Array.method() when I describe a “class” method and Array.prototype.method() when I outline an “instance” method.

We’ll also see some example uses and mention several polyfills for them. If you need a polyfill-them-all library, you can use es6-shim by Paul Miller.

Array.from()

The first method I want to mention is Array.from(). It creates a new Array instance from an array-like or an iterable object. This method can be used to solve an old problem with array-like objects that most developers solve using this code:

// typically arrayLike is arguments
var arr = [].slice.call(arrayLike);

The syntax of Array.from() is shown below:

Array.from(arrayLike[, mapFn[, thisArg]])

The meaning of its parameters are:

• arrayLike: an array-like or an iterable object
• mapFn: a function to call on every element contained
• thisArg: a value to use as the context (this) of the mapFn function.

Now that we know its syntax and its parameters, let’s see this method in action. In the code below we’re going to create a function that accepts a variable number of arguments, and returns an array containing these elements doubled:

function double(arr) {
  return Array.from(arguments, function(elem) {
    return elem * 2;
  });
}

const result = double(1, 2, 3, 4);

// prints [2, 4, 6, 8]
console.log(result);

A live demo of the previous code is shown below and also available at JSBin.

ES6 in Action: New Array Methods on jsbin.com

This method is supported in Node and all modern browsers, with the exception of Internet Explorer. If you need to support older browsers, there are a couple of polyfills to choose from: one is available on the method’s page on MDN, while the other has been written by Mathias Bynens and is called Array.from.

Array.prototype.find()

Another of the methods introduced is Array.prototype.find(). The syntax of this method is:

Array.prototype.find(callback[, thisArg])

As you can see, it accepts a callback function used to test the elements of the array and an optional argument to set the context (this value) of the callback function. The callback function receives three parameters:

• element: the current element
• index: the index of the current element
• array: the array you used to invoke the method.

This method returns a value in the array if it satisfies the provided callback function, or undefined otherwise. The callback is executed once for each element in the array until it finds one where a truthy value is returned. If there’s more than one element in the array, that will return a truthy value, and only the first is returned.

An example usage is shown below:

const arr = [1, 2, 3, 4];
const result = arr.find(function(elem) { return elem > 2; });

// prints "3" because it’s the first
// element greater than 2
console.log(result);

A live demo of the previous code is shown below and also available at JSBin.

ES6 in Action: New Array Methods on jsbin.com

The method is supported in Node and all modern browsers, with the exception of Internet Explorer. If you need a polyfill, one is provided on the method’s page on MDN.

Array.prototype.findIndex()

A method that is very similar to the previous one is Array.prototype.findIndex(). It accepts the same arguments but instead of returning the first element that satisfies the callback function, it returns its index. If none of the elements return a truthy value, -1 is returned. An example usage of this method is shown below:

const arr = [1, 2, 3, 4];
const result = arr.findIndex(function(elem) {return elem > 2;});

// prints "2" because is the index of the
// first element greater than 2
console.log(result);

A live demo of the previous code is shown below and also available at JSBin.

ES6 in Action: New Array Methods on jsbin.com

The method is supported in Node and all modern browsers, with the exception of Internet Explorer. If you need a polyfill, one can be found on the method’s page on MDN.

Array.prototype.keys()

Yet another method introduced in this new version of JavaScript is Array.prototype.keys(). This method returns a new Array Iterator (not an array) containing the keys of the array’s values. We’ll cover array iterators in an upcoming article, but if you want to learn more about them now, you can refer to the specifications or the MDN page.

The syntax of Array.prototype.keys() is shown below:

Array.prototype.keys()

An example of use is the following:

const arr = [1, 2, 3, 4];
const iterator = arr.keys();

// prints "0, 1, 2, 3", one at a time, because the
// array contains four elements and these are their indexes
let index = iterator.next();
while(!index.done) {
  console.log(index.value);
  index = iterator.next();
}

A live demo is shown below and also available at JSBin.

ES6 in Action: New Array Methods on jsbin.com

Array.prototype.keys() in Node and all modern browsers, with the exception of Internet Explorer.

Continue reading %ES6 in Action: New Array.* and Array.prototype.* Methods%

by Aurelio De Rosa via SitePoint