Javascript Array Fill: How to fill Array Values in JS

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()

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 the 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

array.fill(value, start, end)

Parameter Values

Parameter	Description
value	Required parameter. The value to fill the array.
start	Optional parameter. The index to start filling the array (default index is 0)
end	Optional parameter. The index to stop filling the array (default is array.length)

 

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, the Javascript array fill() example is over.