JavaScript fill method
last modified April 4, 2025
In this article we show how to fill arrays using the fill method
in JavaScript.
Array filling
The fill method changes all elements in an array to a static value.
It modifies the original array and returns the modified array. The method can
take up to three arguments: value, start index, and end index.
This method is useful when you need to initialize an array with default values
or reset existing array values. The fill method works with both
empty and populated arrays. It can fill the entire array or just a portion.
The fill method is a mutating method that changes the array's
contents. Unlike some array methods, it does not create a new array. The
original array is modified directly by this operation.
Basic fill example
The following example demonstrates the basic usage of the fill
method.
const arr = [1, 2, 3, 4, 5]; arr.fill(0); console.log(arr);
We create an array and fill all its elements with the value 0. The original
array is modified. The fill method returns the modified array but
we don't need to capture it since the original array is changed.
$ node main.js [ 0, 0, 0, 0, 0 ]
Filling with start index
The fill method can take a start index to begin filling from.
const fruits = ['apple', 'banana', 'cherry', 'date'];
fruits.fill('orange', 2);
console.log(fruits);
We fill the array starting from index 2. Elements before index 2 remain unchanged. The fill operation continues to the end of the array when no end index is specified.
$ node main.js [ 'apple', 'banana', 'orange', 'orange' ]
Filling with start and end index
The fill method can take both start and end indexes to fill a specific range.
const numbers = [1, 2, 3, 4, 5, 6]; numbers.fill(9, 1, 4); console.log(numbers);
We fill the array with value 9 from index 1 up to but not including index 4. The end index is exclusive. The original array is modified with the new values in the specified range.
$ node main.js [ 1, 9, 9, 9, 5, 6 ]
Filling an empty array
The fill method can be used with empty arrays created with a
specific length.
const emptyArray = new Array(5);
emptyArray.fill('default');
console.log(emptyArray);
We create an empty array of length 5 and fill all elements with 'default'.
This is a common pattern for initializing arrays with default values. The
fill method works on sparse arrays created with the Array
constructor.
$ node main.js [ 'default', 'default', 'default', 'default', 'default' ]
Filling with objects
When filling arrays with objects, all elements reference the same object.
const objArray = new Array(3).fill({ value: 0 });
objArray[0].value = 5;
console.log(objArray);
We create an array filled with objects. Changing one object's property affects
all elements because they reference the same object. For independent objects,
use Array.from with a mapping function instead.
$ node main.js
[ { value: 5 }, { value: 5 }, { value: 5 } ]
Source
Array fill - language reference
In this article we have demonstrated how to use the fill() method to modify arrays in JavaScript.