JavaScript dives - Fill your arrays

In this blog post, I wanted to talk about a specific method, which can be used with Arrays. This method is having really specific use cases.

I’ll be honest with you, I didn’t have a chance to use it before. I didn’t have to, even in my personal projects. Let’s jump straightaway into it.

1. Array.fill()

1.1 What does it do?

The main purpose of the method is to fill the array with static values from the provided start index to the end index.

1.2 Syntax and parameters

 Array(1).fill(value, startIndex, endIndex);

Now, let me explain the syntax. As you can see above, the first parameter is a static value that will be used to fill your array with. The second parameter allows you to specify, the first place in your array, where the value is going to be applied to.

Remember, that if the startIndex parameter wasn’t specified, it will use 0 as a default value. The third parameter and the last one, allows you to provide the place in an array, where the applied value will end. If not specified, it applies your array length as a default value, which means applying until the very end.

1.3 Use cases and syntax usage

In JavaScript we’re having a solution that allows us to allocate some space in the memory for the specific number of items in the array, which means initialize a collection with elements inside, tells the memory – okay, I want that many indexes and I want you to book the memory for this number of items.

We are allocating the memory for twelve indexes in an array for the further use.

const array = Array(12);

What is going to be the result of the above declaration? Yeah, we’re going to have twelve boxes in the memory, containing a value of undefined. Make sense, because we didn’t declare anything as a value of each one.

Now, to don’t have 12 empty fields in our array, let’s fill it with values.

Array(12).fill(0); // [0, 0, 0, 0, 0 ....];

Above code, illustrates how to fill all of our 12 empty fields with zeros. Wait, can we fill it with just one number and that’s it?

Nah, don’t worry about it, you can do whatever you want with it. I’m going to show you a couple of examples and also, I’m going to bring to it Typed Arrays in JS. Why would I do it? Because, you can actually use fill() method on Typed Arrays, which is really cool.

This example is going to show you, how to fill the array with the sequence of numbers, from the start to the end.

   function fillSequence(start, end) { 
      return Array(start – end + 1).fill().map((item, index) => item + index); 
   } 
 
   fillSequence(15, 60); // [15...60];

There is also a different solution, the shorter one to achieve the above result.

   const fillSequence = (start, end) => [...Array(end – start + 1)].map((item, index) => item + index); 

   fillSequence(15, 60); // [15 … 60]

Great, so we’ve got it covered. Those two examples, show what you can use the fill() method for. There are many other usage examples – definitely. But I have shown you those ones because I felt that you might find it cool as I did.

Well, that’s not the end. I said above that I’m going to show you fill() method with typed arrays, let’s do it.

What typed arrays are? I’m not going to explain it here because it needs a separate blog post. I’m posting the link, where you can read more about it:

MDN - Typed arrays

Usage of fill() on typed arrays:

  const typedArray = new Uint8Array([0, 0, 0, 0]);  
  const typedArray2  = new Uint8Array(16); 
 
  typedArray.fill(16); // [16, 16, 16, 16];  
  typedArray2.fill(10); // [10] x 16; 

That would be it about Array.fill() method, I hope it gave you sort of understanding of what it is and how to use it.

If you've got any other ideas on how to implement Array.fill() method, let me know in the comments down below. Thanks for reading.