JavaScript

JavaScript Array.from() Method

Our day-to-day life somehow includes the task of converting one data type to another and choosing the righteous conversion method has its own significance. For instance, you have a document of “docx” type and want to convert it in “pdf” format. Rather than developing a new “word to pdf” converting application, you will search for an already created converter and then use it to resolve the query. This strategy saves a lot of effort and time.

Similarly, while programming in JavaScript, if it is required to convert an iterable or array-like object to an array, you do not have to iterate over all elements and then add them to the array. Instead, utilize the built-in JavaScript “Array.from()” method to perform the specified conversion.

Don’t know how to use the Array.from() method? No worries! This post will explain the working of the JavaScript Array.from() method with the help of suitable examples. So, let’s start!

How to create an array from an iterable object in JavaScript

Prior to ES6 JavaScript, when an array is created using an iterable object, all of its elements are iterated and then added in another array.

For instance, in the below-given example, the “arrayFromArgs()” function will iterate over the arguments ‘Summer’, ‘Winter’, ‘Autumn’, ‘Spring’ and then add them in an “array” using the “push()” method. After completing this operation,  the “arrayFromArgs()” function will return “array1”:

function arrayFromArgs() {
    var array1= [];
    for (var i = 0; i < arguments.length; i++) {
        array1.push(arguments[i]);
    }
    return array1;
}
var seasons = arrayFromArgs('Summer', 'Winter', 'Autumn', 'Spring' );
console.log(seasons);

Have a look at the output of the above program:

However, in ES6, the same functionality can be performed using the built-in “Array.from()” method.

JavaScript Array.from() method

Array.from()” method is utilized for creating a new array instance from an iterable or array-like object that is passed as an argument. It then returns the newly created array.

Syntax of JavaScript Array.from() method

Array.from(object, mapFunction, thisArg)

Here, the “object” represents the JavaScript object which needs to be converted into an array, “mapFunction” is an optional parameter that refers to the map function invoked on each array element. Lastly, “thisArg” is used as “this” value when the specified map function is executed.

Now, let’s check out some examples related to the usage of Array.from() in JavaScript.

Example 1: How to create an array from string using JavaScript Array.from() method

We will use the “Array.from()” method to create a JavaScript “array” from the string “linuxhint”. In this case, “Array.from()” method will place each character on a separate index of the newly created array:

const string = "linuxhint";
const array = Array.from(string);
console.log(array);

Execution of the above-given code will return an array comprising the characters of the passed “linuxhint” string:

Example 2: How to create an array from an array-like object using JavaScript Array.from() method

First of all, we will define a function named “convert()” which utilizes the “Array.from()” method to create an array. In this scenario, the “Array.from()” method accepts the “arguments” of the passed array-like object:

function convert() {
    return Array.from(arguments);
}
console.log(convert(10, 'dollars'));

When the given “Array.from()” method is executed, it will create a new array and add the number “10” at zero index and string “dollars” at the first index:

Example 3: How to create an array using the mapping function of JavaScript Array.from() method

In the below-given example, the JavaScript “Array.from()” method will utilize the map function “x => x – 1” to subtract “1” from the values that are passed as arguments to the created “subtract()” function:

function subtract() {
    return Array.from(arguments, x => x - 1);
}
console.log(subtract(5, 7, 8));

After decrementing one, the arguments “5”, “7”, and “8” will be placed as “[4, 6,7]” in the returned array:

Example 4: How to create an array from a set object using JavaScript Array.from() method

The ES6 “Set” object creates a collection of unique values. You can create a set object to restrict the addition of duplicated values and convert it to an array using the “Array.from()” method. In this way, the created array will not have any repeated value:

const set= new Set([12, 56, 23, 12, 43, 12]);
const array= Array.from(set);
console.log("Array: "+ array);

Execution of the specified “Array.from()” method will convert the “set” object into an “array”:

That was all the essential information related to the JavaScript Array.from() method in JavaScript. You can further work on it according to your preferences.

Conclusion

The JavaScript “Array.from()” method is utilized for creating a new array instance from an iterable or array-like object that is passed as an argument. It then returns the newly created array. You can also utilize the JavaScript Array.from() method for converting different types of objects such as “set” and “string” to an “array”. This post explained the usage of the JavaScriptArray.from() method.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.