JavaScript Array Fill - In 6 Different Ways

In this article, you are going to see how to create and fill an array with the same or a range of values. We will see different approaches to fill an array with values.

JavaScript array fill method is used to fill the array elements with a particular value. It can fill the array with a single value or with a range of values.

Table Of Contents - JavaScript Array Fill

1. Array Fill Method
2. Filling array using Array.map
3. Filling array using Array.from
4. Array Fill Using Loop
5. Other ways to fill array
6. Array Fill with Objects

1. Array fill Method

Suppose you have a task to create an array of a specific length in JavaScript and fill it with 0. How will you do it?

One way is to define an array and then execute a loop that pushes 0 to the array until the length of the array is reached.

let arr = [], len = 5;
for(let i = 0; i < len; i++) {
  arr.push(0);
}
console.log(arr); // [0, 0, 0, 0, 0]

But you can use Array.fill method to directly fill the whole or a part of the array with a particular value.

Note: Array.fill method does not create a new array. It just fills the existing array.

# Syntax

fill(value)
fill(value, start)
fill(value, start, end)

The fill method accepts 3 parameters:

1. value: The value to be filled in the array.
2. start (optional): The start index of the array to fill.
3. end (optional): The end index of the array to fill.

The fill method returns the modified array.

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// fill the array with 0
arr.fill(0);
console.log(arr);

// fill the array with 1 from index 2 to last
arr.fill(1, 4);
console.log(arr);

// fill the array with 2 from index 3 to index 5
arr.fill(2, 6, 9);
console.log(arr);

So if you want to fill the entire array with a value, just pass the value as the first parameter. If you want to fill the full array starting from a certain index then you can pass the value as the first parameter and the start index as the second parameter. If you want to fill a part of the array then you can pass the value as the first parameter, the start index as the second parameter, and the end index as the third parameter.

Filling complete array - Just pass the value as the first parameter.

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// fill the array with 0
arr.fill('🍉');
console.log(arr);

Filling complete array from an index - Pass the value as the first parameter, the start index as the second parameter.

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// fill the array with 0
arr.fill('🍉', 3);
console.log(arr);

Filling array range - Pass the value as the first parameter, the start index as the second parameter, and the end index as the third parameter.

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// fill the array with 0
arr.fill('🍉', 6, 9);
console.log(arr);

2. Filling array using Array.from

The Array.from the method is used to create an array from an array-like object (any object with length property).

Here we can use the Array.from method to fill an array with a particular value.

The Array.from method accepts an array-like object as the first parameter and an optional callback function as the second parameter. for example Array.from(arrayLike, callback).

let arr = Array.from({length: 5}, () => {
  return 0;
});

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

You can also use the index value of the callback function to fill the incrementing numbers in an array.

let arr = Array.from({length: 5}, (elm, index) => {
  return index;
});

console.log(arr); // [0, 1, 2, 3, 4]

3. Filling array using map Method

Behind the scene, the from method use the map method to fill the array. Then can we use the map method to fill the array? Yes, you can.

The map method accepts a callback function as the first parameter. The callback function is called for each element in the array and the element is passed as the first parameter to the callback function. The callback function can return any value.

The map method returns a new array.

let arr = new Array(5);

// trying to fill array with 0
let newArr = arr.map(elm => {
  return 0;
});
console.log(newArr); // empty array of length 5
// unexpected result

The above example results in unexpected output as the whole array is empty. To solve this problem you have to use the spread operator to convert the empty array elements to undefined.

let arr = new Array(5);

// fill array with 0
let newArr = [...arr].map(elm => {
  return 0;
});
console.log(newArr); // empty array of length 5

4. Filling array using loop

Fill array using for loop is really easy and programmatically it is more controlled because you can use the result of some complex expressions to fill the array.

You can predefine array size using let arr = new Array(size).

let arr = new Array(5);
for(let i = 0; i < arr.length; i++) {
  arr[i] = i * i + i;
}
console.log(arr); // [0, 2, 6, 12, 20]

5. Other methods

There are a few other methods that you can directly apply to create and fill an array with values.

The methods are discussed in the example below.

// Method 1:
var arr1 = Array.apply(null, { length: 10 }).map(Number.call, Number);
console.log(arr1);

// Method 2:
var arr2 = [...Array(10).keys()];
console.log(arr2);

6. JavaScript Array Fill Object

You can also use the fill method to fill an array with objects. But it creates the same instance of the object for each array element.

This means if you change or add a property to one of the objects in the array then it will affect all the objects in the array.

let length = 3;
let arr = Array(length).fill({num: 10});
console.log(arr);

// changing one instance changes all
arr[1].num = 25;
console.log(arr);

If you modify one item of the above array then all the items will be affected.

But it is better to fill the array with the copies of objects and not with the same instance. In this case, you can use Array.from method.

The Array.from method creates a new array from an array-like or iterable object.

let length = 3;
let arr = Array.from({length: length}, () => {
  return {num: 10};
});
console.log(arr);

// changing one instance doesn't affect all
arr[1].num = 25;
console.log(arr);

Conclusion

JavaScript provides multiple handy methods to create and fill arrays. We discussed 6 different Javascript array fill methods.

You can come up with your own method to fill an array. But it is better to use one of the methods mentioned above.

In this article, we also looked at how the fill method creates the same instance of the object for each array element.