Skip to content
Related Articles

Related Articles

How to fill static values in an array in JavaScript ?

Improve Article
Save Article
  • Last Updated : 24 Jan, 2022
Improve Article
Save Article

There are many ways to fill static values in an array in JavaScript. Let’s see them all one by one.

Array fill() Method: We use the array fill() method to fill static values in an array in JavaScript. This JavaScript array fill() method is used to fill an array with a given static value from the specified start position to the specified end position. If we do not specify the start and end position then the whole array will be filled up with a given static value. This fill() method modifies the original array and returns it.

Syntax:

arr.fill(value, start, end)

Parameters: The fill() method accepts three parameters which are value, start, end. The arr is the array.

  • value: This is usually required. It defines the static value by which the array will be filled.
  • start: This is optional. This is the start index which means I will start filling the array from that index with a static value. If the starting index value is not defined then it will start from 0.
  • end: This is optional. This is the end or last index which means up to that index we will fill the array with a static value. If the end index value is not defined then arr. length (exclusive) or arr.length-1 will be defined as end index by default.

Note: If the start index or end index is negative then indexes are counted from backward.

Return value:  The arr.fill() method returns the modified array (does not return any new array), which is filled with a static value.

Example 1: In the following example, we use the fill() method to fill the array. The whole array is filled with 50, replacing the previous values. Here we do not define the start and end index, so by default start index is 0, and the end index is arr.length-1.

Javascript




<script>
    var value = [4, 10, 5, 7, 6, 18];
      
    // Whole array is filled with 50 
    // and return the modified array 
    var value2 = value.fill(50);
    console.log(value);
    console.log(value2);
<script>


Output:

[ 50, 50, 50, 50, 50, 50 ]
[ 50, 50, 50, 50, 50, 50 ]

Example 2: In the following example, we use the fill() method to fill the array with 45 from start index is 1 to end index is 4 (exclusive).

Javascript




var value = [4, 10, 5, 7, 6, 18];
value.fill(45, 1, 4); 
console.log(value);


Output:

[ 4, 45, 45, 45, 6, 18 ]

Example 3: In the following example, we use the fill() method to fill the array with 15. The start index is 3 but the end index is not defined, so by default end index is arr.length-1.

Javascript




<Script>
    var value = [4, 10, 5, 7, 6, 18];
    value.fill(15, 3); 
    console.log(value);
</script>


Output:

[ 4, 10, 5, 15, 15, 15 ]

Example 4: In the following example, we use the fill() method to fill the array with 25. Here start index = -4 and end index = -1, so indexes are counted from backwards.

Javascript




<script>
    var value = [4, 10, 5, 7, 6, 18];
    value.fill(25, -4, -1); 
    console.log(value);
</script>


Output:

[ 4, 10, 25, 25, 25, 18 ]

Example 5: In the following example, If we give an invalid index then the array will never change.

Javascript




<script>
    var value = [4, 10, 5, 7, 6, 18];
    value.fill(25, 8, 10); 
    console.log(value);
</script>


Output:

[ 4, 10, 5, 7, 6, 18 ]

Using for loop: We use a simple for loop to fill static values in an array in JavaScript. But still arr.fill() method is best for this job. Let’s look at some examples.

Example 1: In the following example, we use for loop to fill the array with 2.

Javascript




<script>
    let value = [5, 3, 9, 10, 50, 100];
    let i;
  
    for(i = 0; i < value.length; i++) {
      value[i] = 2; 
    }
    console.log(value);
</script>


Output:

[ 2, 2, 2, 2, 2, 2 ]

Example 2:  In the following example, we use for loop to fill the array with 15 from starting index is 1 to ending index is 4 ( but ending index must be smaller than arr.length.)

Javascript




<script>
    let value = [5, 3, 9, 10, 50, 100];
    let i;
    for(i = 1; i <= 4; i++) {
      value[i] = 15;
    
    console.log(value);
</script>


Output:

[ 5, 15, 15, 15, 15, 100 ]

Using push() method:  We use the push() method to fill static values in an array in JavaScript. We use the push() method inside the for() loop. The push() method always adds a new element to the end of the array so that means the push() method cannot replace the elements of the array.

Example: In the following example, we take an empty array and use the push() method to fill the array with 10.

Javascript




<script>
    let value = [];
  
    // An empty array is taken
    let i, length = 5;
    for(i = 0; i < length; i++) {
      value.push(10);
    
    console.log(value);
</script>


Output: 

[ 10, 10, 10, 10, 10 ]

Using from() method:  We use the array from() method to fill static values in an array in JavaScript. The from() method is used to create a new array that contains a copy from an array or iterable object. We use this method to convert an array or iterable objects to an array.

Syntax:

Array.from(object, mapFunction, thisValue)

Parameters: The from() method accepts three parameters which are object, mapFunction and thisValue.

  • object: This is usually required. This parameter holds that array or iterable object which we convert to an array.
  • mapFunction: This is optional. This is used to call every element of the array.
  • thisValue: This is optional. The value of “thisValue” is used as “this” when we call the mapFunction.

Return value: The from() method returns a new array.

Example:  We see an example of how to use from() method to fill static values in an array in JavaScript. In the following example, we use Array.from() method to fill the array with value 4. We created an object where length = 6. 

Javascript




<script>
    let arr = Array.from({ 
      length: 6
     }, (value) => value = 4);
    console.log(arr);
</script>


 Output:

[ 4, 4, 4, 4, 4, 4 ]

Using spread operator: We use the spread operator to fill static values in an array in JavaScript. The spread operator is denoted by three dots (…). The spread operator helps to copy all elements from an existing array to another array. Let’s look at an example.

Example:  In the following example, we use spread operator to fill the array with 100 with the help of the map function.

Javascript




<script>
    let arr = [1, 3, 5, 8, 9, 10];
    let arr2 = [...arr].map((value) => value = 100 ) ;
    console.log(arr2);
</script>


Output:

[ 100, 100, 100, 100, 100, 100 ]

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!