Filling Arrays with Ease: A Guide to JavaScript’s Array.fill() Method

How do we fill the array in JavaScript? Let’s explore the power of JavaScript’s Array.fill() method with our in-depth guide.

Whether you’re a beginner or an experienced developer, this guide has something for everyone.

In this article, you will learn how to quickly and easily populate arrays with static values, along with examples.

Don’t miss out on this essential resource for mastering the Array.fill() method to enhance your skills in JavaScript.

What is array.fill in JavaScript?

The Array.fill() method in JavaScript is used to fill all the elements of an array with a static value, from a start index (default 0) to an end index (default array.length).

Syntax

The syntax for the Array.fill() method in JS is as follows:

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

Parameters

📌value (required)

The value to fill the array with.

📌start (optional)

The index to start filling the array from. If not provided, it defaults to 0.

📌end (optional)

The index to stop filling the array at. If not provided, it defaults to array.length.

Return value

It returns the modified array.

Here’s an example of using the Array.fill() method with all its parameters on an array of subjects:

const subjects = ["English", "Math", "Science", "History"];
subjects.fill("Programming", 2, 4); ✅
console.log(subjects); 

Output:

["English", "Math", "Programming", "Programming"]

In this example, we create an array of subjects and then use the fill() method to fill the elements from index 2 to index 4 (not inclusive) with the value “Programming.”

The resulting array contains the values [“English”, “Math”, “Programming”, “Programming”].

How to fill arrays in JavaScript? 5 methods

There are several ways to fill an array with values in JS. Here are 5 common methods:

Method 1: Use the Array.fill() method

The Array.fill() method can be used to fill all the elements of an array with a static value.

Here’s an example:

const text = new Array(5); text.fill("Itsourcecode"); ✅
console.log(text); 

Output:

[
  'Itsourcecode',
  'Itsourcecode',
  'Itsourcecode',
  'Itsourcecode',
  'Itsourcecode'
]

Method 2: Use a loop

You can use a loop to iterate over the elements of an array and assign values to them one by one.

Here’s an example:

var arry = ["how to ", "fill array", " in javascript"];
for (var i = 0; i < arry.length; i++) { ✅
    arry[i] = 'Hi, welcome to itsourcecode';
}
console.log(arry);

In this example, we create an array of strings and then use a loop to iterate over the elements of the array and assign the value “Hi, welcome to itsourcecode” to each element.

The results of an array contain only “Hi, welcome to itsourcecode” elements.

Output:

[
  'Hi, welcome to itsourcecode',
  'Hi, welcome to itsourcecode',
  'Hi, welcome to itsourcecode'
]

Method 3: Use the Array.from() method

The Array.from() method can be used to create a new array with the specified length and fill it with values generated by a function.

Here’s an example:

const squares = Array.from({length: 5}, (x, i) => (i + 5) ** 2); ✅
console.log(squares); 

Output:

[ 25, 36, 49, 64, 81 ]

Method 4: Use the spread operator

You can use the spread operator (…) to create a new array and fill it with values from another array or iterable object.

Here’s an example:

const subjects = ["English", "Math", "Science"];
const moresubjects = [...subjects, "Programming", "Web Designing"]; ✅
console.log(moresubjects);

Output:

[ 'English', 'Math', 'Science', 'Programming', 'Web Designing' ]

Method 5: Use the concat() method

The concat() method can be used to merge two or more arrays and create a new array containing all the elements from the original arrays.

Here’s an example:

const sample1 = [10, 20, 30];
const sample2 = [40, 50];
const allsample = sample1.concat(sample2); ✅
console.log(allsample);

How to fill empty array in JavaScript?

To fill an empty array in JavaScript you can use the provided method above:

1. Using a loop
2. Using the Array.fill() method
3. Using the Array.from() method

Conclusion

In conclusion, the article discusses various methods to fill arrays in JavaScript.

It highlights the Array.fill() method as one of the options to fill all elements of an array with a static value.

This article also provides examples of other methods, including using loops, the Array.from() method, the spread operator, and the concat() method.

We are hoping that this article provides you with enough information that help you understand how to fill an array in JavaScript.

You can also check out the following article:

• Array.from in JavaScript
• JavaScript reverse array
• JavaScript array slice

Thank you for reading itsourcecoders 😊.

Caren Bautista

Technical Writer at PIES IT Solution

Responsible for crafting clear, well-structured, and beginner-friendly content across the platform. Handles the writing, proofreading, and editorial review of tutorials, guides, and documentation to ensure every article is accurate, readable, and easy to follow.

Expertise: Technical Writing · Content Creation · Documentation · Editorial Writing · JavaScript · TypeScript · Python · Python Errors · HTTP Errors · MS Excel  · View all posts by Caren Bautista →