By the end of this lesson, you will be able to create JavaScript arrays using the Array constructor, literal syntax, and helper methods, and explain why new Array(3) does not produce [3].
What it is
An array constructor is a function used to create array objects. In JavaScript, the built-in Array constructor can be called with new or without it: new Array(...) and Array(...) behave the same. The constructor has two main forms: when given one integer numeric argument, it creates an empty array with that length; when given multiple arguments or a non-numeric single argument, it creates an array containing those values. Related terms include array literal [], sparse arrays, holes, Array.of(), and Array.from().
Why it matters
- It explains surprising behavior such as
new Array(3)producing three empty slots instead of one element. - It helps you choose the right creation method for fixed values, generated sequences, or array-like objects.
- It prevents bugs in loops and array methods that treat holes differently from
undefinedvalues. - It makes legacy code easier to read, because older JavaScript often used
new Array().
Syntax or steps
- Use
const arr = [];for most arrays. - Use
new Array(length)only when you need an array with a specific length and plan to fill it later. - Use
Array.of(value)when you want a single-element array from a number. - Use
Array.from(iterableOrArrayLike, mapFn)when converting strings, sets, or array-like objects into arrays.
Example
const sparse = new Array(3);
const filled = Array.from({ length: 3 }, (_, i) => i);
const single = Array.of(3);
console.log(sparse.length); // 3
console.log(sparse[0]); // undefined
console.log(0 in sparse); // false
console.log(filled); // [0, 1, 2]
console.log(single); // [3]
Part by part: new Array(3) creates an array whose length is 3, but indexes 0, 1, and 2 are holes. sparse[0] returns undefined because reading a missing property gives undefined, but 0 in sparse is false because the slot was never assigned. Array.from({ length: 3 }, (_, i) => i) creates a real array with three defined values. Array.of(3) creates [3], avoiding the numeric-length special case.
Common mistakes
- Expecting
new Array(3)to mean[3]. Fix: use[3]orArray.of(3). - Assuming holes are normal
undefinedelements. Fix: fill holes withArray.from(),fill(), or a loop before using methods that skip holes. - Passing a non-integer length, such as
new Array(2.5). Fix: use an integer length or create the array from values. - Using
new Array(1, 2, 3)when[1, 2, 3]is clearer. Fix: prefer literals unless you specifically need the constructor behavior.
When to use it
| Goal | Best choice | Why |
|---|---|---|
| Create a normal list of values | [1, 2, 3] | Short, clear, and avoids constructor edge cases. |
| Create a single-element numeric array | Array.of(3) | Produces [3], not a length-3 empty array. |
| Create an array with a known length to fill later | new Array(3) | Sets length immediately, but leaves holes. |
| Convert an iterable or array-like object | Array.from() | Creates defined elements and can map values while converting. |
Practice
Guided exercise: create an array of length 4 using new Array(4), then assign values to indexes 0 through 3. Expected output after assignment: [10, 20, 30, 40].
Challenge: create an array containing the numbers 1 through 5 without using a loop. Hint: use Array.from({ length: 5 }, (_, i) => i + 1).
Quick check
Question: What is the difference between new Array(3) and [3]?
Answer: new Array(3) creates an empty array with length 3 and three holes, while [3] creates an array with one defined element, the number 3.
Summary
The Array constructor is useful for length-based creation and legacy code, but its numeric argument rule can be confusing. For everyday JavaScript, prefer array literals, Array.of(), and Array.from() to create predictable arrays.