Creating an array

JavaScriptJunior~3 min read

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

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).
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).
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.
Using new Array() where a literal would do. It is longer, reads slower and adds the length trap for no benefit at all.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.