Latest Code Tutorials

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.


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



Javascript Array Fill Example | Array.prototype.fill()

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



Array fill() method in Javascript

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



JS Array Fill() Method

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



Array.prototype.fill() Polyfill

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



JS Fill() Method Syntax

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;

      // Step 13.
      return O;

Finally, the Javascript array fill() example is over.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.