JavaScript Array.from()

Created with Sketch.

JavaScript Array.from()

Summary: in this tutorial, you will learn about the JavaScript Array.from() method that creates a new array from an array-like or iterable object.

Introduction to JavaScript Array Array.from() method

To create an array from an array-like object in ES5, you iterate over all array elements and add each of them to an intermediate array like this:function arrayFromArgs() {
var results = [];
for (var i = 0; i < arguments.length; i++) {
results.push(arguments[i]);
}
return results;
}
var fruits = arrayFromArgs('Apple', 'Orange', 'Banana');
console.log(fruits);

Code language: JavaScript (javascript)

Output:

[ 'Apple', 'Orange', 'Banana' ]

Code language: JSON / JSON with Comments (json)

To make it more concise, you can use the slice() method of the Array.prototype as follows:

function arrayFromArgs() {
return Array.prototype.slice.call(arguments);
}
var fruits = arrayFromArgs('Apple', 'Orange', 'Banana');
console.log(fruits);

Code language: JavaScript (javascript)

ES6 introduces the Array.from() method that creates a new instance of the Array from an array-like or iterable object. The following illustrates the syntax of the Array.from() method:

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

Code language: CSS (css)

In this syntax:

  • target is an array-like or iterable object to convert to an array.
  • mapFn is the map function to call on every element of the array
  • thisArg is the this value when executing the mapFn function.

The Array.from() returns a new instance of Array that contains all elements of the target object.

JavaScript Array.from() method examples

Let’s take some examples of using the Array.from() method.

A) Create an array from an array-like object

The following example uses the Array.from() method to create a new array from the arguments object of a function:

function arrayFromArgs() {
return Array.from(arguments);
}

console.log(arrayFromArgs(1, 'A'));

Code language: JavaScript (javascript)

Output:

[ 1, 'A' ]

Code language: JSON / JSON with Comments (json)

In this example, we create an array from arguments of the arrayFromArgs() function and return the array.

B) JavaScript Array Array.from() with a mapping function

The Array.from() method accepts a callback function that allows you to execute the mapping function on every element of the array which is being created. See the following example:

function addOne() {
return Array.from(arguments, x => x + 1);
}
console.log(addOne(1, 2, 3));

Code language: JavaScript (javascript)

Output:

[ 2, 3, 4 ]

Code language: JSON / JSON with Comments (json)

In this example, we increased each argument of the addOne() function by one and add the result to the new array.

C) JavaScript Array Array.from() with a this value

If the mapping function belongs to an object, you can optionally pass the third argument to the Array.from() method. The object will represent the this value inside the mapping function. Consider this example:

let doubler = {
factor: 2,
double(x) {
return x * this.factor;
}
}
let scores = [5, 6, 7];
let newScores = Array.from(scores, doubler.double, doubler);
console.log(newScores);

Code language: JavaScript (javascript)

Output:

[ 10, 12, 14 ]

Code language: JSON / JSON with Comments (json)

D) Create an array from an iterable object

Since the Array.from() method also works on an iterable object,  you can use it to create an array from any object that has a [symbol.iterator] property. For example:

let even = {
*[Symbol.iterator]() {
for (let i = 0; i < 10; i += 2) {
yield i;
}
}
};
let evenNumbers = Array.from(even);
console.log(evenNumbers);

Code language: JavaScript (javascript)

Output:

[0, 2, 4, 6, 8]

Code language: JSON / JSON with Comments (json)

In this example:

  • First, define the even object with the [System.iterator] that returns even numbers from 0 to 10.
  • Then, use the Array.from() method to create a new array of even numbers from the even object.

In this tutorial, you have learned how to use the JavaScript Array Array.from() method to create an array from an array-like or iterable object.

Leave a Reply

Your email address will not be published. Required fields are marked *