Introduction

In JavaScript, you can set an array's length when you create it, but that does not always create actual elements. The important distinction is between an array with empty slots and an array filled with usable values such as 0, null, or objects.

new Array(length) Creates Empty Slots

The most direct way to allocate an array of a specific length is:

const arr = new Array(5);
console.log(arr.length);
console.log(arr);

This prints a length of 5, but the array contains empty slots, not normal values. That distinction matters because many array methods behave differently with empty slots than with actual undefined entries.

For example:

const arr = new Array(3);
arr.forEach(value => console.log(value));
console.log(arr.map(x => 1));

The callbacks do not run over missing elements the same way they run over real values.

Use fill When You Want Actual Values

If your real goal is “make an array of length n containing a starting value,” combine the constructor with fill.

const zeros = new Array(5).fill(0);
console.log(zeros);

That creates real elements, which makes methods like map, forEach, and reduce behave normally.

const flags = new Array(4).fill(false);
console.log(flags.map(x => !x));

This is often the best answer when the array is meant to hold primitive placeholders.

Be Careful with Objects in fill

fill reuses the same object reference for every slot when you pass an object.

const rows = new Array(3).fill([]);
rows[0].push(1);
console.log(rows);

All three entries point to the same array, so changing one changes all of them. If you need distinct objects, use Array.from instead.

const rows = Array.from({ length: 3 }, () => []);
rows[0].push(1);
console.log(rows);

This creates a new array for each position.

Use Array.from for Initialization Logic

Array.from is one of the cleanest tools when you want both a length and per-index initialization.

const numbers = Array.from({ length: 5 }, (_, index) => index);
console.log(numbers);

This produces [0, 1, 2, 3, 4].

It is a better choice than creating empty slots and then trying to map over them, because the elements are created intentionally during construction.

Setting length Later

You can also resize an existing array by changing its length property.

1const arr = [1, 2, 3];
2arr.length = 5;
3console.log(arr);
4
5arr.length = 2;
6console.log(arr);

Increasing the length adds empty slots. Decreasing the length truncates the array.

This is valid, but it is usually clearer to create the array in the intended shape upfront unless you are deliberately trimming or expanding it.

Which Pattern to Choose

A practical rule is:

• use new Array(n) when you only care about reserved length or will assign elements manually later
• use new Array(n).fill(value) for a repeated primitive default
• use Array.from({ length: n }, fn) when each element needs unique initialization
• avoid fill with objects unless shared references are exactly what you want

This is less about syntax preference and more about the semantics of the resulting array.

Performance and Readability

For most application code, readability matters more than micro-optimizing how the array was initialized. Modern JavaScript engines are very good at array operations, but sparse arrays and dense arrays are treated differently internally.

If the array is meant for normal iteration and data processing, dense arrays with real elements are usually the safer and clearer choice.

A sparse array created accidentally can lead to surprising bugs, especially when methods skip missing elements silently.

Common Pitfalls

A common mistake is thinking new Array(5) creates five undefined values. It creates five empty slots.

Another mistake is using fill([]) or fill({}) and expecting each slot to get a fresh object. All entries share the same reference.

Developers also sometimes try to use map directly on a newly constructed sparse array and then wonder why nothing happens.

Finally, resizing an array by setting length can silently drop data when the new length is smaller. That is correct behavior, but it should be done intentionally.

Summary

• 'new Array(n) sets the length but creates empty slots.'
• 'fill creates actual values and is usually better for usable initialized arrays.'
• 'Array.from is ideal when each position needs custom initialization.'
• Do not use fill with objects unless shared references are intended.
• Choose dense arrays over sparse ones for most everyday JavaScript code.