Suggest an edit

Improve this article

Refine the answer for “The Array.from() method”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**`Array.from()` is the general-purpose way to create a new array from an iterable object (a string, a `Set`, a `Map`) or from an array-like one (`arguments`, a `NodeList`).** It can also transform the elements on the fly, right as the array is being built.

## Theory

### TL;DR
- `Array.from()` builds a real array out of an iterable or array-like value.
- Signature: `Array.from(arrayLike, mapFn, thisArg)`.
- `mapFn` transforms every element during creation, like a built-in `map()`.
- An object such as `{ length: n }` produces an array of that length, handy for sequences.
- The method returns a new array and does not modify the source object.
- If the value is neither iterable nor has a `length`, you get an error or an empty array.

### Quick example
```javascript
const str = 'hello';
const arr = Array.from(str);

console.log(arr); // ["h", "e", "l", "l", "o"]
```

### Syntax

```javascript
Array.from(arrayLike, mapFn, thisArg);
```

| Parameter | Description |
| --- | --- |
| `arrayLike` | An iterable or array-like object (string, `Set`, `Map`, `arguments`, `NodeList` and so on) |
| `mapFn` (optional) | A function applied to every element |
| `thisArg` (optional) | The `this` context for `mapFn` |

### Examples

**1. From a string to an array of characters**

```javascript
const str = 'hello';
const arr = Array.from(str);

console.log(arr); // ["h", "e", "l", "l", "o"]
```

**2. From a `Set`**

```javascript
const set = new Set([1, 2, 3]);
const arr = Array.from(set);

console.log(arr); // [1, 2, 3]
```

**3. From the array-like `arguments`**

```javascript
function example() {
  const args = Array.from(arguments);
  console.log(args); // [10, 20, 30]
}
example(10, 20, 30);
```

`arguments` is not a real array and has no methods such as `map()` or `filter()`, but `Array.from()` turns it into an ordinary array.

**4. With element transformation through `mapFn`**

```javascript
const arr = Array.from([1, 2, 3], x => x * 2);
console.log(arr); // [2, 4, 6]
```

This is `map()` built straight into array creation, so no intermediate array is produced.

**5. From an object with `length`, creating an array by size**

```javascript
const arr = Array.from({ length: 5 }, (_, i) => i + 1);
console.log(arr); // [1, 2, 3, 4, 5]
```

Very convenient for generating numeric sequences: unlike `new Array(5)`, this gives an array with no holes.

### Things to remember
- It returns a new array.
- It does not modify the source object.
- If `arrayLike` is neither iterable nor has a `length` property, the result is an error or an empty array.

### Comparison with similar tools

| Method | What it does |
| --- | --- |
| `Array.of(1, 2, 3)` | Creates an array from its arguments |
| `Array.from('abc')` | Creates an array from an iterable or array-like object |
| `[...iterable]` | Copies an iterable, but without a mapping function |

The method in brief:

| Question | Answer |
| --- | --- |
| What it does | Creates an array from an iterable or array-like object |
| What it returns | A new array |
| Does it mutate the original | No |
| Does it have a mapping function | Yes, as the second argument |
| Example | `Array.from('hi')` gives `["h", "i"]` |

The practical difference from spread: `[...value]` only works with iterables, so `[...{ length: 3 }]` throws, while `Array.from({ length: 3 })` returns `[undefined, undefined, undefined]`.

### Common mistakes
- Expecting `Array.from()` to change the source object: it always returns a new array.
- Spreading an array-like object with no `Symbol.iterator`, such as `{ length: 3 }`, and getting a `TypeError`.
- Writing `Array.from(arr).map(fn)` instead of the shorter `Array.from(arr, fn)`.
- Confusing `Array.from(5)` with `Array.of(5)`: the first returns `[]` because a number is not iterable, the second gives `[5]`.
- Forgetting that `Array.from({ length: 3 })` yields `[undefined, undefined, undefined]`, not an empty array.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts650 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.