JavaScript array fill: Array.prototype.fill, start/end, typed arrays, Array.from

Array.prototype.fill sets a contiguous range of indices in an existing array (or typed array) to one static value, mutates the array in place, and returns the same reference. The end index is exclusive, and negative start / end count backward from length. When you need a new array or a different value per index, prefer Array.from or map instead of stretching fill past its intent—see also shallow copy patterns when you are cloning versus filling.

Tested on: Node.js v20.18.2. A short note after each snippet describes what you should see in the console.

Quick reference

fill is for one repeated value (or one shared reference) across a range; when each index needs its own value or object, switch to Array.from or map.

fill(value) — fill the whole array fill range

Replace every index with one value.

let arr = [1, 2, 3, 4];
arr.fill(0);
console.log(arr);

You should see one line like: [ 0, 0, 0, 0 ].

fill(value, start, end) — partial range (end not included)

Indices from start up to but not including end are filled.

let arr = [1, 2, 3, 4];
arr.fill(0, 1, 3);
console.log(arr);

You should see one line like: [ 1, 0, 0, 4 ].

Indices 1 and 2 are filled; index 3 is left alone because end is exclusive.

let arr = [1, 2, 3, 4];
arr.fill(undefined);
console.log(arr);

You should see one line like: [ undefined, undefined, undefined, undefined ].

Negative end (counts from the end)

Here end = -1 means stop before the last element, so the last 5 stays.

console.log([1, 2, 3, 4, 5].fill(0, 1, -1));

You should see one line like: [ 1, 0, 0, 0, 5 ].

Same reference when value is an object

fill stores the same reference in every index—mutating one slot affects all slots that share that object.

const o = {};
const a = new Array(3).fill(o);
o.x = 1;
console.log(a[0] === a[1], a);

You should see one line like: true [ { x: 1 }, { x: 1 }, { x: 1 } ].

For distinct objects per slot, use something like Array.from({ length: 3 }, () => ({})) instead of fill({}).

new Array(n).fill(value) — common array fill javascript bootstrap

console.log(new Array(4).fill(0));

You should see one line like: [ 0, 0, 0, 0 ].

An array with length === 0 has nothing for fill to touch; give it a non-zero length first (as here).

Sparse arrays: fill still writes holes

const sp = [1, , 3];
sp.fill(9);
console.log(sp);

You should see one line like: [ 9, 9, 9 ].

Typed arrays (Uint8Array, etc.)

Values are coerced to the element type (for example Uint8Array clamps to 0–255).

let arr = new Uint8Array(4);
arr.fill(255);
console.log(arr);

You should see one line like: Uint8Array(4) [ 255, 255, 255, 255 ].

let arr = new Uint8Array([2, 2, 3, 43, 5]);
arr.fill(255, 1, 3);
console.log(arr);

You should see one line like: Uint8Array(5) [ 2, 255, 255, 43, 5 ].

push in a loop — new array without fill

Useful when building a list from scratch (see also append to an array in JavaScript):

function filler(value, len) {
  const array = [];
  for (let i = 0; i < len; i++) {
    array.push(value);
  }
  return array;
}
console.log(filler("wow", 4));

You should see one line like: [ 'wow', 'wow', 'wow', 'wow' ].

Array.from — fill array javascript with a per-index callback

The second argument maps each new index; use () => ({}) when each cell must be its own object.

let arr = Array.from({ length: 7 }, () => "wow");
console.log(arr);

You should see 6 lines of output, starting with [ and ending with ].

Generic array-like objects

fill is generic: it uses this.length and integer keys. For plain objects:

const al = { length: 3, 0: "a" };
Array.prototype.fill.call(al, 1);
console.log(al);

You should see one line like: { '0': 1, '1': 1, '2': 1, length: 3 }.

Do not use fill on strings; they are immutable (MDN).

Summary

fill mutates and returns the same reference; end is exclusive like slice. Filling with {} shares one object—use Array.from when each slot needs its own instance.

• fill mutates in place, returns the same array, and treats end like slice (exclusive).
• Filling with an object repeats one reference; use Array.from for distinct objects per index.
• Typed arrays follow the same signature with element-type coercion.
• Prefer Array.from or map when each index needs its own computed value.

References

MDN references for in-place fill, Array.from, and push.

• MDN: Array.prototype.fill()
• MDN: Array.from()
• MDN: Array.prototype.push()