JavaScript Create Array: A Complete Guide

Arrays are one of the most important data structures in JavaScript. They store multiple values in a single variable. This guide shows you how to create an array in JavaScript using different methods.

You will learn about array literals, the Array constructor, and modern methods like Array.from(). Each method has its own use case. By the end, you will know which one to pick for your project.

What is an Array in JavaScript?

An array is an ordered list of values. Each value is called an element. Elements can be numbers, strings, objects, or even other arrays. Arrays are zero-indexed, meaning the first element is at index 0.

Creating arrays is the first step to using them. JavaScript offers several ways to do this. Let's explore each one.

Method 1: Array Literal (Recommended)

The easiest way to create an array is with square brackets []. This is called an array literal. It is fast, readable, and the most common method.

 
// Creating an empty array
let fruits = [];

// Creating an array with initial values
let colors = ["red", "green", "blue"];

// Mixed data types are allowed
let mixed = [42, "hello", true, null];

Array literals are preferred because they are clear and less error-prone. You can also create an array with a single number without confusion.

Method 2: The Array Constructor

You can use the Array constructor with the new keyword. This method has some quirks you need to know.

 
// Empty array
let empty = new Array();

// Array with three empty slots
let threeSlots = new Array(3);
console.log(threeSlots.length); // Output: 3

// Array with initial values
let numbers = new Array(10, 20, 30);
console.log(numbers); // Output: [10, 20, 30]

Important: If you pass a single number to Array(), it sets the array length, not the first element. This can cause bugs. For example, new Array(5) creates an array with 5 empty slots, not an array containing the number 5.

Because of this behavior, most developers avoid the constructor for simple arrays. Use array literals instead.

Method 3: Array.of()

The Array.of() method fixes the constructor's single-number issue. It always creates an array with the arguments you pass, regardless of how many you pass.

 
// Creates [5], not an array of length 5
let single = Array.of(5);
console.log(single); // Output: [5]

// Creates [1, 2, 3]
let list = Array.of(1, 2, 3);
console.log(list); // Output: [1, 2, 3]

Use Array.of() when you need to create an array from dynamic arguments. It is safer than the constructor.

Method 4: Array.from()

The Array.from() method creates a new array from an iterable or array-like object. This is useful for converting strings, NodeLists, or sets into real arrays.

 
// Convert a string into an array of characters
let chars = Array.from("hello");
console.log(chars); // Output: ["h", "e", "l", "l", "o"]

// Convert a Set into an array
let set = new Set([1, 2, 3]);
let arr = Array.from(set);
console.log(arr); // Output: [1, 2, 3]

// Use a map function to transform values
let doubled = Array.from([1, 2, 3], x => x * 2);
console.log(doubled); // Output: [2, 4, 6]

Array.from() is very powerful. It accepts a second argument, a map function, to transform each element as the array is created.

Method 5: Spread Operator

The spread operator ... can expand an iterable into a new array. It is often used to copy or combine arrays.

 
// Copy an array
let original = [1, 2, 3];
let copy = [...original];
console.log(copy); // Output: [1, 2, 3]

// Combine two arrays
let arr1 = [10, 20];
let arr2 = [30, 40];
let combined = [...arr1, ...arr2];
console.log(combined); // Output: [10, 20, 30, 40]

// Convert a string to an array
let word = [..."code"];
console.log(word); // Output: ["c", "o", "d", "e"]

The spread operator is concise and modern. It works great for shallow copies and merging data.

Creating Arrays with Specific Length and Values

Sometimes you need an array of a fixed length filled with a default value. You can use Array.fill() for this.

 
// Create an array of 5 zeros
let zeros = new Array(5).fill(0);
console.log(zeros); // Output: [0, 0, 0, 0, 0]

// Create an array of 3 "a" strings
let letters = new Array(3).fill("a");
console.log(letters); // Output: ["a", "a", "a"]

First, create an array with the constructor, then call fill(). This pattern is clean and efficient.

When to Use Each Method

Here is a quick summary:

• Array literal – Use for most cases. It is simple and safe.
• Array constructor – Avoid unless you need to set length dynamically.
• Array.of() – Use when creating arrays from function arguments.
• Array.from() – Use to convert iterables like strings or NodeLists.
• Spread operator – Use for copying or merging arrays.

For a deeper understanding of array operations, check out our guide on JavaScript Array Methods Guide. It covers how to manipulate arrays once they are created.

Also, learn how to store arrays in variables properly with the JavaScript Array Variables Guide. This will help you avoid common mistakes.

Common Mistakes When Creating Arrays

Beginners often make these errors:

• Using new Array(5) when you meant [5]. Remember the constructor treats a single number as length.
• Forgetting commas in array literals. This can cause unexpected behavior.
• Not using Array.from() for array-like objects. Looping over a NodeList without converting it can lead to errors.

Always test your arrays with console.log() to verify their contents.

Conclusion

Creating an array in JavaScript is easy once you know the options. The array literal is your best friend for everyday coding. Use Array.from() for conversions and the spread operator for copies.

Choose the method that fits your task. Avoid the constructor for simple arrays. With these tools, you can confidently build and manage data in your JavaScript projects.

Now you are ready to start coding. Practice each method to see how they work in real scenarios.