Create a Zero-filled Array in JavaScript

# Create a Zero-filled Array in JavaScript

Use the fill() method to create an array filled with zeros, e.g. new Array(3).fill(0) creates an array containing 3 elements with 0 values.

Copied!
const arr1 = new Array(3).fill(0);
console.log(arr1); // 👉️ [0, 0, 0]

The Array.fill() method sets the elements in an array to the provided value and returns the modified array.

The only argument we passed to the Array() constructor is the number of empty elements the array should contain.

Copied!
console.log(new Array(3)); // 👉️ [ , , ]

Using the Array() constructor is the same as creating an empty array and setting its length.

Copied!
const arr = [];
arr.length = 3;

console.log(arr); // 👉️ [ , , ]

Either way, we create an array with 3 empty elements.

The next step is to call the Array.fill method on the array.

Copied!
const arr = new Array(3).fill(0);

console.log(arr); // 👉️ [ 0, 0, 0 ]

The only argument we passed to the Array.fill() method is the value we want to fill the array with.

Each of the 3 elements in the array gets assigned a value of 0.

If you have to do this often, define a reusable function.

Copied!
function zeroFilledArray(len) {
  return new Array(len).fill(0);
}

console.log(zeroFilledArray(3)); // 👉️ [ 0, 0, 0 ]
console.log(zeroFilledArray(4)); // 👉️ [ 0, 0, 0, 0 ]
console.log(zeroFilledArray(5)); // 👉️ [ 0, 0, 0, 0, 0 ]

The zeroFilledArray function takes the number of elements the array should contain and returns a zero-filled array with the specified length.

# Create a Zero-filled Array using Array.from()

This is a two-step process:

1. Use the Array() constructor to create an array of N empty elements.
2. Use the Array.from() method to set each element to a 0.

Copied!
const arr = Array.from(Array(3), () => 0);

console.log(arr); // 👉️ [ 0, 0, 0 ]

The Array.from method creates a new array from the provided iterable.

The second argument we passed to the method is a map() function.

The function gets invoked with each element in the array.

On each iteration, we return a zero value.

The Array.from() method returns a new array containing the elements that the map function returned.

The map() function gets called with each element and the index, so you could also use this approach to create an incrementing array.

Copied!
const arr = Array.from(Array(3), (_element, index) => index);

console.log(arr); // 👉️ [ 0, 1, 2 ]

On each iteration, we return the index. You can add 1 to the index if you want to start from 1.

You can define a reusable function if you have to do this often.

Copied!
function zeroFilledArray(len) {
  return Array.from(Array(len), () => 0);
}

console.log(zeroFilledArray(3)); // 👉️ [ 0, 0, 0 ]
console.log(zeroFilledArray(4)); // 👉️ [ 0, 0, 0, 0 ]
console.log(zeroFilledArray(5)); // 👉️ [ 0, 0, 0, 0, 0 ]

Alternatively, you can use a basic for loop.

# Create a Zero-filled Array using a for loop

This is a three-step process:

1. Use the Array() constructor to create an array of N empty elements.
2. Use a for loop to iterate over the array.
3. Set each element to 0.

Copied!
const arr = new Array(3);

for (let i = 0; i < arr.length; i++) {
  arr[i] = 0;
}

console.log(arr); // 👉️ [0, 0, 0]

We used the Array() constructor to create an array containing 3 empty elements.

The for loop allows us to iterate over the array and assign each empty element to zero.

We used a basic for loop to iterate over the array because the forEach() method doesn't get called with empty elements.

Copied!
const arr = new Array(3);

arr.forEach(element => {
  console.log(element);
});

If the run the code sample, you will see that no value gets logged to the console.

# Create a Zero-filled Array using map()

You can also use the Array.map() method to create a zero-filled array.

Copied!
function zeroFilledArray(len) {
  const arr = [...new Array(len)].map(() => 0);

  return arr;
}

console.log(zeroFilledArray(3)); // 👉️ [ 0, 0, 0 ]
console.log(zeroFilledArray(4)); // 👉️ [ 0, 0, 0, 0 ]
console.log(zeroFilledArray(5)); // 👉️ [ 0, 0, 0, 0, 0 ]

We used the spread syntax (...) to unpack an array of length N into a new array.

The function we passed to the Array.map() method gets called with each element in the array.

On each iteration, we return 0 from the function directly.

The map() method returns a new array containing the values returned from the callback function.

You also have access to the index when using the Array.map() method.

Copied!
function zeroFilledArray(len) {
  const arr = [...new Array(len)].map((_element, index) => {
    return index;
  });

  return arr;
}

console.log(zeroFilledArray(3)); // 👉️ [ 0, 1, 2 ]
console.log(zeroFilledArray(4)); // 👉️ [ 0, 1, 2, 3 ]
console.log(zeroFilledArray(5)); // 👉️ [ 0, 1, 2, 3, 4 ]

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

• Create an Array containing 1 to N numbers in JavaScript
• Create an Array with N elements, same Value in JavaScript
• Create an Object from Two Arrays in JavaScript
• How to Zip two or more Arrays in JavaScript - Complete Guide