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.
- Array Fill Method
- Filling array using Array.map
- Filling array using Array.from
- Array Fill Using Loop
- Other ways to fill array
- Array Fill with Objects
Table Of Contents - JavaScript Array Fill
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:
- value: The value to be filled in the array.
- start (optional): The start index of the array to fill.
- end (optional): The end index of the array to fill.
The fill
method returns the modified array.
Example
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.
Example
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.
Example
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.
Example
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)
.
Example
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.
Example
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.
Example
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
.
Example
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)
.
Example
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.
Example
// 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.
Example
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.
Example
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.