Array From Javascript

Syntax of JavaScript Array from() Method

The syntax for Array from the JavaScript method:

Array.from() takes three parameters, where arrayLikeObject is a mandatory argument, while mapFunction and thisValue are optional arguments. Parameters are defined in the below section.

The above expression is equivalent to the below expression.

Parameters of JavaScript Array from() Method

The Array from JavaScript method takes three parameters defined below:

1. arrayLikeObject (mandatory): This argument contains an array-like or iterable object that will be converted into an array. For example, a string, a set, a map, etc.

2. mapFunction (optional): This is a function argument that is applied to each element of the new Array instance.

3. thisValue (optional): It contains the context that will be utilized when the mapFunction is executed. Every time the callback function is called, the thisValue context will be utilized, if the thisValue argument is supplied, otherwise, undefined is used by default.

Return value of JavaScript Array from() Method

The Array from JavaScript method returns a new Array instance with values from the iterable object. For example, every letter of a string is turned into an item of the new array instance.

Example of Array from JavaScript Method

Let's create a new array using the Array.from() method by passing a string as an arrayLikeObject argument and assigning the return value to a new array variable.

Output:

Explanation: In the above example, we have passed the 'learning' string which is an array-like object. Every letter of the string 'learning' is converted into an array element and stored in the newArray variable. We can see the newArray elements from the console output.

What is JavaScript Array from() Method?

Conversion of one data type to another is an activity that we may have to perform on a daily basis. For example, we may want to convert a "jpeg" image to a "png" format. We will have to look for an existing converter and utilize it to address the issue rather than creating a new "jpeg to png" converting program. This method saves a tonne of time and work.

Similarly, in JavaScript, we do not need to iterate over all the elements of an iterable object to convert it into an array, if we need to transform an iterable or array-like object into an array we can use the in-built Array from the JavaScript method to carry out the required conversion.

The Array from JavaScript function is a component of the Array references class, which can be thought of as an extension of the Array references class for making new Array instances from existing array-like or iterable objects. This method enables us to create a new array with objects having similar dynamics (objects having a length property, iteration property, or indexed elements).

Objects such as a Map and a Set can be referenced as iterable objects and a string can be considered an array-like object. Moreover, we can also pass an optional argument, a mapFunction which executes a map() function on each array element to manipulate the values.

More Examples

Let's see more examples/applications of the Array from the JavaScript method.

1. Converting a set into an array instance using the Array.from() method:

Output:

Explanation: In the above example, we have passed a Set object which can be treated as an iterable object. Every element in the set is converted into an array element and stored in the newArray variable. Whereas, the hey element in the set is repeated twice so while converting the set into an array instance the Array.from() method counts the hey element only once. We can see the newArray elements from the console output.

2. Converting a map, its values, and keys separately into an array using the Array.from() method:

Output:

Explanation: In the above example, we have passed a Map object in the Array.from() method which is an iterable object. Every element of the Map object is converted into an array element and stored in the newArray variable. We can see the newArray elements from the console output.

We can also convert the values and keys of a Map object separately into an array by passing the map.values() or map.keys() return values in the Array from the JavaScript method. We can see from the above code that values and keys are separately converted into an array.

3. Using an arrow function as the mapFunction in the Array.from() method to increase each array element by 1.

Output:

Explanation: In the above example, we have passed an array with an arrow function as a mapFunction argument in the Array.from() method. Every element of the array is doubled using the arrow function. The new array instance is returned by the Array.from() method and is stored in the newArray variable. We can see the newArray elements from the console output.

Supported browsers

The Array.from() method is a feature introduced in the ECMAScript6 (ES6) version of JavaScript.

All the popular/modern browsers listed below support ES6 (JavaScript 2015). So, they automatically support the Array from the JavaScript method.