Arrays in JavaScript allow you to store multiple values in a single variable. You can create arrays to store strings, numbers, Boolean values, objects, and other data. JavaScript provides several ways to create arrays, including array literals, the Array() constructor, and the Array.of() method.
In this tutorial, you will learn different ways to create arrays in JavaScript, with practical examples and outputs.
Creating an Array Using Array Literals
The simplest and most commonly used way to create an array in JavaScript is by using array literals. An array literal uses square brackets [] to hold elements separated by commas.
Syntax:
let arrayName = [value1, value2, value3];For example:
let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits);Output:
["Apple", "Banana", "Mango"]In this example, the fruits array contains three string elements. Each element has an index starting from 0.
You can also create an array containing numbers:
let numbers = [10, 20, 30, 40, 50];
console.log(numbers);Output:
[10, 20, 30, 40, 50]Array literals are recommended for most everyday array creation because they are simple and easy to read.
Creating an Empty Array
An empty array is an array that initially contains no elements. You can create one using empty square brackets.
let colors = [];
console.log(colors);
console.log(colors.length);Output:
[]
0The length property returns 0 because the array contains no elements.
You can add elements later by assigning values to indexes:
let colors = [];
colors[0] = "Red";
colors[1] = "Green";
colors[2] = "Blue";
console.log(colors);Output:
["Red", "Green", "Blue"]You can also use the push() method to add elements to the end of an array.
let colors = [];
colors.push("Red");
colors.push("Green");
colors.push("Blue");
console.log(colors);Output:
["Red", "Green", "Blue"]Learn more about adding elements in the JavaScript array methods tutorial when that page is available.
Creating an Array Using the Array() Constructor
JavaScript provides the Array() constructor to create arrays. You can use it with or without the new keyword.
let fruits = new Array("Apple", "Banana", "Mango");
console.log(fruits);Output:
["Apple", "Banana", "Mango"]Here, the Array() constructor creates an array containing three elements.
However, be careful when passing a single number to the constructor.
let numbers = new Array(5);
console.log(numbers.length);
console.log(numbers);Output:
5
[ <5 empty items> ]new Array(5) creates an array with a length of 5 containing empty slots. It does not create an array containing the number 5.
If you want an array with the number 5 as its only element, use an array literal:
let numbers = [5];
console.log(numbers);Output:
[5]For most situations, array literals are easier to understand and less error-prone.
Creating an Array Using Array.of()
The Array.of() method creates a new array using the values you pass as arguments. It is particularly useful when you want to create an array containing a single number.
let numbers = Array.of(5);
console.log(numbers);Output:
[5]Unlike new Array(5), which creates five empty slots, Array.of(5) creates an array containing one element: the number 5.
You can pass multiple values as well:
let numbers = Array.of(10, 20, 30);
console.log(numbers);Output:
[10, 20, 30]Use Array.of() when you want the supplied arguments to become the elements of the array.
Creating an Array Using Array.from()
The Array.from() method creates a new array from an iterable object or an array-like object. Common examples include strings and sets.
Creating an Array from a String
let letters = Array.from("JavaScript");
console.log(letters);Output:
["J", "a", "v", "a", "S", "c", "r", "i", "p", "t"]Each character becomes an individual element in the new array.
Creating an Array from a Set
A Set stores unique values. You can use Array.from() to convert its values into an array.
let uniqueNumbers = new Set([10, 20, 20, 30]);
let numbers = Array.from(uniqueNumbers);
console.log(numbers);Output:
[10, 20, 30]The duplicate value 20 appears only once because the source is a Set.
Creating an Array with Multiple Data Types
JavaScript arrays can contain values of different data types.
let student = ["Karim", 22, true, 85.5];
console.log(student);Output:
["Karim", 22, true, 85.5]This array contains:
"Karim"— a string.22— a number.true— a Boolean value.85.5— a number.
JavaScript permits mixed data types in an array. However, using a consistent structure often makes your code easier to maintain.
Creating an Array of Objects
Arrays can store objects when you need to represent multiple records. This is common in web applications, where you might display a list of products or students.
let students = [
{ name: "Arun", marks: 85 },
{ name: "Priya", marks: 92 },
{ name: "Rahul", marks: 78 }
];
console.log(students);
console.log(students[0].name);Output:
[
{ name: "Arun", marks: 85 },
{ name: "Priya", marks: 92 },
{ name: "Rahul", marks: 78 }
]
ArunThe students array contains three objects. Each object stores a student’s name and marks.
The expression students[0].name accesses the first object and retrieves its name property.
Creating an Array with Array.from() and a Mapping Function
Array.from() can also accept a mapping function as its second argument. This lets you create and populate an array in one step.
let squares = Array.from([1, 2, 3, 4], number => number * number);
console.log(squares);Output:
[1, 4, 9, 16]The mapping function multiplies each number by itself and places the result in the new array.
This technique is useful when you want to transform values while creating an array.
Difference Between Array Literal, Array(), Array.of(), and Array.from()
| Method | Example | Result |
|---|---|---|
| Array literal | [5] | Array containing 5 |
Array() constructor | new Array(5) | Array of length 5 with empty slots |
Array.of() | Array.of(5) | Array containing 5 |
Array.from() | Array.from("cat") | Array containing "c", "a", and "t" |
For most everyday use, choose an array literal. Use Array.of() when you want to create an array from individual arguments, and use Array.from() when converting an iterable or array-like value into an array.
Frequently Asked Questions
What is the easiest way to create an array in JavaScript?
The easiest way is to use an array literal with square brackets.
let fruits = ["Apple", "Banana", "Mango"];How do you create an empty array in JavaScript?
Use empty square brackets:
let items = [];What is the difference between [] and new Array()?
[] creates an array directly. new Array() invokes the array constructor, whose behavior depends on its arguments. For example, new Array(3) creates three empty slots, while [3] creates one element containing the number 3.
What is the difference between Array.of() and Array.from()?
Array.of() creates an array from the arguments you provide. Array.from() creates an array from an iterable or array-like object, optionally transforming its elements.
Can an array contain objects in JavaScript?
Yes. An array can contain objects, making it useful for storing records such as students, products, and employee details.
Can I add elements to an empty array?
Yes. You can use push() to add elements to the end of an array or assign values to specific indexes.