JavaScript Array Methods: Array.prototype.fill() Explained

Series Introduction

The JavaScript Array data type currently has 37 methods on it according to the MDN docs and in this series we are going to cover them all one by one explaining each with examples as we work our way down the list.

If you have any questions regarding anything in this series please get in contact with me by using the methods listed at the bottom of this post and if you think I've got something wrong please create a pull request on GitHub to correct the information (link at the bottom of the article).

This is post #8 in the series. If you're interested in reading any of the other posts in this series, there is a up-to-date list at the bottom of this post.

Method #8: Array.prototype.fill()

.fill() allows us to quickly fill either an entire array or a subset of an array with a chosen static value. This is helpful if we need to overwrite an entire array or a portion of an array with a new value. Let's take a look at the syntax for this method before moving on to some examples and getting hands on with this method.

Syntax

1arr.fill(value[, start[, end]])

Parameters

The .fill() method takes in 3 parameters:

1. Required - value: This is the value we want to fill the target array with. It's worth mentioning that all values in the array or in the chosen section of the array will be this replaced with this value.
2. Optional - start: The start index of the section to replace on the target array. Default starts at 0
3. Optional - end: The end index of the section to replace on the target array. (The specified end index is not included in the replacement). Default is array.length

Returned Value

The .fill() method only returns one value and that is the modified version of the array we called the method on. It is worth mentioning that the .fill() method will modify the original array and not create a copy of it. So, if you need the original array intact before using .fill() then store a copy of the original array in a variable and call .fill() on the copied array to ensure the original array is left untouched.

Other Information

• If the start value passed is negative then it will be treated as 'array.length + start';

1[1, 2, 3, 4, 5, 6].fill(2, -4); // === [1,2,3,4,5,6].fill(2,2); => [1,2,2,2,2,2]

• If the end value passed is negative then it will be treated as 'array.length + end';

1[1, 2, 3, 4, 5, 6].fill(2, 0, -3); // === [1,2,3,4,5,6].fill(2,0,3) => [2,2,2,4,5,6]

• .fill() will change the original array and return that, NOT create a copy. (mutator method).
• If the value parameter is passed an object, all slots in the array overwritten will reference this object

Examples

Now, let's have a look at some examples of the .fill() method and some of the other stuff it can do:

1// Replacing all values in an array.
2[1, 2, 3, 4, 5, 6].fill("a"); // ['a','a','a','a','a','a']
3
4// Replacing an array from the a start index to the end of the array
5[1, 2, 3, 4, 5, 6].fill("a", 3); // [1,2,3,'a','a','a']
6
7// Replacing an array between a start and end index
8[1, 2, 3, 4, 5, 6].fill("a", 1, 4); // [1,'a','a','a',5,6]
9
10// Using negative indexes
11[1, 2, 3, 4, 5, 6].fill("a", -4, -1); // [1,2,'a','a','a',6]
12
13// Dealing with undefined and NaN indexes
14[1, 2, 3, 4, 5, 6].fill("a", undefined, undefined); // ['a','a','a','a','a','a',]
15[1, 2, 3, 4, 5, 6].fill("a", NaN, NaN); // [1,2,3,4,5,6]
16
17// Working with objects
18let array = Array(3).fill({}); // [{}, {}, {}]
19array[1].test = "test"; // [{test:test}, {test:test}, {test:test}]
20// This happens because each slot in the array references the original object that was used to fill the array.

Interestingly if you pass false and true in as the start and end values respectively it will replace just the value at index 0 as it will use the binary values of false (0) and true (1):

1[1, 2, 3, 4, 5, 6].fill("a", false, true); // === [1,2,3,4,5,6].fill('a',0,1); => [ "a", 2, 3, 4, 5, 6 ]

Rounding Up.

That's about all there is to the .fill() method, I hope you found this post helpful and if you did then I would greatly appreciate you sharing this article with someone you think may find it helpful. If you have any questions then I would be happy to answer them, just get in contact with me via the links below.

If you're interested in getting more content like this and exclusive content that is no where else then please consider joining my newsletter by using the form below.

Thank you and see you in the next post.

Series links

• #1: Array.from()
• #2: Array.isArray()
• #3: Array.of()
• #4: Array.prototype.concat()
• #5: Array.prototype.copyWithin()
• #6: Array.prototype.entries()
• #7: Array.prototype.every()
• #8: Array.prototype.fill()