JavaScript Array fill() Method

Posted in JavaScript Tutorial

Updated on Nov 20, 2024

By Mari Selvan

👁️ 72 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

JavaScript arrays are a cornerstone of data manipulation, and the fill() method provides a convenient way to initialize or update array elements with a specified value.

In this comprehensive guide, we'll explore the syntax, usage, best practices, and practical applications of the fill() method.

🧠 Understanding fill() Method

The fill() method changes all elements in an array to a specified value, from a start index (defaulting to 0) to an end index (defaulting to the array length). This method is particularly useful for quickly populating an array with a default value or updating specific portions of an array with a new value.

💡 Syntax

The syntax for the fill() method is straightforward:

syntax.js

Copied

array.fill(value, start, end);

array: The array to be filled.
value: The value to fill the array with.
start (Optional): The index to start filling the array. Defaults to 0.
end (Optional): The index to stop filling the array. Defaults to array length.

📝 Example

Let's dive into a practical example to illustrate the usage of the fill() method:

example.js

Copied

// Create an array with five elements
let numbers = [1, 2, 3, 4, 5];

// Use fill() to replace elements from index 1 to 3 with 10
numbers.fill(10, 1, 4);

console.log(numbers);  // Output: [1, 10, 10, 10, 5]

In this example, the fill() method is employed to replace elements from index 1 to 3 with the value 10.

🏆 Best Practices

When working with the fill() method, consider the following best practices:

Immutable Approach:

If you want to create a new array with the filled values without modifying the original array, use the spread operator or Array.from().
example.js
Copied
```
const originalArray = [1, 2, 3, 4, 5];
const newArray = [...originalArray].fill(10, 1, 4);
console.log(newArray);  // Output: [1, 10, 10, 10, 5]
```
Understanding the End Index:

Be mindful of the end index when using fill(). The end index is not inclusive, so the value at the end index itself will not be replaced.
example.js
Copied
```
const arrayToFill = [1, 2, 3, 4, 5];
arrayToFill.fill(0, 2, 4);
console.log(arrayToFill);  // Output: [1, 2, 0, 0, 5]
```
Performance Considerations:

For very large arrays, the fill() method can be more efficient than manual looping for initialization.

📚 Use Cases

Initializing an Array with Default Values:

The fill() method is excellent for initializing an array with default values, especially when dealing with large arrays.
example.js
Copied
```
const largeArray = new Array(1000).fill(0);
```
Resetting Elements to a Default Value:

Resetting elements to a default value is a common use case, and the fill() method simplifies this task.
example.js
Copied
```
let flags = new Array(8).fill(false);
// Update specific flags
flags.fill(true, 2, 5);
```