Understand Javascript’s fill function() (Tutorial) in 3 minutes
Tags: Tutorial, Javascript Tips, JavaScript, Beginners Guide, Higher Order Function

So you want to learn the fill function!

You haven't gotten a hang of it?

Or it sometimes feels like a lot of code which sometimes makes you want to slam your computer shut and go to bed?...... I know what it feels like.

No need to worry!

I got you!

This article will hit that problem head on and help you understand the concept fully.

So I will see your improved self on the other side.....at the end of the article.

I am Agbejule Kehinde Favour .

SMASH that clap button if you are pumped and ready!

With that said, let's jump right into it!

The fill function()

This is a higher order function that fill a given array with a provided value using the fill function method.

This function gives you a new array of elements.

It is mostly used on arrays of numbers.

So when you use the fill function on the array of numbers, it gives you a new array of numbers.

For instance

Let's say we have an array.

const List1 = [4,7,2,25,9]

And we want to fill it with the value of 0, here is how it would be used.

const Filled = List1.fill(0)

// expected answer is Const Filled =[0,0,0,0,0]

Surprised?

Did you think the answer would be the List1 array with 0 added to it?

Probably like this [4,7,2,25,9,0].

Ok guys!

Let's find out why the correct answer is an array filled with zeros.

Take a look at this code expression.

const fill = array.fill(value, [start,[end ]])

Composition

The fill function() takes in 3 arguments:

$ The value to fill the array with.

$ The start index that is the index in the array you wish to start filling from.

$ The end index that is the index in the array you wish to end the filling at.

The last two arguments are optional.

So you may choose to enter values for the arguments if it is necessary for you to do so.

Back to our expected answer explanation

The reason why the array is filled with zeros is because we didn’t give any value for the start and end arguments.

The default value for the Start argument is 0

And the default value for the end argument is the array.length(The array length)

Scenario 2

If this was the case;

const Filled = List1.fill(0,1)

// the expected answer would be [4,0,0,0,0]

This is because the start index is 1.

Since the computer starts counting from zero, the first item is left out because its index is zero.

The second item's index is 1 so the fill function takes its effect from there and fills the whole array with the value given to fill the array with which in this case is 0.

Scenario 3

Another case scenario is;

const Filled= list1.fill(0,1,3)

// the expected answer would be [4,0,0,25,9]

The behind the scenes logic is pretty much the same with the explanation above but there is one detail added in this scenario.

The end index.

In this case, the end index is 3.

So the fill function takes its effect from the start index which is 1 and ends at the end index which is 3.

Since the end index is 3 , it does not modify the item with the index “3”and the items upwards.

To make this really clear, the explanation above is the reason why 25 and 9 remain unchanged in the modified array.

Conclusion

In a bombshell, the fill function() scans your code, goes behind the scene and iterates through every item in the given array, checking the index, deciding whether to place modifications or not with regards to your code.

With that said, if you gained value from this,

SMASH that clap button to help spread this content to more and more people who need this value.

We would be helping the world together.

Please make sure to follow me if you like this content and if you are looking for more value packed content.

The bottom line is “ are you ready to rock this function in your coding area?”

Drop your comments!

Thank you for your time!

I am Agbejule Kehinde Favour.

And as always, i would see you in the next article

Peace y’all!