Table of contents

JavaScript Array.fill() Method

The JavaScript Array.fill() method is used to fill all or part of an array with a static value. You can specify the value to be filled and optionally define the start and end indexes where the filling should occur. This method modifies the original array in place and does not return a new array.

For example, array.fill(value) will fill the entire array with the given value. You can also fill a specific range of the array by providing start and end indexes.

Syntax

The syntax for the Array.fill() method is given below:

plaintext
array.fill(value, start, end)

Parameters

The Array.fill() method accepts three parameters:

  • value (Required): The static value with which the array will be filled. This value can be a number, string, object, or any other data type.
  • start (Optional): The index at which to begin filling the array. If not specified, it defaults to 0. If negative, it will be counted from the end of the array.
  • end (Optional): The index at which to stop filling the array (exclusive). If not specified, it defaults to the array’s length. If negative, it will be counted from the end of the array.

Return Value

The modified array with the specified range filled with the provided value. The original array is modified in place.

Examples of JavaScript Array.fill() Method

Example 1: Filling the Entire Array

You can use the fill() method to fill all elements of an array with a specific value.

javascript
const arr = [1, 2, 3, 4];
arr.fill(0);
console.log(arr);  // Output: [0, 0, 0, 0]

Explanation: In this example, the fill() method fills all elements of the array arr with the value 0, modifying the original array.

Example 2: Filling Array Elements from a Specific Start Index

You can fill only a portion of the array by specifying a start index.

javascript
const arr = [1, 2, 3, 4, 5];
arr.fill(9, 2);
console.log(arr);  // Output: [1, 2, 9, 9, 9]

Explanation: The fill() method starts filling the array from index 2 with the value 9. The first two elements remain unchanged, while the rest are filled with 9.

Example 3: Filling Array Elements Between Start and End Indexes

You can define both start and end indexes to control where the filling occurs in the array.

javascript
const arr = [10, 20, 30, 40, 50];
arr.fill(7, 1, 3);
console.log(arr);  // Output: [10, 7, 7, 40, 50]

Explanation: In this example, the fill() method fills the array from index 1 to 3 (exclusive) with the value 7. The elements between index 1 and 2 are modified, while the rest remain the same.

Example 4: Using Negative Start and End Indexes

You can use negative values for the start and end parameters, which will be counted from the end of the array.

javascript
const arr = [5, 10, 15, 20, 25];
arr.fill(100, -3, -1);
console.log(arr);  // Output: [5, 10, 100, 100, 25]

Explanation: The fill() method starts from the third-to-last element (index -3) and fills up to the second-to-last element (index -1). The values at indexes 2 and 3 are replaced with 100.

Example 5: Filling an Empty Array

You can fill a pre-allocated empty array using the fill() method.

javascript
const arr = new Array(5).fill(42);
console.log(arr);  // Output: [42, 42, 42, 42, 42]

Explanation: In this example, a new array of length 5 is created using the Array() constructor. The fill() method fills all five elements of the array with the value 42.

JavaScript

Related Articles