The Array from allows us to create a JavaScript array from any array-like or iterable object. It also allows us to transform the array using the map function. This tutorial lets us explore the array from method in detail.
Table of Contents
Array from method
The Array from is a built-in Javascript method that creates a new array from the elements of an array-like or iterable object.
The Array from is a static method.
The order of elements in the newly created array is the same as the order of the elements in the original object.
The elements are shallowly copied.
Syntax
1 2 3 | Array.from(arraylike, mapFunc, thisArg) |
Parameters
Arraylike is an object that you want to convert to an array. The object must be an iterable object or an array-like object.
An iterable object is anything we can iterate over item by item. For example, arrays, objects, strings, Map, Set, or generator functions are iterable in JavaScript. Iterables in JavaScript implement the iterable protocol.
An array-like object is an object that has a length property and indexed elements.
mapFunc is an optional function that we can use to transform the elements of the converted array. The from method invokes the Map function for each array element and creates a new array.
thisArg is the value that the mapFunc function uses as this.
Array from examples
The code below creates an array from string. Note that the strings are iterables. The code below iterates over its characters and creates an array.
1 2 3 4 5 | const str = 'Hello'; const arr = Array.from(str); console.log(arr); // Output: ['H', 'e', 'l', 'l', 'o'] |
Array from a Set
The JavaScript Set is another example of iterables. Hence we can use array from method to convert it into an array.
1 2 3 4 5 | const fruits = new Set(['apple', 'banana', 'orange']); const arrFruits = Array.from(fruits); console.log(arrFruits); // Output: ['apple', 'banana', 'orange'] |
Array from a Map
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | const mapObj = new Map([ [1, 10], [2, 20], [3, 30], ]); newArray= Array.from(mapObj); console.log(newArray) //[ [ 1, 10 ], [ 2, 20 ], [ 3, 30 ] ] newArray= Array.from(mapObj.values()); console.log(newArray) //[ 10, 20, 30 ] newArray= Array.from(mapObj.keys()); console.log(newArray) //[ 1, 2, 3 ] |
Array from a Array like objects
The person object in the following code is an array-like object. It has a length property and indexed elements. We can convert it into an array using Array from method.
1 2 3 4 5 6 7 8 9 10 11 | person = { 0:'Jack', 1:'Jill', 2:30, length:3 } const arr = Array.from(person); console.log(arr); // [ 'Jack', 'Jill', 30 ] |
Using mapFn to convert elements
The code below creates a new array from an existing array. We also use the mapFn to double each element of the array. The final array is the original, with each element multiplied by 2.
Note that mapFn runs after from method converts the given iterable to an array.
1 2 3 4 5 | const numArr = [1, 2, 3]; const arr = Array.from(numArr, n => n * 2); console.log(arr); // Output: [2, 4, 6] |
Summary
The Array from method creates a new array from the elements of array-like or iterable objects like map, set, arrays, strings etc.
You can transform mapFunc a function that you can use to manipulate the elements of the original object before they’re added to the new array
