JavaScript: Array Literal vs Array Object

In JavaScript, an array is a special kind of list that lets you store multiple values in one variable. You can think of it like a row of boxes, where each box holds a different item—like numbers, strings, or even other arrays!

There are two main ways to create an array in JavaScript:

• Array Literal – uses square brackets like this: []
• Array Constructor – uses the new Array() syntax

In this article, we won’t talk about which one is faster or better—we’ll simply learn how to use both. Step by step, we’ll look at what each one does, how to create arrays with them, and how they behave in different situations.

Creating Arrays

There are two main ways to make arrays in JavaScript: using array literals or using the Array constructor. Both methods let you store a list of values, but the way you write them is a bit different.

a. Using Array Literal ([])

This is the simplest and most common way to create an array. You just put your items inside square brackets [], separated by commas.

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits);

Here, we made an array called fruits that holds three items: "apple", "banana", and "orange". You can mix different types too:

const mixed = ['hello', 42, true];

console.log(mixed);

Array literals are easy to read and write. Most developers use this method unless they need something special.

b. Using Array Constructor (new Array())

This method uses the Array constructor with the new keyword. Here’s how it looks:

const fruits = new Array('apple', 'banana', 'orange');

console.log(fruits);

This gives the same result as the literal version—it creates an array with three items.

You can also use it to make an empty array:

const empty = new Array();

console.log(empty);

Or, to create an array with a certain length:

const numbers = new Array(3);

console.log(numbers);

This creates an array with 3 empty slots (no values inside yet).

Both ways work, and you can choose the one that fits your style or your needs. Up next, we’ll look at how to add and change items in these arrays!

Adding and Modifying Elements

Once you’ve created an array—whether using square brackets [] or the new Array() constructor—you can easily add new items or change existing ones. Both methods use the same tools for updating arrays.

a. With Array Literal

If you created your array using square brackets, like this:

const fruits = ['apple', 'banana'];

You can change an item by using its index (the position in the array, starting from 0):

const fruits = ['apple', 'banana'];
fruits[0] = 'mango'; // Now the array is ['mango', 'banana']

console.log(fruits);

You can also add items using methods like push():

fruits.push('orange'); // ['mango', 'banana', 'orange']

You can even add to a specific spot using the index:

fruits[3] = 'grape'; // Adds 'grape' at index 3

b. With Array Object

If you created your array using the constructor:

const fruits = new Array('apple', 'banana');

You can update and add items the exact same way:

fruits[0] = 'mango';     // ['mango', 'banana']
fruits.push('grape');    // ['mango', 'banana', 'grape']

So no matter how you created the array, changing and adding items works the same!

Next, let’s learn how to read those values back out.

Accessing Elements

After you’ve added items to an array, you’ll want to get them back—this is called accessing elements. Good news: no matter how you created the array, the way you access items is exactly the same.

Access by Index

Each item in an array has a number called an index, starting from 0. You can use that number to get the item.

const fruits = ['apple', 'banana', 'cherry'];

console.log(fruits[0]); // 'apple'
console.log(fruits[1]); // 'banana'
console.log(fruits[2]); // 'cherry'

This works the same if you used the new Array() method:

const fruits = new Array('apple', 'banana', 'cherry');

console.log(fruits[1]); // 'banana'

Looping Through an Array

Arrays often hold more than one item, so looping helps you work with all of them.

Using a regular for loop:

const fruits = ['apple', 'banana', 'cherry'];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Using forEach:

const fruits = ['apple', 'banana', 'cherry'];

fruits.forEach(function(fruit) {
    console.log(fruit);
});

Using for...of:

const fruits = ['apple', 'banana', 'cherry'];

for (const fruit of fruits) {
    console.log(fruit);
}

All of these methods work for both array literals and arrays made with new Array().

Next, let’s look at how to create empty arrays!

Creating Empty Arrays

Sometimes you want to start with an empty array and add items later. You can do this with both array literals and the new Array() constructor. Both ways create an array with nothing inside.

a. Using Array Literal

This is the easiest and most common way:

const empty = [];

You now have an empty array named empty. You can add items later like this:

empty.push('first item');

b. Using Array Constructor

You can also create an empty array using the constructor:

const empty = new Array();

This does the same thing—an empty array ready to be filled:

empty.push('first item');

Both ways work fine, and they behave the same once created. Literal form ([]) is shorter, but the choice is up to you.

Next, let’s learn how to create arrays with a specific length!

Creating Arrays with a Specific Length

Sometimes, you might want to create an array with a certain number of “slots” right from the start. This is helpful if you plan to fill it later.

a. Using Array Literal

You can manually set up the array with empty spots using undefined:

const arr = [undefined, undefined, undefined];

This gives you an array with 3 items, and each one is undefined. You can fill them later like this:

arr[0] = 'a';
arr[1] = 'b';
arr[2] = 'c';

b. Using Array Constructor

There’s a quicker way to do this using the constructor:

const arr = new Array(3);

This creates an array with 3 empty slots, but they’re not filled with undefined—they’re just uninitialized (which is a bit different).

You can still assign values later:

arr[0] = 'a';
arr[1] = 'b';
arr[2] = 'c';

Both methods give you an array with 3 places, but the constructor method is shorter and more automatic.

Next, let’s see what happens when you try to create an array with just one item.

Creating Arrays with One Element

Let’s look at how to make an array that holds just one item. This is where the difference between the array literal and the constructor becomes more noticeable.

a. Using Array Literal

This method is super clear. You put the item inside square brackets:

const one = ['hello'];

This creates an array with one element—'hello'. Easy and straightforward.

b. Using Array Constructor

Now let’s try it with new Array():

const one = new Array('hello');

This also creates an array with one item—just like the literal.

But here’s the twist:

const tricky = new Array(1);

This creates an empty array with length 1, not an array that holds the number 1. So:

• new Array('hello') → ['hello']
• new Array(1) → [ <1 empty item> ]

That means if you use a number with the constructor, JavaScript thinks you’re setting the length, not adding a value.

If you want an array with just the number 1 inside, use this:

const one = [1];

console.log(one);

Or:

const one = new Array(1).fill(1);

console.log(one);

Next, let’s see how both array types behave when used in functions!

Nested Arrays and Multidimensional Arrays

Arrays can hold all kinds of values—even other arrays! This is called a nested array, and it’s how we make things like grids or tables in JavaScript.

The good news? Both array literals and array constructors support nested arrays.

Using Array Literal

You can create a nested array by placing arrays inside square brackets:

const grid = [
  [1, 2],
  [3, 4]
];

Here, grid[0] is [1, 2] and grid[1] is [3, 4]. You can access nested values like this:

console.log(grid[0][1]); // 2

Using Array Constructor

You can do the same thing with the new Array() constructor:

const grid = new Array(new Array(1, 2), new Array(3, 4));

This creates the same nested structure. Accessing the values works the same way:

console.log(grid[1][0]); // 3

So whether you use [] or new Array(), you can build and work with nested arrays just fine.

Summary Table

Here’s a quick side-by-side comparison of how to use array literals and the new Array() constructor. This will help you see the main differences and similarities!

This table highlights the common ways to create and work with arrays using both methods. The main takeaway? Array literals are shorter and simpler to use, while the Array constructor gives you some extra flexibility, especially when dealing with array lengths.

And that’s a wrap! You’re now ready to confidently use both array literals and the new Array() constructor in your JavaScript projects.

Conclusion

To recap what we’ve learned:

• Array Literals ([]) are shorter and more common. They’re perfect when you want to quickly create an array with values already inside.
• Array Constructor (new Array()) is more flexible, especially when you need to create arrays with a specific length. It can also be used to create empty arrays or arrays with dynamic sizes.

In the end, you can pick whichever method fits your needs:

• If you need clarity and readability, go for array literals.
• If you need flexibility in handling lengths or creating arrays in special ways, the constructor might be the better choice.

Both methods do the job, so just choose the one that works best for your situation!

That’s the end of the article — now you’ve got a solid understanding of when and how to use both array literals and constructors in JavaScript.