Why is console.table() method printing only last row in all rows?

Question

I have created an array with six objects each of which has three properties, name, age and profession. I have given them initial values. Now I have three other arrays, each having six values (six different names, six different ages and six different professions). I am trying to change the property values of objects in the initial array by looping through the other three arrays having different values for name age and profession. I have tried doing it in a single for loop, a single while loop and by using three different loops. but It is not working. the console.table() method is printing the values of last iteration of loop in all table rows (name:supermentalist, age:40 and profession:theTwo).

let arr = new Array(6).fill({});

for (ele of arr) {
  ele.name = "withoutCape";
  ele.age = 40;
  ele.profession = "programmer";
}

console.table(arr);

const names = [
  "superhero",
  "superzero",
  "supermum",
  "superdumb",
  "superscientist",
  "supermentalist",
];

const ages = [35, 36, 37, 38, 39, 40];

const professions = [
  "programmer",
  "scientist",
  "cryptographer",
  "etymologist",
  "theOne",
  "theTwo",
];

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

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

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

console.table(arr);

Answer 1

See this question: How do I use array.fill for creating an array of objects?. You have an array of objects that all refer to the same object, so changing one changes them all.

If you want to maintain starting with your new Array() call you'll need to clone each object on assigning/reassigning properties to it. (or map() individual objects as farvilain mentioned in his answer.)

Something along these lines...

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

let arr = new Array(6).fill({});

for (ele of arr) {
  ele.name = "withoutCape";
  ele.age = 40;
  ele.profession = "programmer";
}

// Logs the original array of references
console.log(arr);

const names = [
  "superhero",
  "superzero",
  "supermum",
  "superdumb",
  "superscientist",
  "supermentalist",
];

const ages = [35, 36, 37, 38, 39, 40];

const professions = [
  "programmer",
  "scientist",
  "cryptographer",
  "etymologist",
  "theOne",
  "theTwo",
];

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

// Logs the new array of cloned objects
console.log(arr);

But you might want to look at Array.from() which implements a map() callback as it's second argument

Array.from({length: 6}, x => ({}))

Or at simply mapping one of your content arrays directly...

const arr = names.map((name, i) => (
  { name: name, age: ages[i] || 40, profession: professions[i] || 'programmer'}
))

Answer 2

This is not a console.table bug.

Look at let arr = new Array(6).fill({});

It is exactly the same as:

let shared = {};
let arr = new Array(6).fill(shared);

So you put the same object in every row, so arr[0] === arr[1] === ... So you always modify everything.

Change with let arr = new Array(6).fill().map(() => ({}));

And it works.

Making your code better could be something like:

const names = [
  "superhero",
  "superzero",
  "supermum",
  "superdumb",
  "superscientist",
  "supermentalist",
];

const ages = [35, 36, 37, 38, 39, 40];

const professions = [
  "programmer",
  "scientist",
  "cryptographer",
  "etymologist",
  "theOne",
  "theTwo",
];

let arr = new Array(6).fill().map( (e, i) => {
    //Warning i can be greather than names/ages/professions.length
    return {
        name: names[i],
        profession : professions[i],
        age: ages[i]
    };
});
console.table(arr);