Array.prototype.fill()

Mostly used to make new Array(n) usable. Its one serious trap is that an object or array argument is stored once and shared by every slot.

Array methodES2015Live demo
Common call
new Array(3).fill(0)
Returns
the same array, mutated
Replaces
a loop assigning the same value to every index
Watch out
fill([]) puts the SAME array in every slot, not one each
array.fill(value[, start[, end]])
→ Array

Demo

Live evaluation
Try:
Inputs
itemsnumber[]numbers, comma separated
valuenumbervalue to fill with
Output
[1, 2, 3].fill(0)
[0, 0, 0]

Every slot in the range is overwritten with the same value, and the array is modified in place. With numbers that is all there is to it. The behaviour worth knowing sits outside what a number input can show: fill evaluates its argument ONCE, so filling with an object or array puts the very same reference in every slot — mutating one visibly mutates them all.

Parameters

NameTypeRequiredDescription
valueanyyesThe value written to every slot in the range. Evaluated ONCE — objects and arrays are shared, not copied.
startnumberno (0)Index to start filling at. Negative counts from the end.
endnumberno (length)Index to stop BEFORE. Negative counts from the end.

Return value

Array — The SAME array, with the range overwritten. Mutates in place — the return value is a reference to the original.

Common patterns

Make new Array(n) usable
A bare new Array(n) is full of holes that most methods skip.
const zeros = new Array(5).fill(0);
Build a grid safely
A mapped fill gives each row its own array.
const grid = Array.from({length: 3}, () => new Array(3).fill(0));
Reset an existing buffer
In place, without reallocating.
buffer.fill(0);

Examples

1. Fill everything
[1, 2, 3].fill(0)
Returns
[0, 0, 0]
2. From an index
[1, 2, 3].fill(0, 1)
Returns
[1, 0, 0]
3. A range
[1, 2, 3].fill(0, 1, 2)
Returns
[1, 0, 3]
4. Populate holes
new Array(3).fill(0)
Returns
[0, 0, 0]
5. It mutates
const a = [1, 2]; a.fill(0); a
Returns
[0, 0]
6. Shared reference
const a = new Array(2).fill([]); a[0].push(1); a
Returns
[[1], [1]]

Pitfalls

1. Filling with an object shares one reference
The single real trap. fill evaluates the value once, so every slot points at the SAME object. Pushing to one row of a grid built this way appears to push to all of them.
All slots share
const a = new Array(2).fill([]);
a[0].push(1);
a
[[1], [1]]
One per slot
const a = Array.from({length: 2}, () => []);
a[0].push(1);
a
[[1], []]
2. It mutates and returns the same array
Like sort and reverse, fill looks functional because it returns the array — but that array is the one you passed in.
Original overwritten
const a = [1, 2];
const b = a.fill(0);
a
[0, 0]
Copy first
const b = [...a].fill(0);
a is untouched
3. end is exclusive
Same convention as slice. fill(0, 1, 2) writes only index 1 — the slot at index 2 is untouched.
One slot only
[1, 2, 3].fill(0, 1, 2)
[1, 0, 3]
Go one further
[1, 2, 3].fill(0, 1, 3)
[1, 0, 0]

When to use

Use it
  • Turning new Array(n) into a dense, usable array
  • Resetting an existing array in place
  • Initialising a numeric buffer to a default
Reach for something else
  • The value is an object or array → Array.from with a factory
  • The array is shared or state → copy first
  • Each slot needs a different value → Array.from with an index callback

Notes

Complexity
O(n) over the filled range
Return
The same array object, mutated — not a copy
CPython impl
V8: Builtins-array-fill.tq
Memory
No allocation; the value is stored by reference
Thread-safe
Single-threaded; mutating a shared array is the hazard here

FAQ

Because fill stores one reference in every slot. new Array(3).fill([]) creates a single array and points all three slots at it. Use Array.from with a factory function, which runs once per slot.

Array.from({length: 3}, () => []);

History

ES2015
fill added alongside find, findIndex and copyWithin.