JavaScript Array Declaration: Difference Between Array() and [] Explained

Table of Contents#

1. Array Literal Syntax ([]): Basics and Examples
2. Array Constructor (Array()): Basics and Examples
3. Key Differences Between [] and Array()
4. Sparse vs. Dense Arrays: A Critical Distinction
5. When to Use [] vs. Array()
6. Common Pitfalls and How to Avoid Them
7. Conclusion
8. References

Array Literal Syntax ([]): Basics and Examples#

The array literal syntax ([]) is the most common and recommended way to declare arrays in JavaScript. It’s concise, readable, and avoids ambiguity.

Syntax#

const arrayName = [element1, element2, ..., elementN];  

Examples#

1. Empty Array#

Declare an empty array with no elements:

const emptyArray = [];  
console.log(emptyArray); // []  
console.log(emptyArray.length); // 0  

2. Single Element#

Declare an array with one element (number, string, object, etc.):

const numArray = [42];  
console.log(numArray); // [42]  
console.log(numArray.length); // 1  
 
const strArray = ["hello"];  
console.log(strArray); // ["hello"]  

3. Multiple Elements#

Declare an array with multiple elements (mixed types are allowed):

const mixedArray = [1, "two", { three: 3 }, [4]];  
console.log(mixedArray); // [1, "two", { three: 3 }, [4]]  
console.log(mixedArray.length); // 4  

4. Array with Holes (Sparse Array)#

You can create a sparse array (with empty slots) using commas, but this is rarely recommended:

const sparseLiteral = [1, , 3]; // Note the missing element between 1 and 3  
console.log(sparseLiteral); // [1, empty, 3]  
console.log(sparseLiteral.length); // 3  

Array Constructor (Array()): Basics and Examples#

The Array constructor (Array()) is a function-based way to create arrays. It can be called with or without the new keyword (both behave identically).

Syntax#

// With new  
const arrayName = new Array(element1, element2, ..., elementN);  
 
// Without new (same result)  
const arrayName = Array(element1, element2, ..., elementN);  

Examples#

1. Empty Array#

Call Array() with no arguments to create an empty array:

const emptyArray = Array();  
console.log(emptyArray); // []  
console.log(emptyArray.length); // 0  

2. Multiple Elements#

Pass multiple arguments to create an array with those elements (behaves like []):

const numArray = Array(1, 2, 3);  
console.log(numArray); // [1, 2, 3]  
 
const mixedArray = Array("a", { b: 2 }, [3]);  
console.log(mixedArray); // ["a", { b: 2 }, [3]]  

3. Single Non-Number Argument#

If you pass a single non-number argument (e.g., string, object), it becomes the only element:

const strArray = Array("hello");  
console.log(strArray); // ["hello"]  
 
const objArray = Array({ key: "value" });  
console.log(objArray); // [{ key: "value" }]  

4. Single Number Argument: The Critical Edge Case#

Here’s where Array() differs drastically from []: If you pass a single number argument, Array() interprets it as the length of the array, not as an element. This creates a sparse array with empty slots.

const lengthArray = Array(3); // Single number argument: length = 3  
console.log(lengthArray); // [empty × 3] (sparse array with 3 empty slots)  
console.log(lengthArray.length); // 3  

⚠️ Warning: This behavior is often unexpected! Compare with [], where [3] creates [3] (an array with element 3), not a length-3 array.

Key Differences Between [] and Array()#

The primary differences boil down to parameter handling and readability. Here’s a breakdown:

1. Handling Single Number Arguments#

2. Sparse vs. Dense Arrays#

• []: Always creates a dense array unless explicitly written with holes (e.g., [1, , 3]).
• Array(n): Creates a sparse array (empty slots) when n is a single number.

3. Readability and Ambiguity#

• []: Explicit and readable. [3] clearly means "an array containing 3."
• Array(3): Ambiguous. At first glance, it looks like it should create [3], but it creates a length-3 sparse array. This confusion is why [] is preferred.

4. Performance#

Array literals ([]) are parsed directly by the JavaScript engine, making them slightly faster than Array(), which involves a function call. While the performance gap is negligible in most apps, [] is still preferred for consistency.

Sparse vs. Dense Arrays: A Critical Distinction#

Sparse arrays (created by Array(n) or [1, , 3]) have empty slots, while dense arrays (created by [1, 2, 3]) have explicit elements. This impacts how array methods (e.g., map, forEach) behave.

Example: map on Sparse vs. Dense Arrays#

// Dense array (created with [])  
const denseArray = [1, 2, 3];  
denseArray.map(x => x * 2); // [2, 4, 6] (all elements processed)  
 
// Sparse array (created with Array())  
const sparseArray = Array(3); // [empty × 3]  
sparseArray.map(x => x * 2); // [empty × 3] (empty slots skipped!)  

⚠️ Most array methods (e.g., map, forEach, filter) skip empty slots in sparse arrays, leading to unexpected results. Use dense arrays ([]) to avoid this.

When to Use [] vs. Array()#

Prefer [] (Array Literal) In Most Cases:#

• Readability: [1, 2, 3] is clearer than Array(1, 2, 3).
• Avoid Ambiguity: Prevents confusion with the single-number length behavior of Array().
• Dense Arrays: Ensures elements are explicitly defined (no empty slots by accident).

Use Array() Only If:#

• You need to create a sparse array with a specific length (e.g., Array(5) for a length-5 array). Even then, prefer new Array(5).fill(0) to create a dense array with default values.

Common Pitfalls and How to Avoid Them#

Pitfall 1: Accidental Sparse Arrays with Array(n)#

// Oops! I wanted [5], but got a length-5 sparse array.  
const mistake = Array(5);  
console.log(mistake); // [empty × 5] (not [5])  

Fix: Use [5] instead.

Pitfall 2: Sparse Arrays Breaking Iteration#

const scores = Array(3); // [empty × 3]  
scores[0] = 90;  
scores.forEach(score => console.log(score)); // Only logs 90 (skips empty slots)  

Fix: Use [] and initialize elements explicitly: const scores = [90, null, null];.

Pitfall 3: Confusing new Array() with []#

// Same result, but unnecessary use of new  
const arr = new Array(1, 2, 3);  

Fix: Use [1, 2, 3] for brevity.

Conclusion#

• Array Literal ([]): The best choice for most cases. It’s readable, avoids ambiguity, and creates dense arrays by default.
• Array Constructor (Array()): Use only when you intentionally need a sparse array with a specific length (and even then, prefer Array(n).fill(0) to create dense arrays).

The key takeaway: [] is safer and more readable. Reserve Array() for rare edge cases where you explicitly need to set an array’s length without initializing elements.

References#

• MDN Web Docs: Array
• MDN Web Docs: Array Literals
• ECMAScript Specification: Array Constructor