Suggest an edit

Improve this article

Refine the answer for “Changing an array length manually”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts731 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.