Array.prototype.fill()

The fill() method fills all the elements of an array from a start index to an end index with a static value.

var numbers = [1, 2, 3]
numbers.fill(1);
// results in [1, 1, 1]

Syntax

arr.fill(value)
arr.fill(value, start)
arr.fill(value, start, end)

Parameters

value
Value to fill an array.
start Optional
Start index, defaults to 0.
end Optional
End index, defaults to this.length.

Return value

The modified array.

Description

The elements interval to fill is [start, end).

The fill method takes up to three arguments value, start and end. The start and end arguments are optional with default values of 0 and the length of the this object.

If start is negative, it is treated as length+start where length is the length of the array. If end is negative, it is treated as length+end.

The fill function is intentionally generic, it does not require that its this value be an Array object.

The fill method is a mutable method, it will change this object itself, and return it, not just return a copy of it.

Examples

[1, 2, 3].fill(4);               // [4, 4, 4]
[1, 2, 3].fill(4, 1);            // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
Array(3).fill(4);                // [4, 4, 4]
[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}

Polyfill

if (!Array.prototype.fill) {
  Object.defineProperty(Array.prototype, 'fill', {
    value: function(value) {
      // Steps 1-2.
      if (this == null) {
        throw new TypeError('this is null or not defined');
      }
      var O = Object(this);
      // Steps 3-5.
      var len = O.length >>> 0;
      // Steps 6-7.
      var start = arguments[1];
      var relativeStart = start >> 0;
      // Step 8.
      var k = relativeStart < 0 ?
        Math.max(len + relativeStart, 0) :
        Math.min(relativeStart, len);
      // Steps 9-10.
      var end = arguments[2];
      var relativeEnd = end === undefined ?
        len : end >> 0;
      // Step 11.
      var final = relativeEnd < 0 ?
        Math.max(len + relativeEnd, 0) :
        Math.min(relativeEnd, len);
      // Step 12.
      while (k < final) {
        O[k] = value;
        k++;
      }
      // Step 13.
      return O;
    }
  });
}

If you need to support truly obsolete JavaScript engines that don't support Object.defineProperty, it's best not to polyfill Array.prototype methods at all, as you can't make them non-enumerable.

Specifications

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Array.prototype.fill' in that specification.
Standard Initial definition.
ECMAScript Latest Draft (ECMA-262)
The definition of 'Array.prototype.fill' in that specification.
Draft  

Browser compatibility

Feature Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Basic support 45 [1] 31 (31) (Yes) No support No support 7.1
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support No support (Yes) 31.0 (31) No support No support 8.0

[1] Starting with Chrome 36, this was available behind a preference. In chrome://flags, activate the entry “Enable Experimental JavaScript”.

See also