The fill() method changes all elements in an array to a static value, from a start index (default 0) to an end index (default array.length). It returns the modified array.
Example 1: Filling an entire array
// Example of filling an entire array with a single value
const numbers = [1, 2, 3, 4];
numbers.fill(0);
console.log(numbers); // Output: [0, 0, 0, 0]
Explanation
When fill() is called with a single argument, it replaces every element in the array with that value.
Example 2: Filling part of an array
// Example of filling a portion of an array
const colors = ['red', 'green', 'blue', 'yellow'];
colors.fill('purple', 1, 3); // Fill with 'purple' from index 1 up to (but not including) index 3
console.log(colors); // Output: ['red', 'purple', 'purple', 'yellow']
Explanation
The second and third arguments specify the start and end indices. fill() modifies the elements from the start index up to, but not including, the end index.
Example 3: Using a negative start index
// Example of using a negative start index with fill()
const items = [1, 2, 3, 4, 5];
items.fill(9, -2); // Fill with 9 from the second to last element to the end
console.log(items); // Output: [1, 2, 3, 9, 9]
Explanation
A negative start index is counted from the end of the array. Here, -2 represents the index of the element 4.
Example 4: Creating and filling an array
// Example of creating a new array and filling it
const newArray = new Array(5).fill('hello');
console.log(newArray); // Output: ['hello', 'hello', 'hello', 'hello', 'hello']
Explanation
You can create an array of a specific size using new Array() and then immediately chain fill() to populate it with a default value.
Example 5: Filling with objects (and the reference pitfall)
// Example demonstrating the pitfall of filling with objects
const objectArray = new Array(3).fill({ value: 0 });
objectArray[0].value = 10;
console.log(objectArray);
// Output:
// [
// { value: 10 },
// { value: 10 },
// { value: 10 }
// ]
Explanation
fill() copies the reference to the object, not the object itself. Therefore, all elements in the array point to the same object in memory. Modifying one element affects all of them.
Example 6: Filling with a function's return value
// Example of filling with a value from a function
function getDefaultValue() {
return 'default';
}
const settings = [null, null, null];
settings.fill(getDefaultValue());
console.log(settings); // Output: ['default', 'default', 'default']
Explanation
The getDefaultValue function is called once, and its return value ('default') is used to fill the settings array.
Example 7: Using fill without an end index
// Example of using fill with a start index but no end index
const dataPoints = [10, 20, 30, 40, 50];
dataPoints.fill(0, 2); // Fill with 0 from index 2 to the end
console.log(dataPoints); // Output: [10, 20, 0, 0, 0]
Explanation
If the end index is omitted, fill() will modify all elements from the start index to the end of the array.
Why We Often Prefer Non-Mutating Methods Now
While mutator methods are powerful, modern JavaScript development, especially within frameworks like React and in functional programming, often favors non-mutating alternatives. This preference is rooted in the concept of immutability, which means not changing data structures, but rather creating new ones with the updated data. The primary reasons for this shift are predictability, as immutable data structures prevent unexpected side effects, making code easier to reason about and debug. It also enhances performance in certain frameworks by simplifying the detection of changes, as a change in data results in a new object reference.