JavaScript Arrays: New and Fill

• The .fill method replaces all of an array's existing values with one value.

• >

  const a = [1, 2];
  a.fill(3);

  Result:

  Run Code

• >

  const a = ['a', 'b', 'c'];
  a.fill('d');

  Result:

  ['d', 'd', 'd']

• What if we don't know how many "d"s we need in advance? First, we can create an array of a given size.

• >

  const size = 1 + 2;
  const arr = new Array(size);
  arr.length;

  Result:

  3

• There's nothing in that array yet. If we ask for an element, we'll get undefined.

• >

  const size = 1 + 2;
  const arr = new Array(size);
  arr[0];

  Result:

  undefined

• Now that we created an array with a defined size, we can fill it with values. new Array and .fill are commonly used together for this exact reason.

• >

  const size = 1 + 2;
  new Array(size).fill('d');

  Result:

  ['d', 'd', 'd']

• Now we can create a dynamically-sized filled array.

• >

  function newAndFill(size, value) {
    return new Array(size).fill(value);
  }
  newAndFill(2, 'd');

  Result:

  ['d', 'd']

• Here's a concrete example of how we might use this technique. The progress bar at the top of this lesson is made of many divs. As the developers of Execute Program itself, we know how many paragraphs and code examples exist in the lesson. We create that many divs to form the progress bar. This is done using the new Array(...).fill(...) method shown here!