AppDividend
Latest Code Tutorials

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

0

Javascript Array Fill Example | Array.prototype.fill() Tutorial is today’s leading topic.  The fill() method 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.

If you want to learn more about the latest Javascript tutorials then check out this The Complete Javascript Course 2018.

Javascript Array Fill Example

The fill() method takes up to maximum 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

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

The output is following.

 

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

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

Now, if 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);

 

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

console.log(filledData);

 

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

console.log(filledData);

 

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

console.log(filledData);

 

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;
        k++;
      }

      // Step 13.
      return O;
    }
  });
}

Finally, Javascript Array Fill Example | Array.prototype.fill() Tutorial 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.