JavaScript .fill()

JavaScript’s array.fill() method changes all elements within a range of indices in an array to a static value. It modifies the original array and returns the modified array, making it a mutating method that provides an efficient way to populate array elements with the same value.

Syntax

array.fill(value, start, end)

Parameters:

• value: The value to fill the array elements with. All elements in the specified range will be set to this exact value.
• start (optional): The zero-based index at which to start filling. If negative, it is treated as array.length + start. Defaults to 0.
• end (optional): The zero-based index at which to end filling (exclusive). If negative, it is treated as array.length + end. Defaults to array.length.

Return value:

The .fill() method returns the modified array with elements filled according to the specified parameters.

Example 1: Basic Array Filling Using array.fill()

This example demonstrates the fundamental usage of the .fill() method by replacing all elements in an array with a single value:

// Create an array with different values
const numbers = [1, 2, 3, 4, 5];

// Fill all elements with the value 0
numbers.fill(0);

console.log(numbers);

Copy to clipboard
Copy to clipboard

The output of this code is:

[0, 0, 0, 0, 0]

Copy to clipboard
Copy to clipboard

The .fill() method replaces every element in the array with the specified value, transforming the original array [1, 2, 3, 4, 5] into [0, 0, 0, 0, 0].

Example 2: Creating Default User Profiles Using array.fill()

This example shows how .fill() can be used in a real-world scenario to initialize an array of user profile objects with default values:

// Create an array to hold 3 user profiles
const userProfiles = new Array(3);

// Fill with default user profile objects
userProfiles.fill({
  name: 'New User',
  email: '[email protected]',
  status: 'inactive',
});

// Update one user's information
userProfiles[0].name = 'John Doe';
userProfiles[0].email = '[email protected]';

console.log(userProfiles);

Copy to clipboard
Copy to clipboard

The output of this code is:

[
  { name: 'John Doe', email: '[email protected]', status: 'inactive' },
  { name: 'John Doe', email: '[email protected]', status: 'inactive' },
  { name: 'John Doe', email: '[email protected]', status: 'inactive' }
]

Copy to clipboard
Copy to clipboard

When using objects with .fill(), all array elements reference the same object. Modifying one element affects all elements because they share the same reference.

Codebyte Example: Using array.fill() to Initialize Game Board Sections

This example demonstrates using .fill() with start and end parameters to initialize specific sections of a game board array:

Visit us
Visit us
Hide code
Code
Output
Hide output
Loading...
Copy to your clipboard
Copy Codebyte
Run

By specifying start and end indices, the .fill() method allows precise control over which elements to modify, making it ideal for initializing specific ranges within larger data structures.

Frequently Asked Questions

1. How to fill an array in JS?

Use the .fill() method on an existing array: array.fill(value). For new arrays, create them first with new Array(length) or Array(length), then apply .fill(): new Array(5).fill('default').

2. How to fill array with unique values in JavaScript?

The .fill() method creates identical values, not unique ones. For unique values, use Array.from() with a mapping function: Array.from({length: 5}, (_, index) => index + 1) creates [1, 2, 3, 4, 5].

3. Does .fill() change the original array?

Yes, .fill() is a mutating method that modifies the original array directly. If you need to preserve the original array, create a copy first using [...array].fill(value) or Array.from(array).fill(value).