JavaScript

How to fill Array values in JavaScript

Have you ever come across a situation where creating a JavaScript array with some predefined values is required, or do you want to overwrite an existing array’s elements with static values? In such scenarios, it becomes necessary to fill the array values.

JavaScript offers various methods that can be used to fill values in an array such as “Array.fill()”, “Array.from()”, “Array push()” methods, and spread operator[…]”, where “Array.fill()” method fills an existing array with the new values, and “Array.fill()” and the other two methods create a new array instance and then fill them with the specified static values.

This write-up will discuss different methods to fill array values in JavaScript. So, let’s start!

How to fill array values in JavaScript

You can use any of the following approaches to fill array values in JavaScript:

  1. Using the Array.fill() method
  2. Using the Array push() method and for loop
  3. Using the Array.from() method
  4. Using the spread operator[…] and the map() function

We will now explain each of the methods mentioned above in detail.

How to fill array values in JavaScript using Array.fill() method

In JavaScript, the “Array.fill()” method is utilized for filling an array with static values. It can be used to fill a particular part of an array or the entire array.

Syntax

array.fill(value, start, end)

Here, the “array.fill()” method will replace the elements of the array with the static “value“; “start,” and “end” are the optional arguments that represent the starting and ending index of the array, wherein between these indexes the static values are going to be placed.

Example 1

First of all, we will create a JavaScript “array” having the following values:

var array= ["Summer", "Winter", "Spring"];

Then, we will invoke the “array.fill()” method to fill the whole array with “Autumn” value:

array.fill("Autumn");

Execution of the above-given code will show the following output:

Example 2

In the next example, we will try to fill the original “array” elements with “Autumn” at index “0” and “1”:

array.fill("Autumn", 0, 2);

Note that the ending index “2” will not include in this operation:

How to fill array values in JavaScript using Array push() method and for loop

Another method used to fill an array is the Array “push()” method. This method assists in adding one or more values to the array. It is also utilized in combination with the “for loop” to fill an array with static values.

Syntax

array.push('value');

Here, the JavaScript “array” will be filled with the static “value” using the “push()” method.

Example

We will create a constant “length” having the value “5” and an empty “array” :

const length = 5;
const array = [];

Next, we will use the “for loop” to loop over the array and “push()” method to fill the array with the “spring” value:

for (let i = 0; i < length; i++) {
array.push('spring');
}
console.log(array);

The given output signifies that the whole “array” is filled with the “spring” value:

How to fill array values in JavaScript using Array.from() method

The JavaScript “Array.from()” method is utilized for creating a new array instance from an iterable or array-like object. This method accepts an array-like object as an argument and returns the newly created array.

Syntax

Array.from(object, mapFunction, thisArg)

Here, the “object” represents the JavaScript object which needs to be converted into an array, “mapFunction” is an optional parameter that refers to the map function that will fill the array with the function result. Lastly, when the specified map function is executed, “thisArg” is used as “this” value.

Example

Using “Array.from()” method, we will create an empty array object whose “length” property is set “5” and fill it with the value “spring” using the map function:

var array = Array.from({ length: 5 }, () => ('spring'))
console.log(array);

As you can see, the execution of the given “Array.from()” will add the “spring” value to all five indexes of “array”:

How to fill array values in JavaScript using spread operator […] and map() function

The spread operator “[…]” is another useful JavaScript ES6 feature that can be used in combination with the “map()” function to expand an array and fill it with some specific values.

Syntax

[...new Array()].map(() => 'value')

Here the spread operator “[…]” will create a new array and then pass it to the “map()” function to fill all of the indexes with the “value“.

Example

In this example, the spread operator “[…]” will create a new “array” with the length “5” and initialized it with an “undefined” value. After doing so, the “map()” function will map the new object instances to “Autumn” value:

let array= [...new Array(5)].map(() => 'Autumn');
console.log(array);

The given output shows that we have successfully filled the “array” with the specified value:

We have compiled different methods for filling an array with values. Choose any of them according to your requirements.

Conclusion

The JavaScript “Array.fill()”, “Array.from()” methods, combination of “Array push() method and for loop” and “spread operator[…] and map() function” are used to fill array values. Using the Array.fill() method, an already created array can be filled with the new values. In contrast, the Array.from() method and the other two combinations are utilized to create a new array instance and then fill it with the specified value. This write-up discussed different methods to fill array values in JavaScript.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.