Javascript Array Fill Example | JS Array fill() Method

Javascript array fill() is an inbuilt method that fills all the items of an array from the start index to an end index with a static or provided value. The end index is not included.

The fill() method fills all the items in the array with the static value. We can also specify the index for starting and ending fill(). By default, it changes the whole array. That means if we do not provide the start and end index then it will replace all the values with the provided values.

So if we provide the value lets say four, then all the elements of an array become four.

Javascript Array Fill Example

Javascript array fill() method takes up to a maximum of three arguments which are value, start, and end. The start and end arguments are optional. They have default values of 0 and the length of this object. Those start and end values are indexes of an array.

The fill() method is a mutable method that means it modifies the array and not returning a new array like concat() method. It will change this object itself, and return it and not just return a copy of it.

When fill()  gets passed an object, it will copy the reference and fill the array with references to that object.

Syntax of Array fill() method

array.fill(value, start, end)

Parameter Values

Now, let us take an example. Create a project folder and inside that create one file called app.js and add the following code inside it.

// app.js

let filledData = [1, 2, 3].fill(4, 0 ,1);

console.log(filledData);

Output

So that means, it has replaced the value of 0 indexes with the 4 value.

Now, if you do not provide the start and end index then it will replace the whole array with the provided value.

// app.js

let filledData = [1, 2, 3].fill(4);

console.log(filledData);

Output

The Javascript Array fill() method’s only first argument is required. Both the other arguments are optional.

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

// app.js

let filledData = [1, 2, 3].fill(4, -3, -2);

console.log(filledData);

Output

If the start is greater than the length of an array, then it will not modify any value.

// app.js

let filledData = [1, 2, 3].fill(4, 3, 5);

console.log(filledData);

Output

If the start and end number is not a number or NaN, then it will not modify the array.

// app.js

let filledData = [1, 2, 3].fill(4, NaN, NaN);

console.log(filledData);

Output

Array.prototype.fill() Polyfill

If the fill() method is not supported by the browsers, then you can write the following code to add in your code and make it work.

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;
    }
  });
}

Finally, Javascript array fill() example is over.