Changing an array length manually

JavaScriptJunior~2 min read

The length property of a JavaScript array is special: it does not merely report the length, it controls how many elements the array has. Changing it by hand directly affects the contents, so assigning to length should be treated as a data-changing operation, not as writing a bookkeeping number.

Theory

TL;DR

length is both readable and writable, and assigning to it changes the array itself.
A smaller value truncates the array: elements at higher indexes disappear for good.
A larger value appends empty slots (empty items), not undefined.
Empty slots are skipped by forEach, map, filter, some and reduce.
arr.length = 0 clears the array in place, without creating a new one.
An invalid value (-1, 1.5, 'abc') throws RangeError: Invalid array length.

Quick example

javascript

const arr = [1, 2, 3, 4, 5];

arr.length = 3;
console.log(arr); // [1, 2, 3]

arr.length = 5;
console.log(arr); // [1, 2, 3, <2 empty items>]

The values that "come back" when you raise length again are not restored: their places hold empty slots.

Decreasing length

javascript

const arr = [1, 2, 3, 4, 5];
arr.length = 3;

console.log(arr); // [1, 2, 3]

If you decrease length, every element at a higher index is removed. The result matches arr.splice(3), but it is faster and creates no intermediate array. The data is gone for good: setting length back does not bring the values back.

Increasing length and empty slots

javascript

const arr = [1, 2, 3];
arr.length = 6;

console.log(arr);    // [1, 2, 3, <3 empty items>]
console.log(arr[4]); // undefined

If you increase length, empty slots (empty items) are added. They are not equal to undefined; they are empty cells that are effectively "not there", which is why forEach() skips them.

The difference between an empty slot and a real undefined shows up like this:

javascript

const sparse = [1, 2, 3];
sparse.length = 5;

const dense = [1, 2, 3, undefined, undefined];

console.log(4 in sparse); // false, there is no slot
console.log(4 in dense);  // true, undefined is stored there

let visited = 0;
sparse.forEach(() => visited++);
console.log(visited); // 3, the empty slots were skipped

An array like this is called a sparse array. Some operations do see the slots as undefined: for...of, Array.from(), spread and join(). Because of that inconsistency, sparse arrays are best avoided; use Array(6).fill(0) when you need the cells filled.

Clearing an array with length = 0

javascript

const arr = [10, 20, 30];
arr.length = 0;

console.log(arr); // []

This is a convenient way to clear an array without recreating it. The important difference from arr = [] is that assigning length = 0 mutates the same object, so every other variable pointing at that array sees an empty array too. That is also why the trick works on a const.

javascript

const first = [1, 2, 3];
const second = first;

first.length = 0;
console.log(second); // [], the same reference

What matters here

Action	What happens
`arr.length = smaller`	Truncates the array, the extra elements are removed
`arr.length = larger`	Appends empty slots at the end
`arr.length = 0`	Clears the array in place
Reading `arr.length`	Reports the element count, one more than the largest index
`arr.length = -1`	Throws `RangeError: Invalid array length`

Common mistakes

Assuming that raising length creates undefined values. It creates empty slots, and 4 in arr returns false.
Expecting forEach or map to visit the new cells. These methods skip empty slots, so counters and totals come out lower than expected.
Trying to recover data by restoring length. Once you have lowered it the values are gone; raising it again only gives you empty slots.
Mixing up arr.length = 0 and arr = []. The first clears the existing array for every reference to it; the second creates a new array and leaves the old one untouched for the rest of the code.
Assigning an invalid value to length. arr.length = -1 and arr.length = 1.5 throw a RangeError instead of silently rounding.
Judging an object's "size" by length. On a plain object length is just an ordinary property, and changing it deletes nothing.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.