Introduction

In JavaScript, [] and Array() can both create arrays, but they are not equivalent in all cases. The main difference is that array literals are explicit about their contents, while the Array constructor has special behavior when called with a single numeric argument.

Why [] Is Usually the Better Default

Array literals are the simplest and clearest way to create an array.

1const empty = [];
2const fruits = ["apple", "banana", "cherry"];
3console.log(empty.length);
4console.log(fruits[1]);

When you read [], there is no ambiguity. An empty array is empty, and [3] means an array containing the number 3.

That clarity is the main reason most JavaScript style guides prefer array literals over new Array(...) or Array(...).

The Special Case in Array()

The Array constructor behaves differently depending on how many arguments you pass.

console.log(Array());
console.log(Array("a", "b"));
console.log(Array(3));

Those three calls do three different things:

• 'Array() creates an empty array'
• 'Array("a", "b") creates an array with those elements'
• 'Array(3) creates an array with length 3 and three empty slots'

That last case is the confusing one. It does not create [3]. It creates a sparse array with a length of 3.

1const a = Array(3);
2console.log(a.length);
3console.log(a);
4console.log(0 in a);

The result has empty slots, not actual stored values. That affects iteration and array methods.

Empty Slots Are Not the Same as undefined

This is where many bugs come from. A sparse array created by Array(3) behaves differently from [undefined, undefined, undefined].

1const sparse = Array(3);
2const filled = [undefined, undefined, undefined];
3
4console.log(sparse.map(() => 1));
5console.log(filled.map(() => 1));

map skips empty slots, so the sparse array does not behave like a fully populated array. That surprises developers who expected a normal three-element array.

If you really want three initialized entries, create them explicitly:

const values = Array.from({ length: 3 }, () => 0);
console.log(values);

That gives you a real array containing zeros, not holes.

Array.of() and Array.from() Solve Common Constructor Problems

Modern JavaScript includes better factory helpers that avoid the constructor’s ambiguous behavior.

console.log(Array.of(3));
console.log(Array.from("abc"));

Array.of(3) returns [3], which is often what people expected from Array(3) the first time they used it.

Array.from(...) is also useful when you want to build arrays from iterable values or generate initialized arrays.

Performance and Readability

In normal application code, the choice is mostly about readability and correctness, not micro-optimization. [] is shorter, more common, and less error-prone.

Use the constructor only when you intentionally want its behavior, such as creating a sparse array of a particular length. Even then, Array.from is often the safer option because it makes initialization explicit.

A practical guideline is:

• use [] for ordinary arrays
• use Array.from for generated arrays
• use Array.of when you want an array from argument values without constructor ambiguity

Common Pitfalls

The biggest mistake is assuming Array(3) creates [3]. It does not. It creates a sparse array with length 3.

Another issue is forgetting that methods such as map and forEach treat empty slots differently from actual values.

A third problem is using new Array(...) simply because it looks more object-oriented. In JavaScript, the literal form is usually clearer.

Summary

• '[] and Array() both create arrays, but Array() has special constructor behavior.'
• '[] is usually the clearest and safest way to declare an array.'
• 'Array(3) creates a sparse array with length 3, not [3].'
• Empty slots behave differently from explicit undefined values.
• Prefer Array.of() or Array.from() when constructor semantics would be ambiguous.