Suggest an edit

Improve this article

Refine the answer for “Creating an array”. 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)

**There are several ways to create an array in JavaScript, and each fits a different case: the `[]` literal, the `new Array()` constructor, `Array.of()` and `Array.from()`.** In everyday code the literal almost always wins, while the other ways serve specific tasks and come with their own caveats.

## Theory

### TL;DR
- The `[]` literal is the simplest, fastest and most readable way.
- `new Array(5)` with a single numeric argument creates an empty array of length 5, not `[5]`.
- `Array.of(5)` always gives `[5]`, with no length confusion.
- `Array.from()` converts strings, `Set`, `Map`, `arguments`, `NodeList` and other iterable or array like objects into an array.
- You can create an empty array up front and fill it later with `push()`.
- A single array can hold values of different types, including objects and other arrays.

### Quick example
```javascript
const fruits = ["apple", "banana", "cherry"]; // literal
const numbers = new Array(1, 2, 3);           // constructor
const single = Array.of(5);                   // [5]
const letters = Array.from("hello");          // ['h','e','l','l','o']
```

### The array literal and the empty array

The most common and simplest way: the elements go inside square brackets.

```javascript
const fruits = ["apple", "banana", "cherry"];
```

The literal is readable and has no argument count traps. It can hold values of different types:

```javascript
const mixed = [1, "text", true, { name: "Tim" }, [10, 20]];
```

An empty array is created the same way and filled later:

```javascript
const empty = [];

empty.push("apple");
empty.push("banana");
console.log(empty); // ["apple", "banana"]
```

### The new Array() constructor and its trap

The constructor accepts a list of elements:

```javascript
const numbers = new Array(1, 2, 3); // [1, 2, 3]
```

But there is a caveat, and it is the reason this form is discouraged:

```javascript
const arr = new Array(5);
console.log(arr); // [ <5 empty items> ]
```

If **one argument is passed and it is a number**, you get an empty array **of length 5**, not `[5]`. To get `[5]`, write a literal:

```javascript
const arr = [5];
```

The empty slots that `new Array(5)` creates are not `undefined`: most iteration methods, `map()` and `forEach()` among them, simply skip them.

### Array.from(): strings, Set and array like objects

`Array.from()` builds a real array out of any iterable or array like object.

From a string:

```javascript
const letters = Array.from("hello");
console.log(letters); // ['h', 'e', 'l', 'l', 'o']
```

From a `Set`, the classic trick for turning unique values into a list:

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

From an array like object, for example `arguments` or a `NodeList`:

```javascript
function example() {
  const args = Array.from(arguments);
  console.log(args);
}
example(1, 2, 3); // [1, 2, 3]
```

This matters because an array like object has `length` and numeric indexes but no array methods: you cannot call `map()` or `filter()` on it without converting it first.

### Array.of()

Creates an array out of any arguments, including a single number:

```javascript
const arr = Array.of(5);        // [5]
const arr2 = Array.of(1, 2, 3); // [1, 2, 3]
```

That is exactly how `Array.of()` differs from `new Array()`: it never treats a lone numeric argument as a length. This makes it the safe choice when an array is assembled dynamically and you do not know in advance how many arguments there will be or what type they are.

### Comparing the approaches

| Approach | Example | Characteristics |
| --- | --- | --- |
| Literal | `[]` or `[1, 2]` | the simplest and safest |
| `new Array()` | `new Array(3)` | with one numeric argument creates an array of length 3 |
| `Array.of()` | `Array.of(3)` | creates `[3]`, no confusion |
| `Array.from()` | `Array.from("abc")` | turns iterable and array like objects into an array |

### Common mistakes

1. **`new Array(5)` instead of `[5]`.** A single numeric argument sets the length, not the value. If you need an array holding one number, write a literal or `Array.of(5)`.
2. **Trying to fill the result of `new Array(5)` with `map()`.** Empty slots are skipped, so `new Array(5).map((_, i) => i)` stays empty. The working form is `Array.from({ length: 5 }, (_, i) => i)`.
3. **Calling array methods on an array like object.** `arguments` and `NodeList` have no `map()` or `filter()`, so `Array.from()` or a spread is required first.
4. **Using `new Array()` where a literal would do.** It is longer, reads slower and adds the length trap for no benefit at all.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.