Object gets always last value in forEach loop - JavaScript

Question

Trying to filter the results in array2 based on the value type of array1 but the resultant array always prints the last value in the forEach loop.

Snippet

const array1 = [{
    name: "Audi",
    type: "sedan"
  },
  {
    name: "BMW",
    type: "sedan"
  },
  {
    name: "Benz",
    type: "suv"
  }
];
const array2 = [{
  year: "2020"
}, {
  year: "2021"
}];

let a = [];
let customObject1 = {};
let array3 = [];
array1.forEach((val1) => {
  array2.forEach((val2) => {
    if (val1.type === "sedan") {
      customObject1["label"] = "Sedan Car";
      customObject1["year"] = val2.year;
      array3.push(customObject1);
      console.log(array3);
    }
  });
});

Here's the result that I'm expecting. Could anyone please help?

array3 = [{label: 'Sedan Car', year: '2020'}, {label: 'Sedan Car', year: '2021'}]

I absolutely cannot see how the two datasets relate to each other - You're trying to get a weird result based on what logic exactly? *"Trying to filter the results in array2"* filter what? — Roko C. Buljan, Nov 21 '20 at 01:50
Would C# duplicate work? The same "not creating object on each iteration"... Surprising that there is no such easily searchable one in JavaScript. My mistake - to add to array in JavaScript you push it out :) — Alexei Levenkov, Nov 21 '20 at 01:51
Does this answer your question? [Array.push() makes all elements the same when pushing an object](https://stackoverflow.com/questions/10932584/array-push-makes-all-elements-the-same-when-pushing-an-object) — Alexei Levenkov, Nov 21 '20 at 01:52

sonEtLumiere · Answer 1 · 2020-11-21T02:01:18.293

1

You need to clone the customObject1 each loop when you push to array3, you can use JSON.stringify() and then JSON.parse() to get a copy of that object (with a new reference in memory), otherwise you are overwriting the reference of the same object each loop. Check this to understand how JS handle objects in memory: https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0.

let a = [];
let customObject1 = {};
let array3 = [];
array1.forEach((val1) => {
  array2.forEach((val2) => {
    if (val1.type === "sedan") {
      customObject1["label"] = "Sedan Car";
      customObject1["year"] = val2.year;
      array3.push(JSON.parse(JSON.stringify(customObject1)));
      console.log(array3);
    }
  });
});

edited Nov 21 '20 at 02:01

answered Nov 21 '20 at 01:56

sonEtLumiere

4,461
3
8
35

seems like a overhead to create a deep copy every inner iteration instead of creating a new inner scoped variable – Martin Godzina Nov 21 '20 at 02:47
I know, it's just to explain OP to understand what's happening with his code. – sonEtLumiere Nov 21 '20 at 02:50

score 0 · Answer 2 · answered Nov 21 '20 at 01:57

Idk what you're trying to do here. but here's how you can do it.

const array1 = [
  {
    name: 'Audi',
    type: 'sedan',
  },
  {
    name: 'BMW',
    type: 'sedan',
  },
  {
    name: 'Benz',
    type: 'suv',
  },
];
const array2 = [
  {
    year: '2020',
  },
  {
    year: '2021',
  },
];

const array3 = [];

array2.forEach((item, index) => {
  array1.forEach((item2) => {
    if (item2.type === 'sedan') {
      item.label = 'Sedan Car';
    }
  });
  array3.push(item);
});

console.log(array3);

score 0 · Answer 3 · answered Nov 21 '20 at 02:29

You are getting only the last value because you are re-using the same customObject1 instance for every array3 element. You would get better results by defining a new customObject1 instance for each element:

const array1 = [{
    name: "Audi",
    type: "sedan"
  },
  {
    name: "BMW",
    type: "sedan"
  },
  {
    name: "Benz",
    type: "suv"
  }
];
const array2 = [{
  year: "2020"
}, {
  year: "2021"
}];

let a = [];
let array3 = [];
array1.forEach((val1) => {
  array2.forEach((val2) => {
    if (val1.type === "sedan") {
      let customObject1 = {};
      customObject1["label"] = "Sedan Car";
      customObject1["year"] = val2.year;
      array3.push(customObject1);
      console.log(array3);
    }
  });
});

NOTE: This still does not produce the final results you seem to expect. That is because array1 has two sedans.

score 0 · Answer 4 · answered Nov 21 '20 at 02:57

The problem is, that the same customObject reference is used during every iteration of the inner forEach loop. I would prefer a solution without using a variable at all by passing an object directly as a parameter in the push function.

let a = [];
let array3 = [];
array1.forEach((val1) => {
  array2.forEach((val2) => {
    if (val1.type === "sedan") {
      array3.push({ label: "Sedan Car", year: val2.year });
    }
  });
});

If you want to keep your variable were it is you could also make use of object destructuring to create a copy

let a = [];
let customObject1 = {};
let array3 = [];
array1.forEach((val1) => {
  array2.forEach((val2) => {
    if (val1.type === "sedan") {
      customObject1["label"] = "Sedan Car";
      customObject1["year"] = val2.year;
      array3.push({...customObject1}) //destructuring the object;
      console.log(array3);
    }
  });
});

Object gets always last value in forEach loop - JavaScript

4 Answers4