JavaScript: Fill & From Methods (Home Alone Edition) | Janifer

In this post, I’ll be discussing the Fill and From methods in JavaScript programming, using the Feynman Technique and the classic John Hughes holiday movie, “Home Alone”.

This is part of the Feynman Technique/20 hr Method challenge. For more information, click here.

Fill Us In On The From and Fill Methods

In JavaScript, we can create arrays, a group of items we call elements, without giving details on the entire list at first sight. Sometimes we’ll add all the details later, but if we have information like how long the list will be and what we need to name it, the from and fill methods can start us off.

How Would The Fill Method Work?

Let’s use the movie “Home Alone”. In it, we meet thieves Harry and Marv who are scouting for empty houses to break into during the Christmas holiday. There are six homes in the neighborhood they’ve scouted. To ensure there are no residents in the house, we can use the following array:

const emptyHouseList = new Array(6);

This will produce an array called “emptyHouseList” with six empty elements, relevant to the empty houses in the neighborhood, but soon they discover that house three, the McCallister’s isn’t empty, so they need to note that before they move on. This is how they would use the fill method to do it.

emptyHouseList.fill(1, 2, 3);
console.log(emptyHouseList);

This is what the code is saying on how to fill the emptyHouseList:

1 person occupying the house.
The house is located after the 2nd house on the list.
There are no other changes to the list after the third house.

(6) [empty × 2, 1, empty × 3]

This is the return.

two empty houses
house 3 has one person
three empty houses after

If Harry and Marv figured out both the McCallister’s and his neighbor Old Man Marley’s house was also occupied, say his is house #4, then the code would look like this instead:

emptyHouseList.fill(1, 2, 4);
console.log(emptyHouseList);

This would mean that:

1 person occupying the houses
the houses are located after the 2nd house on the list
and there are no other changes after the fourth house, which means
house 3 and 4 have one person each.

This is what it comes back with:

(6) [empty × 2, 1, 1, empty × 2]

Six houses in total:

The first two houses are empty
third and fourth houses have one person each
and the last two are also empty.

So You’re Saying About the “Fill” Method Is…

What the fill method ultimately does is replace whatever information was in the positions you dictate within that list. The first position is what the new value will be, the second is where we start from, and the last is where the end the changes.

What About The From Method?

As we know from the film, Kevin gets left behind, but how did this happen? With eleven kids, it’s pretty damn hard to keep up. One of the kids is given the responsibility of counting the heads of all the kids before they board the service van to the airport. This is how she uses the from method to make this happen:

const kidsChecklist = Array.from({ length: 11 }, () => 0);
console.log(kidsChecklist);

This will produce an array called “kidsChecklist” and says to create a list 11 items long, all the values will be “0”. We can either dictate how long the array can be literally or pull references like “querySelectorAll” which will check the HTML file it’s connected to and find whatever value we choose to be counted. We can also use the information that’s pulled as elements inside of the array.

For our purposes and to make this as straight forward as possible, we will use the from method to create this mock checklist and we get:

(11) [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

…which is what we wanted.

As she starts counting, she uses the fill method to start checking off heads and the first person she counts out is herself:

kidsChecklist.fill(1, 0, 1);
console.log(kidsChecklist);

(11) [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

Ok, so far so good.

Then she counts four more:

kidsChecklist.fill(1, 1, 5);
console.log(kidsChecklist);

(11) [1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0]

Looking good. We now have five kids down, so we have six more to go, and she finds three more and adds them to the total…

kidsChecklist.fill(1, 5, 8);
console.log(kidsChecklist);

(11) [1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0]

Now, she sees she has three kids left and finds them, and adds them to the list.

kidsChecklist.fill(1, 8, 11);
console.log(kidsChecklist);

(11) [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

And we finally have eleven heads counted, all in the van, even if one was just a nosy neighbor’s kid who hopped off as everyone was getting in. Too bad she only counted their heads and not their faces, otherwise she’d realize she was short Kevin.

Either way, we know Kevin can handle himself.

For more information on the From and Fill Methods in JavaScript, check out the links below:

Thanks for reading!