JavaScript Array fill() Method
JavaScript Array.fill() is a very simple method added in ES6. It returns a modified array by filling all elements of an array with a specified value.
The fill() method allows us to fill all elements of an array with a static value from a start index (default 0) to an end index (default array.length, not included).
It modifies the original array and returns undefined, if no element satisfies the condition.
JavaScript Array fill() Method Syntax
The general syntax to use fill() method is as:
array.fill(value);
array.fill(value, start);
array.fill(value, start, end);
In the above syntax, array represents the name of calling array. This method has three parameters: value, start, and end.
The value is the element to fill in the array with.
start is the index value from where to start filling and end is the end index (not included). Both start and end parameters are optional.
The default value for start and end indices are 0 and length of an array (array.length – 1), respectively.
If start or end index is negative, JavaScript fills the element value starting from the end of the array.
We calculate it as start + length and end + length, respectively, to produce the meaningful indices. Normally, we use it for reversing the indexing of arrays and operating on them.
Array.fill() Method Example
If we pass only value as an argument with no index, JavaScript fills the entire array with the element value. For example,
let colors = ["Green", "Yellow", "Blue", "Brown"];
colors.fill("Red"); // returns ["Red", "Red", "Red", "Red"]
If we pass the element value along with start index, the filling of an array begins from the specified index, and goes till the end of the array. For example,
let numerals = [10, 20, 30, 40];
numerals.fill(50, 2); // returns [10, 20, 50, 50]
If we pass the element value along with both start and end indexes, JavaScript fills the array with value between the indexes. For example,
let numerals = [1, 2, 3, 4, 5];
numerals.fill(9, 3, 4); // returns [1, 2, 3, 9, 5 ]
Array fill() Method Example Program
Let’s take various example programs based on using of the fill() method of Array object.
Example 1:
<script>
let fruits = ["Apple", "Banana", "Orange", "Guava"];
// This statement fills the entire array with Mango.
fruitsNewArray = fruits.fill("Mango");
document.write(fruitsNewArray, "<br>");
document.write(fruits);
</script>
Output:
Mango,Mango,Mango,Mango
Mango,Mango,Mango,Mango
In this example, we have used the fill() method to fill every element of the fruits array with “Mango”. We have passed “Mango” as an argument in the method and then assigned the return value to the fruitsNewArray.
As the fill() is a mutator method, fruits.fill(“Mango”) modifies the original array and hence, both fruits and fruitsNewArray hold the same element value.
Example 2:
<script>
let nums = [10, 20, 30, 40, 50];
// This statement fills all indices >=3 with 80.
new_array = nums.fill(80, 3);
document.write(new_array, "<br>");
document.write(nums);
</script>
Output:
10,20,30,80,80
10,20,30,80,80
In this example, we have filled an array with element 80 from index 3 up to the end of the array. We have passed element value 80 and start index 3 to the method and assigned the return value to the variable new_array.
Example 3:
<script>
let laptops = ["Lenovo", "Dell", "Acer", "Asus"];
// This statement fills all indices >=1 and <3 (positions from 1 to 2) with HP.
laptops.fill("HP", 1, 3);
document.write(laptops, "<br>");
document.write(laptops);
</script>
Output:
Lenovo,HP,HP,Asus
Lenovo,HP,HP,Asus
In this example, we have used the fill() method to fill “HP” in laptops from position 1 to 3 (excluding 3). Therefore, the method just replaces the element of laptops[1] and laptops[2] with “HP”.
fill() Method with Negative Index
Let’s create a JavaScript program in which we will pass negative index value to the fill() method. JavaScript will calculate the meaningful indexes as start + length and end + length, respectively.
Example 4:
<script>
let languages = ["Java", "R", "Go", "Python", "C++"];
// This statement fills indexes from 2 to 4 (excluding).
new_array = languages.fill("JavaScript", -3, -1); // calculated start: 5 - 3 = 2 and end: 5 - 1 = 4.
document.write(new_array);
</script>
Output:
Java,R,JavaScript,JavaScript,C++
fill() Method with Invalid Indexes
Let’s create a JavaScript program in which we will pass invalid index value to the start and end indices in the fill() method. As a result, there will be no change in the original array.
Example 5:
<script>
var animals = ["Dog", "Cat", "Horse", "Cow"];
// Passing invalid index value results in no change in the original array.
animals.fill("Lion", 5, 7);
document.write(animals, "<br>");
// Passing invalid index values.
animals.fill("Tiger", NaN, NaN);
document.write(animals);
</script>
Output:
Dog,Cat,Horse,Cow
Dog,Cat,Horse,Cow
In the above example, 5, 7, and NaN are invalid indices. If we pass an index value greater than the size of the array as start and end, the fill() method returns the array with no change.
Try It Yourself
Example 6:
<script>
var arr = [10, 20, 30, 40];
arr.fill(50);
document.write(arr, "<br>");
arr.fill(60, 2);
document.write(arr, "<br>");
arr.fill(70, 1, 3);
document.write(arr);
</script>
In this tutorial, we have discussed JavaScript array fill() method in introduced in ES6 with several example programs. Hope that you will have understood the basic concept of fill() method and practiced all programs.
Thanks for reading!!!
