# How to use Array.from() method in JavaScript

By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Jun 6, 2020, updated Oct 13, 2022. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/javascript-array-from

> A detailed article to learn about the Array.from() method in JavaScript and how to use it to create a new array from an array-like or iterable object.

The `Array.from()` method in JavaScript creates a new, shallow-copied instance of `Array` from an array-like or iterable object. You can use this method to convert array-like objects (objects with a `length` property and indexed items) as well as iterable objects (objects such as [`Map`](https://attacomsian.com/blog/maps-javascript) and [`Set`](https://attacomsian.com/blog/sets-javascript)) to an [array](https://attacomsian.com/blog/javascript-arrays).

## Syntax

Here is the syntax of `Array.from()` method:

```javascript
Array.from(arrayLikeOrIterable[, mapFunction[, thisArg]])
```

* `arrayLikeOrIterable` — An array-like or an iterable object that you want to convert to an array.
* `mapFunction(item, index) {...}` — An optional map function to call on every element in the collection. This method is extremely useful when you want to convert and transform an array-like or iterable object to an array at the same time.
* `thisArg` — The value of `thisArg` is used as `this` while invoking `mapFunction`.

The `Array.from()` method returns new `Array` instance. When you pass `mapFunction` to `Array.from()`, it executes a [`map()`](https://attacomsian.com/blog/javascript-array-map) function on each element of the newly created array.

In short, `Array.from(obj, mapFunction, thisArg)` has the same result as `Array.from(obj).map(mapFunction, thisArg)`, except that it does not create an intermediate array.

## Creating an array from a `String`

The `Array.from()` can be used to [convert a string to an array](https://attacomsian.com/blog/javascript-convert-string-to-array) in JavaScript. Each alphabet of the string is converted to an element of the new array instance:

```javascript
const str = 'Apple'

const arr = Array.from(str) // same as str.split('')

console.log(arr)

// ['A', 'p', 'p', 'l', 'e']
```

## Creating an array from a `Set`

A [`Set`](https://attacomsian.com/blog/sets-javascript) is a special type of object introduced in ES6 that allows us to create a collection of unique values. To convert a `Set` to an array of unique values, you can use the `Array.from()` method:

```javascript
const set = new Set(['?', '?', '?', '?'])

const birds = Array.from(set)

console.log(birds)

// ['?', '?', '?', '?']
```

You can also use the above code to [remove duplicates from an array](https://attacomsian.com/blog/javascript-remove-duplicates-from-array):

```javascript
function unique(arr) {
  return Array.from(new Set(arr))
}

unique([1, 2, 2, 3, 4, 4])

// [1, 2, 3, 4]
```

## Creating an array from a `Map`

A [`Map`](https://attacomsian.com/blog/maps-javascript) is another ES6 data structure that lets you create a collection of key-value pairs. Here is an example that converts an instance of `Map` to an array by using `Array.from()` method:

```javascript
const map = new Map([
  ['?', 'Banana'],
  ['?', 'Pizza'],
  ['?', 'Cucumber'],
  ['?', 'Maize']
])

const foods = Array.from(map)

console.log(foods)

// [['?', 'Banana'], ['?', 'Pizza'], ['?', 'Cucumber'], ['?', 'Maize']]
```

## Creating an array from a `NodeList`

A [`NodeList`](https://attacomsian.com/blog/javascript-nodelist) is an array-like object that contains a collection of [DOM](https://attacomsian.com/blog/getting-dom-elements-javascript) elements or more specifically nodes. Without converting a `NodeList` object to an array, you can not use the common array methods like `map()`, `slice()`, and `filter()` on it.

To convert a `NodeList` to an array, you can use the `Array.from()` method:

```javascript
const divs = document.querySelectorAll('div')

const divsArr = Array.from(divs)

// now you can use array methods
divsArr.map(div => console.log(div.innerText))
```

Take a look at [this article](https://attacomsian.com/blog/javascript-convert-nodelist-to-array) to learn more about `NodeList` to array conversion.

## Creating an array from an `arguments`

The `arguments` object is an array-like object accessible inside all non-[arrow](https://attacomsian.com/blog/javascript-arrow-functions) functions that contains the values of the arguments passed to that function.

To convert the `arguments` object to a truly array, you can use the `Array.from()` method:

```javascript
function numbers() {
  const args = Array.from(arguments)

  console.log(args)
}

numbers(1, 2, 3, 4, 5)

// [1, 2, 3, 4, 5]
```

Read [this article](https://attacomsian.com/blog/javascript-convert-arguments-object-to-array) to learn more about converting an `arguments` object into an array in JavaScript.

## Cloning an array using `Array.from()`

In an [earlier article](https://attacomsian.com/blog/javascript-copy-array), we looked at several ways to create a clone of an array. One of them is `Array.from()` that creates a shallow-copy of an existing array:

```javascript
const fruits = ['?', '?', '?', '?']

const moreFruits = Array.from(fruits)

console.log(moreFruits)

// ['?', '?', '?', '?']
```

To create a deep clone of an array, take a look at [this guide](https://attacomsian.com/blog/javascript-deep-clone-array).

## Initializing an array using `Array.from()`

The `Array.from()` method is also helpful when you want to initialize an array with the same values or objects:

```javascript
const length = 4

// init array with 0
Array.from({ length }, () => 0)
// [0, 0, 0, 0]

// init array with random values
Array.from({ length }, () => Math.floor(Math.random() * 10) + 1)
// [2, 4, 2, 10]

// init array with objects
Array.from({ length }, () => ({}))

// [{}, {}, {}, {}]
```

## Generating a range of numbers using `Array.from()`

You can also use the `Array.from()` method to generate a sequence of numbers in JavaScript:

```javascript
const range = stop => {
  return Array.from({ length: stop }, (item, index) => index)
}

range(5) // [0, 1, 2, 3, 5]
```

## Browser compatibility

Since `Array.from()` is part of ES6, it only works in modern browsers. To support older browsers like IE, you can use a [polyfill](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from#Polyfill) available on MDN. 

To learn more about JavaScript arrays and how to use them to store multiple pieces of information in one single variable, take a look at [this article](https://attacomsian.com/blog/javascript-arrays).

**Read Next:** [Understanding Object.assign() Method in JavaScript](https://attacomsian.com/blog/javascript-object-assign)