How to Fill JavaScript Arrays with Primitives, Shared Objects, and Unique Instances

1. Fill array with primitives

Assume we want to initialize an array of length 3 with a given value.

The

array.fill()

method can fill all elements from a start index to an end index with a fixed value.

Combined with

Array(n)

:

<code>const length = 3;
const filledArray = Array(length).fill(0);
filledArray; // [0, 0, 0]
</code>

Array(length).fill(initialValue)

is a convenient way to create an array of the desired length and initialize it with a primitive (number, string, boolean).

2. Fill array with objects

What if we need to fill an array with objects?

2.1 Using array.fill()

The method also supports passing an object as the initial value:

<code>const length = 3;
const filledArray = Array(length).fill({ value: 0 });
filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]
</code>

Array(length).fill({ value: 0 })

creates an array of length 3 and assigns the same object instance

{ value: 0 }

to each slot, meaning all elements share the same reference.

If any element is modified, all elements are affected:

<code>const length = 3;
const filledArray = Array(length).fill({ value: 0 });
filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]
filledArray[1].value = 3;
filledArray; // [{ value: 3 }, { value: 3 }, { value: 3 }]
</code>

Changing the second element's value changes every element.

2.2 Using Array.from()

Array.from()

creates a shallow‑copied array from an existing array or iterable.

Using it, we can easily create and initialize an array with distinct object instances:

<code>const length = 3;
const filledArray = Array.from(Array(length), () => {
  return { value: 0 };
});
filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]
</code>

If we modify an element, only that element changes:

<code>const length = 3;
const filledArray = Array.from(Array(length), () => {
  return { value: 0 };
});
filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]
filledArray[1].value = 3;
filledArray; // [{ value: 0 }, { value: 3 }, { value: 0 }]
</code>

filledArray[1].value = 3

modifies only the second item.

2.3 Using array.map() together with array.fill()

Since

Array(n)

returns an array, why not use

Array.from

? Directly using

map

on the empty array fails because

array.map()

skips empty slots:

<code>const length = 3;
const filledArray = Array(length).map(() => {
  return { value: 0 };
});
filledArray; // [empty × 3]
</code>

The fix is to fill the empty array with

null

first:

<code>const length = 3;
const filledArray = Array(length).fill(null).map(() => {
  return { value: 0 };
});

filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]
</code>

What are your usual methods for filling arrays in JavaScript?