The fill() method in JavaScript is used to change all elements in an array with a specified static value. It doesn't create a new array but modifies the original array in place.

The syntax for the fill() method is:

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

Here's what each parameter means:

• value: The value to fill the array with.
• start (optional): The index to start filling the array. Default is 0.
• end (optional): The index to stop filling the array (exclusive). Default is array.length.

The fill() method works by iterating over the specified range of indices and replacing the existing values with the provided value. It doesn't change the length of the array, and it always modifies the original array.

If start is negative, it's counted from the end of the array. If end is negative, it specifies an index from the end at which to stop filling.

 
 
 const arr = [1, 2, 3, 4, 5];
 arr.fill(0);
 //arr will now be [0, 0, 0, 0, 0].
 

 

Here arr will now be [1, 2, 0, 0, 5]. It started filling at index 2 (inclusive) and stopped at index 4 (exclusive).

 
const arr = [1, 2, 3, 4, 5];
 
arr.fill(0, 2, 4);
//array will be [1, 2, 0, 0, 5].
 
 

Remember, fill() modifies the original array in place, so be cautious if you want to keep a copy of the original array. If you need to create a new array with the same value repeated, consider using Array.prototype.fill() in conjunction with Array.from() or the spread operator ([...]).

 

  const originalArr = [1, 2, 3, 4, 5];
  const newArr = Array.from(originalArr).fill(0);

  //newArr will now be [0, 0, 0, 0, 0].
 


 //originalArr will be same  [1, 2, 3, 4, 5]


 
 
 

 

Negative indices are counted from the end of the array, so in this example  -2 refers to the second-to-last element, and the filling continues to the end.

arr will be [1, 2, 3, 0, 0].

 

  const arr = [1, 2, 3, 4, 5];
  arr.fill(0, -2);

  // arr will be [1, 2, 3, 0, 0]. 
 

 

 

The spread operator (. . .) in JavaScript is used to expand an iterable (like an array) into individual elements. This means that you can use the spread operator to unpack the elements of an array, which can be handy in various situations.

In this example, we first have an array called productArray containing [1, 2, 3, 4, 5]. Then, we use the spread operator ([...productArray]) to create a shallow copy of productArray. This is important because we don't want to modify the original array.

Next, we call the fill() method on the new array. We pass 10 as the value we want to fill, 1 as the starting index, and 4 as the ending index. This means we want to fill the array starting from index 1 up to (but not including) index 4.

After this operation, newArray will be [1, 10, 10, 10, 5]. The original productArray remains unchanged, and we've created a new array with the desired values filled in.

So, to summarize, using the fill() method with the spread operator allows us to create a modified copy of an array while leaving the original array intact. It's a useful technique for situations where you want to make changes to an array without affecting the original data.

 // Example array
 let productArray = [1, 2, 3, 4, 5];
 
 // Using fill() method with spread operator
 let newArray = [...productArray].fill(10, 1, 4);

 // newArray will be [1, 10, 10, 10, 5].

 // productArray will be [1, 2, 3, 4, 5].