How to Create and Initialize JavaScript Arrays

An array is an ordered list of values. In JavaScript, you can put numbers, strings, objects, or even other arrays inside one. Creating and initializing an array is the very first step before you can add, remove, or loop through items.

JavaScript gives you four ways to create an array. Each one is useful in a different situation.

1. Array Literal Notation (Recommended)

Square brackets are the simplest and most common way to create an array in JavaScript. You list the values you want, separated by commas, and JavaScript builds the array immediately with no extra setup.

javascript

const empty = [];
const fruits = ["apple", "banana", "orange"];
const mixed = [42, "hello", true, null];

An array can hold any mix of value types in the same list, as the mixed example above shows. Arrays can also hold other arrays, which is useful for grid-like data such as a tic-tac-toe board or a table of rows:

javascript

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

Literal notation is the preferred way in almost every situation. It is short, readable, and has no unexpected behavior, unlike the Array constructor covered next.

Once an array exists, you can inspect it with console.log and check how many items it holds with the length property:

javascript

const fruits = ["apple", "banana", "orange"];
 
console.log(fruits);        // ["apple", "banana", "orange"]
console.log(fruits.length); // 3
console.log(fruits[0]);     // "apple"

The length property tells you how many items the array holds. Indexing starts at 0, so fruits[0] gets the first item.

2. The Array Constructor

JavaScript also provides an Array constructor function:

javascript

// Empty array
const arr1 = new Array();
console.log(arr1); // []
 
// Array with values
const arr2 = new Array("red", "green", "blue");
console.log(arr2); // ["red", "green", "blue"]

So far the Array constructor looks the same as literal notation, but it behaves differently when you pass exactly one number. Instead of putting that number inside the array, JavaScript treats it as a length and creates that many empty slots:

javascript

const arr3 = new Array(5);
console.log(arr3);        // [ <5 empty slots> ]
console.log(arr3.length); // 5
console.log(arr3[0]);     // undefined

Compare that to what you probably wanted: an array that actually contains the number 5, with a length of 1 instead of 5 empty slots.

javascript

const arr4 = [5];
console.log(arr4);        // [5]
console.log(arr4.length); // 1

This is the main reason most developers avoid the Array constructor. Passing a single number creates a sparse array with that many empty slots instead of an array containing that number.

3. Array.of() -- Predictable Creation

Array.of() was added in ES6 to fix the single-number confusion of the Array constructor. It always creates an array from its arguments, no exceptions:

javascript

const arr1 = Array.of(5);
console.log(arr1);        // [5]
console.log(arr1.length); // 1

The same predictable behavior holds no matter how many arguments you pass or what type they are, which is why Array.of is a safer default than the Array constructor when the argument count can vary:

javascript

const arr2 = Array.of("a", "b", "c");
console.log(arr2); // ["a", "b", "c"]
 
const arr3 = Array.of(1, "two", false);
console.log(arr3); // [1, "two", false]

With Array.of, what you pass in is exactly what you get. No special cases. Use it when you are creating arrays from variables and want predictable results every time.

javascript

function makeArray(...values) {
  // Array.of guarantees each value becomes an element
  return Array.of(...values);
}
 
console.log(makeArray(3));       // [3]
console.log(makeArray(1, 2, 3)); // [1, 2, 3]

4. Array.from() -- Convert Anything to an Array

Array.from() creates a new array from an iterable or an array-like object. This is powerful when you have data in another format and need a real array. A string is iterable, so Array.from turns it into an array of characters:

javascript

console.log(Array.from("hello"));
// ["h", "e", "l", "l", "o"]

A Set is also iterable, so Array.from can convert one back into an array, which is a common way to deduplicate values:

javascript

const uniqueNumbers = new Set([1, 2, 2, 3, 3, 4]);
console.log(Array.from(uniqueNumbers));
// [1, 2, 3, 4]

In the browser, Array.from(document.querySelectorAll("button")) works the same way, turning a NodeList of DOM elements into a real array so you can use methods like map and filter on it.

Array.from also takes an optional mapping function as the second argument:

javascript

// Create an array of numbers from 0 to 4, then double each
const doubled = Array.from({ length: 5 }, (_, i) => i * 2);
console.log(doubled); // [0, 2, 4, 6, 8]

The first argument, { length: 5 }, is an array-like object with a length property. Array.from treats it as having 5 slots. The mapping function runs for each slot, receiving the element (which is undefined for empty slots) and the index.

This pattern is a clean way to generate sequences without a loop. For copying array elements into a new array, the spread operator provides another clean alternative.

Which Method Should You Use?

For most code, stick with literal notation. It works the same in every situation, it is the shortest to type, and every JavaScript developer recognizes it instantly.

Common Mistake: Creating an Array of a Specific Length

A common pattern is creating an array with a fixed number of slots to fill later:

javascript

// Wrong if you want [5]
const bad = new Array(5);
console.log(bad); // [ <5 empty slots> ]
 
// Correct ways
const good1 = Array.from({ length: 5 });      // [undefined × 5]
const good2 = Array(5).fill(0);               // [0, 0, 0, 0, 0]
const good3 = [...Array(5)].map((_, i) => i);  // [0, 1, 2, 3, 4]

fill() is useful when you want every slot to start with the same value. The spread operator combined with map is the go-to pattern for generating a sequence.

Once you have an array, you will want to read and change its elements. See Accessing and Modifying JS Array Elements Guide to continue.