JavaScript TypedArray fill() method

The fill method in JavaScript serves the purpose of populating all elements within an array, starting from a specified index and extending to an endpoint, with a predetermined static value.

Syntax:

array.fill(value)

array.fill(value, start)

array.fill (value  start, end )

Parameters:

Value(Required) : The value to fill the array.

Start (Optional): The initial position from which the array will begin to be populated (the default value is 0).

End(Optional): This parameter indicates the index at which to cease the population of the array (the default value is array.length).

Return value:

This function does not generate a new array. Rather, it modifies the existing array on which the function is executed.

Browser Support:

Example 1

JavaScript TypedArray fill(value) method

<script type="text/javascript">

// JavaScript to illustrate fill() method

// Input array

var arr1 = [1,2,3,4,5,6,7,8,9,10];

arr1.fill(20); 

document.write(arr1);

// expected output: 20,20,20,20,20,20,20,20,20,20

</script>

Output:

20,20,20,20,20,20,20,20,20,20

Example 2

JavaScript TypedArray fill(value,start) method

<script type="text/javascript">

// Input array 

// JavaScript to illustrate fill() method

var arr1 = [1,2,3,4,5,6,7,8,9,10];

//value=20 , start index=2,fill arry with 20 

arr1.fill(20,2); 

document.write(arr1);

// expected output: 1,2,20,20,20,20,20,20,20,20

</script>

Output:

1,2,20,20,20,20,20,20,20,20

Example 3

The fill(value, start, end) method of JavaScript's TypedArray is utilized to populate all elements in a specific array section with a designated value. This method modifies the original TypedArray and can accept optional parameters to define the starting and ending indices for filling.

Syntax

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

Parameters

• ✅ value: This is the value that will be assigned to each element within the defined range.
• ✅ start (optional): An integer indicating the index at which the fill operation will commence. The default value is 0.
• ✅ end (optional): An integer that specifies the index at which to cease the fill operation. The filling will stop just before this index. If this argument is omitted, the method will fill to the end of the TypedArray.

Description

When invoked, the fill method replaces each element in the TypedArray with the specified value, starting from the index denoted by the start parameter and concluding before the index indicated by the end parameter. If the start parameter is negative, it is treated as an offset from the end of the array. Similarly, if the end parameter is negative, it is also considered as being counted from the end.

Example

const typedArray = new Uint8Array([1, 2, 3, 4, 5]);

typedArray.fill(0);
// Result: Uint8Array(5) [0, 0, 0, 0, 0]

typedArray.fill(7, 1, 4);
// Result: Uint8Array(5) [0, 7, 7, 7, 0]

typedArray.fill(2, -3, -1);
// Result: Uint8Array(5) [0, 7, 2, 2, 0]

Notes

• ✅ The fill method performs a shallow copy, meaning that for objects or arrays, it will not create new instances but will fill in the references.
• ✅ The method returns the modified TypedArray, allowing for method chaining.

This method is particularly useful when you need to reset or initialize sections of a TypedArray with a specific value efficiently.

<script type="text/javascript">

// JavaScript to illustrate fill() method

// Input array 

var arr1 = [1,2,3,4,5,6,7,8,9,10];

//value=20 , start index=2, last index=3 

//fill arry with 20 

arr1.fill(20,2,3); 

document.write(arr1);

// expected output: 1,2,20,4,5,6,7,8,9,10

</script>

Output:

1,2,20,4,5,6,7,8,9,10