The fill() method fills all the elements of an array from a start index to an end index with a static value. It modifies the original array and returns it. This method is useful for scenarios where you want to initialize an array with a specific value or reset its contents.

Syntax

array.fill(value[, start[, end]])

Parameters

• value (Required): The value with which to fill the array elements.
• start (Optional): The starting index to begin filling the array. If not specified, filling starts from index 0.
• end (Optional): The ending index where filling stops (exclusive). If not specified, filling goes up to the end of the array.

Return Value

The fill() method returns the modified array after filling the specified range with the given value.

Example 1: Basic Usage

const arr = [1, 2, 3, 4, 5];
arr.fill(0);

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

Explanation:

• The fill() method fills all elements of the array arr with 0.
• Since no start or end index is specified, the entire array is filled.

Example 2: Filling a Portion of an Array

const arr = [1, 2, 3, 4, 5];
arr.fill(0, 1, 4);

console.log(arr); // Output: [1, 0, 0, 0, 5]

Explanation:

• The fill() method fills the array from index 1 to 4 (exclusive) with 0.
• The result is [1, 0, 0, 0, 5], where indices 1 to 3 are filled with 0, and the rest remain unchanged.

Example 3: Using fill() with Strings

const arr = ['a', 'b', 'c', 'd'];
arr.fill('x', 2);

console.log(arr); // Output: ['a', 'b', 'x', 'x']

Explanation:

• The fill() method fills the array starting from index 2 to the end with the string 'x'.
• The result is ['a', 'b', 'x', 'x'].

Example 4: Negative Indices

const arr = [1, 2, 3, 4, 5];
arr.fill(0, -4, -1);

console.log(arr); // Output: [1, 0, 0, 0, 5]

Explanation:

• Negative indices count from the end of the array. Here, -4 refers to index 1 (the second element from the end) and -1 refers to index 4.
• The method fills from index 1 to 4 with 0, resulting in [1, 0, 0, 0, 5].

Example 5: Filling Arrays with Objects

const arr = [{}, {}, {}];
const obj = { name: 'John' };
arr.fill(obj);

console.log(arr); // Output: [{ name: 'John' }, { name: 'John' }, { name: 'John' }]

Explanation:

• The fill() method fills the array with the same object reference.
• All elements in the array are set to reference the same object, so changes to one element will affect all.

Example 6: Initializing Arrays

const arr = new Array(5).fill(1);

console.log(arr); // Output: [1, 1, 1, 1, 1]

Explanation:

• The new Array(5) creates an array of length 5 with empty slots.
• The fill(1) method fills all slots with 1, initializing the array.

Example 7: Resetting Arrays

const arr = [1, 2, 3, 4, 5];
arr.fill(null);

console.log(arr); // Output: [null, null, null, null, null]

Explanation:

• The fill(null) method sets all elements of the array to null, effectively resetting its contents.

Example 8: Using fill() with Multidimensional Arrays

const arr = Array(3).fill().map(() => Array(3).fill(0));

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

Explanation:

• The first fill() creates an array with 3 elements.
• The map() function creates a new array with each element being another array filled with 0.