Array.prototype.fill()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

The fill() method of Array instances changes all elements within a range of indices in an array to a static value. It returns the modified array.

Try it

const array = [1, 2, 3, 4];

// Fill with 0 from position 2 until position 4
console.log(array.fill(0, 2, 4));
// Expected output: Array [1, 2, 0, 0]

// Fill with 5 from position 1
console.log(array.fill(5, 1));
// Expected output: Array [1, 5, 5, 5]

console.log(array.fill(6));
// Expected output: Array [6, 6, 6, 6]

Syntax

js
fill(value)
fill(value, start)
fill(value, start, end)

Parameters

value

Value to fill the array with. Note all elements in the array will be this exact value: if value is an object, each slot in the array will reference that object.

start Optional

Zero-based index at which to start filling, converted to an integer.

  • Negative index counts back from the end of the array — if -array.length <= start < 0, start + array.length is used.
  • If start < -array.length or start is omitted, 0 is used.
  • If start >= array.length, no index is filled.
end Optional

Zero-based index at which to end filling, converted to an integer. fill() fills up to but not including end.

  • Negative index counts back from the end of the array — if -array.length <= end < 0, end + array.length is used.
  • If end < -array.length, 0 is used.
  • If end >= array.length or end is omitted or undefined, array.length is used, causing all indices until the end to be filled.
  • If end implies a position before or at the position that start implies, nothing is filled.

Return value

The modified array, filled with value.

Description

The fill() method is a mutating method. It does not alter the length of this, but it will change the content of this.

The fill() method fills empty slots in sparse arrays with value as well.

The fill() method is generic. It only expects the this value to have a length property. Although strings are also array-like, this method is not suitable to be applied on them, as strings are immutable.

Note: Using Array.prototype.fill() on an empty array (length = 0) would not modify it as the array has nothing to be modified. To use Array.prototype.fill() when declaring an array, make sure the array has non-zero length. See example.

Examples

Using fill()

js
console.log([1, 2, 3].fill(4)); // [4, 4, 4]
console.log([1, 2, 3].fill(4, 1)); // [1, 4, 4]
console.log([1, 2, 3].fill(4, 1, 2)); // [1, 4, 3]
console.log([1, 2, 3].fill(4, 1, 1)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, 3, 3)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, -3, -2)); // [4, 2, 3]
console.log([1, 2, 3].fill(4, NaN, NaN)); // [1, 2, 3]
console.log([1, 2, 3].fill(4, 3, 5)); // [1, 2, 3]
console.log(Array(3).fill(4)); // [4, 4, 4]

// A single object, referenced by each slot of the array:
const arr = Array(3).fill({}); // [{}, {}, {}]
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

Using fill() to create a matrix of all 1

This example shows how to create a matrix of all 1, like the ones() function of Octave or MATLAB.

js
const arr = new Array(3);
for (let i = 0; i < arr.length; i++) {
  arr[i] = new Array(4).fill(1); // Creating an array of size 4 and filled of 1
}
arr[0][0] = 10;
console.log(arr[0][0]); // 10
console.log(arr[1][0]); // 1
console.log(arr[2][0]); // 1

Using fill() to populate an empty array

This example shows how to populate an array, setting all elements to a specific value. The end parameter does not have to be specified.

js
const tempGirls = Array(5).fill("girl", 0);

Note that the array was initially a sparse array with no assigned indices. fill() is still able to fill this array.

Calling fill() on non-array objects

The fill() method reads the length property of this and sets the value of each integer-keyed property from start to end.

js
const arrayLike = { length: 2 };
console.log(Array.prototype.fill.call(arrayLike, 1));
// { '0': 1, '1': 1, length: 2 }

Specifications

Specification
ECMAScript® 2027 Language Specification
# sec-array.prototype.fill

Browser compatibility

desktop mobile server
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Bun
Deno
Node.js
fill
Chrome – Full support
Chrome 45 (Release date: 2015-09-01)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 31 (Release date: 2014-07-22)
footnote Full support
Opera – Full support
Opera 32 (Release date: 2015-09-15)
footnote Full support
Safari – Full support
Safari 8 (Release date: 2014-10-16)
footnote Full support
Chrome Android – Full support
Chrome Android 45 (Release date: 2015-09-01)
footnote Full support
Firefox for Android – Full support
Firefox for Android 31 (Release date: 2014-07-22)
footnote Full support
Opera Android – Full support
Opera Android 32 (Release date: 2015-09-23)
footnote Full support
Safari on iOS – Full support
Safari on iOS 8 (Release date: 2014-09-17)
footnote Full support
Samsung Internet – Full support
Samsung Internet 5 (Release date: 2016-12-15)
footnote Full support
WebView Android – Full support
WebView Android 45 (Release date: 2015-09-01)
footnote Full support
WebView on iOS – Full support
WebView on iOS 8 (Release date: 2014-09-17)
footnote Full support
Bun – Full support
Bun 1 (Release date: 2023-09-08)
footnote Full support
Deno – Full support
Deno 1 (Release date: 2020-05-13)
footnote Full support
Node.js – Full support
Node.js 4 (Release date: 2015-09-08)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also