Anatomy of Array.fill()

The fill() method takes three parameters: the value to populate the array, the starting index, and the ending index. The latter two parameters are optional; if they are not provided, the method defaults to a starting index of 0 and an ending index equal to the length of the array.

Default Behavior of Array.fill()

As mentioned earlier, if you do not specify the optional starting and ending indices, fill() will populate the entire array starting from index 0 to the last index with the specified value. Here’s an example:

const arr = [0, 0, 0];

arr.fill(42);

console.log(arr); // [42, 42, 42]

In this example, we initialize an array of three zeroes. Then, we utilize fill() to populate the entire array with the value 42. When we log arr to the console, we can observe that all indices have been filled with 42.

Photo by Kaleidico on Unsplash

Providing a Start Index

Now, let’s explore what occurs when we specify a starting index but leave the ending index out:

const arr = [0, 0, 0];

arr.fill(42, 1);

console.log(arr); // [0, 42, 42]

In this snippet, we again create an array of three zeroes. This time, by providing a starting index of one, we instruct fill() to begin filling the array at index one. The default behavior applies for the ending index, allowing fill() to populate the array from index one to the last index with 42. Upon logging arr, we can see that only indices one and two have been filled, while index 0 remains unchanged.

Providing a Start and End Index

Let’s examine the outcome when both a starting and ending index are specified:

const arr = [0, 0, 0, 0, 0, 0];

arr.fill(42, 2, 4);

console.log(arr); // [0, 0, 42, 42, 0, 0]

In this case, we create an array of six zeroes. By using fill(), we populate the array with 42, starting at index two and stopping at index four. When we log arr, we can see that only indices two and three have been filled with 42; the other indices remain unchanged. It is important to note that the starting index is inclusive, while the ending index is exclusive, meaning the value does not fill the ending index.