Understanding the Array.from() method in JavaScript 

What is Array.from() method in JavaScript, and how do we use it?

It is a versatile tool for creating new arrays from array-like or iterable objects.

In this article, we will dive into the syntax, parameters, and return value of Array.from() and explore its many uses through practical examples.

From creating arrays from strings, Sets, and Maps, to using map functions and creating typed arrays. So let’s get started!

What is array.from() in JavaScript?

Array.from() is a method in JavaScript that allows you to create a new array from an array-like or iterable object.

It means that you can use Array.from() to create an array from objects such as a string, a Set, or a Map.

Syntax

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

Parameters

📌 arrayLike

An array-like or iterable object to convert to an array.

📌 mapFn (optional)

A map function to call on each element of the array.

📌 thisArg (optional)

The value to use as this when executing the map function.

Return value

A new Array instance.

The Array.from() method creates a new, shallow-copied Array instance from an array-like or iterable object.

The optional mapFn parameter allows you to execute a map function on each element of the array being created.

The optional thisArg parameter specifies the value to use as this when executing the map function.

Browsers that supports Array.from() method

The following are the browsers that supports Array.from()method:

✅Chrome

✅ Edge

✅ Firefox

✅ Safari

✅Opera

Different ways on how to use Array.from() method in JavaScrip

Let’s consider a few instances of utilizing the Array.from() method.

Use Array.from() method to create an array from a string

You can use Array.from() to create an array from a string, where each character in the string becomes an element in the new array

Here’s an example that demonstrates how to use Array.from() to create an array from a string:

const sampleString = "itsourcecode";
const sampleArray = Array.from(sampleString);

console.log(sampleArray);

In this example, we are using Array.from() to create a new array from the string “itsourcecode.” Each character in the string becomes an element in the new array.

Output:

[
  'i', 't', 's', 'o',
  'u', 'r', 'c', 'e',
  'c', 'o', 'd', 'e'
]

Use a map function

You can use the optional mapFn parameter of Array.from() to apply a function to each element of the array being created. For example, if you want to create an array of numbers from 1 to 5, and square each number, you can do this with Array.from():

Here’s an example that demonstrates how to use Array.from() with a map function:

const sampleSet = new Set([10, 20, 30]);
const sampleArray = Array.from(sampleSet, x => x * 5);

console.log(sampleArray);

In this example, we are using Array.from() to create a new array from a Set. The Set contains the values 10, 20, and 30.

We’re also using the optional mapFn parameter to apply a function that multiplies each element by 3.

The resulting array contains the following output.

Output:

[ 50, 100, 150 ]

Use Array.from() method to create an array from a Map

You can use Array.from() to create an array from a Map. A Map is an object that holds key-value pairs.

If you have a Map with the keys “Math”, “English”, “Science”, and “Programming” and the values 1, 2, 3, and 4 respectively, you can use Array.from() to create an array of the keys or values:

const myMap = new Map([["Math", 1], ["English", 2], ["Science", 3], ["Programming", 4]]);
const keysArray = Array.from(myMap.keys());
const valuesArray = Array.from(myMap.values());

console.log(keysArray); // [ 'Math', 'English', 'Science', 'Programming' ]
console.log(valuesArray); // [ 1, 2, 3, 4 ]

Output:

[ 'Math', 'English', 'Science', 'Programming' ]
[ 1, 2, 3, 4 ]

Use Array.from() method to create an array from a Set

You can use Array.from() to create an array from a Set. A Set is an object that lets you store unique values of any type.

If you have a Set with the values “Programming”, “English”, and “Math”, you can use Array.from() to create an array with these values:

const sampleSet = new Set(["Programming", "English", "Math"]);
const sampleArray = Array.from(sampleSet);

console.log(sampleArray);

Output:

[ 'Programming', 'English', 'Math' ]

Use Array.from() method to create an array from arguments

You can use Array.from() to create an array from the arguments object within a function. The arguments object is an array-like object that contains the arguments passed to the function.

Here’s an example that demonstrates how to use Array.from() to create an array from the arguments object:

function myFunction() {
const myArray = Array.from(arguments);
console.log(myArray);
}

myFunction(10, 20, 30, 40, 50);

Output:

[ 10, 20, 30, 40, 50 ]

Conclusion

In conclusion, the article introduces the Array.from() method in JavaScript, which is a versatile tool for creating new arrays from array-like or iterable objects.

The method allows you to convert various types of data, such as strings, Sets, Maps, and even the arguments object, into arrays.

This article explains the syntax and parameters of Array.from(), including the optional map function for custom transformations.

Also, practical examples are provided for demonstrating how to use the method in different scenarios.

We are hoping that this article provides you with enough information that helps you understand the array.from in JavaScript. 

You can also check out the following article:

• JavaScript reverse array
• JavaScript array slice
• JavaScript split string into an array

Thank you for reading itsourcecoders 😊.

Caren Bautista

Technical Writer at PIES IT Solution

Responsible for crafting clear, well-structured, and beginner-friendly content across the platform. Handles the writing, proofreading, and editorial review of tutorials, guides, and documentation to ensure every article is accurate, readable, and easy to follow.

Expertise: Technical Writing · Content Creation · Documentation · Editorial Writing · JavaScript · TypeScript · Python · Python Errors · HTTP Errors · MS Excel
 · View all posts by Caren Bautista →