Using nested forEach loops to push and object to an array

Question

I'd love an explanation as to why the result of this function don't match my expectation.

const numbers = [ 1, 2 ]
const objects = [{f: 'a'}, {f: 'b'}]

async function(domain) {
  let matrix = []
  objects.forEach((object) => {
    numbers.forEach((number) => {
      object.number = number
      matrix.push(object)
    })
  }) 
  return matrix
}()

Actual

The result, once the promise is resolved returns:

[ 
  { f: 'a', number: 2 },
  { f: 'a', number: 2 },
  { f: 'b', number: 2 },
  { f: 'b', number: 2 } 
]

Expected

But, my expectation is that it would return:

[ 
  { f: 'a', number: 1 },
  { f: 'a', number: 2 },
  { f: 'b', number: 1 },
  { f: 'b', number: 2 } 
]

One of the things that puzzles me the most is that if I console.log the value of object just before I push, it logs out each of the objects in my expected result.

Why do you define your function as async when there is nothing async happening in it, and you have no await? — trincot
– trincot, Commented Oct 7, 2017 at 18:32
Whoops. It's because I extracted the problem from another piece of code that does use await. I can remove that and rephrase. — counterbeing
– counterbeing, Commented Oct 7, 2017 at 19:03

Nenad Vracar · Accepted Answer · 2017-10-07 18:29:18Z

8

Because objects are passed by reference and you are modifying original object, instead you can push new object.

const numbers = [ 1, 2 ]
const objects = [{f: 'a'}, {f: 'b'}]

let matrix = []
objects.forEach((object) => {
  numbers.forEach((number) => {
    matrix.push({...object, number})
  })
})

console.log(matrix)

answered Oct 7, 2017 at 18:29

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nenad Vracar Over a year ago

Its probably rest syntax in object try this instead matrix.push(Object.assign({}, object, {number}))

Arup Rakshit Over a year ago

@HermanLauenstein Probably object spread is not implemented yet. Use Object.assign() then matrix.push(Object.assign({}, object, {number}))

counterbeing Over a year ago

To me, it doesn't matter as my target environment is Node with some transpilation. Should I tag my question with something to make that apparent? I kinda figured it would all fall under the ES6 tag.

Ori Drori · Accepted Answer · 2020-01-09 17:31:06Z

Use Array.flatMap() to iterate the objects, with a nested Array.map() to iterate the numbers and return an array of new objects with the relevant number. The flatMap will flatten the arrays produced by the map to a single array:

const numbers = [ 1, 2 ]
const objects = [{f: 'a'}, {f: 'b'}]

const matrix = objects.flatMap(o => // map the objects and flatten
  numbers.map( // map the numbers
    number => ({ ...o, number }) // return a new object with the number
  )
);

console.log(matrix);

Old answer:

Use nested Array#map to iterate the objects and the numbers, and Object#assign to create new objects that include the relevant number. Flatten resulting nested arrays by using the spread syntax in Array#concat:

const numbers = [ 1, 2 ]
const objects = [{f: 'a'}, {f: 'b'}]

const matrix = [].concat(... // flatten the nested arrays
  objects.map((o) => // map the objects
    numbers.map( // map the numbers
      (number) => Object.assign({}, o, { number }) // return a new object with the number
    )
  ));

console.log(matrix);

Ari · Accepted Answer · 2017-10-07 18:55:10Z

0

@Nenad is correct. You can also do it with reduce and map.

const numbers = [ 1, 2 ];
const objects = [{f: 'a'}, {f: 'b'}];

const matrix = numbers.reduce((acc, nxt) => {
	const numberedObjs = objects.map(obj => ({...obj, number:nxt}));
	acc.push(...numberedObjs);
	return acc;
}, []);

answered Oct 7, 2017 at 18:55

Ari

1,72313 silver badges21 bronze badges

Collectives™ on Stack Overflow

Using nested forEach loops to push and object to an array

Actual

Expected

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Actual

Expected

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related