12

I came across some code which was filling an array of objects like so:

const getObj = () => {
  return {a: 1, b: 2, c: 3};
}

const arr = Array(3).fill(null).map(getObj);
console.log(arr);

However, I'm wondering what the main purpose of fill(null).map(getObj) is? It seems redundant as I can simply write the following and get the same resulting array:

const getObj = () => {
  return {a: 1, b: 2, c: 3};
}

const arr = Array(3).fill(getObj());
console.log(arr);

So, I'm wondering if these two lines of code do exactly the same thing or if there is something I'm missing?

The resulting arrays (top array first method with fill + map bottom array is only using map):

enter image description here

3
  • I agree, this is absolutely redundant
    – dganenco
    Jun 21, 2019 at 14:01
  • 1
    Nice, good 2 know Jun 21, 2019 at 14:08
  • 3
    These are not the same; one calls getObj once, one calls it for each array entry. There's no reason to do anything this way, though. Jun 21, 2019 at 14:10

3 Answers 3

17

Array(3).fill(getObj()) will fill your array with references to the same object, Array(3).fill(null).map(getObj) will create object per element. See the example below:

const getObj = () => {
  return {a: 1, b: 2, c: 3};
}

const arr = Array(3).fill(null).map(getObj);
arr[0].b = 4;
console.log(JSON.stringify(arr));

const arr1 = Array(3).fill(getObj());
arr1[0].b = 4;
console.log(JSON.stringify(arr1));

1
  • Ah, I see now. It makes sense now why .fill + .map is used now. Thank you
    – Shnick
    Jun 21, 2019 at 14:08
3

When it comes to Array.fill it is stated in the documentation that:

When fill gets passed an object, it will copy the reference and fill the array with references to that object.

So using a Array.fill with objects has somewhat limited application unless you really want to have multiple objects pointing to the same reference. In more than few use cases however that would lead to bugs if not understood.


For the 2nd case where you do Array(3).fill(null).map(getObj) this is one of the ways to create a new array based on a given arbitrary size and at the same time fill it with new objects.

The real need for the fill(null) is due to the fact that calling Array(3) would only do one thing. Create a new array and set its length property to 3. That is it!

let arr = Array(3); // returns new array with its "length" property set to 3

console.log(arr); // [empty × 3]  <-- browser console

So that array now has only length and bunch of empty elements. You can't do much with it until it actually has values. Therefore the need for fill so that you give it any value and then map through it to set the values you actually want. Using Array.map and calling each iteration your function guarantees you do not have same references. You could have skipped the fill step and done something like this:

const getObj = () => ({a: 1, b: 2, c: 3});

// using array destructuring
let arr = [...Array(3)].map(getObj);
arr[0].a = 3;
console.log(arr);

// using Array.from
let arr2 = Array.from(Array(3)).map(getObj);
arr2[0].a = 3;
console.log(arr2);

There are somewhat shorter and get you the exact same result of filling the array with specified length with objects and not references to the same object.

The trick here is that both would "fill" the array after it is defined with undefined values instead, after which the map would fill it with the values we want.

1
  • Do we really need fill(null) if we want to fill an array with getObj by value? In other words, what's the difference between Array(3).fill(null).map(getObj); vs. Array(3).map(getObj)? Don't we get the same result?
    – Mike
    Sep 7 at 8:42
1

One thing no other answer has brought up is that the Array.from function optionally accepts a mapping function for the array you provide:

const getObj = () => ({a: 1, b: 2, c: 3});

// Array.from also accepts ArrayLikes. 
// As such, constructing an array is unnecessary.
const arr = Array.from({length: 3}, getObj);

arr[0].a = 0;

console.log(arr[0]); // outputs {a: 0, b: 2, c: 3}
console.log(arr[1]); // outputs {a: 1, b: 2, c: 3}
console.log(arr[2]); // outputs {a: 1, b: 2, c: 3}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.