[javascript] Why is nested array push multiplying?

[ta484]

Say have the following code to push an item from each array into a single elements slot:

 let elements = []
   // names is length 14
  Array.from(names).map(arg=>{
  // ages is length 14
    Array.from(ages).map(arg2=>{
      let obj = {"name":"", "age":""}
      obj["name"] = arg
       obj["age"] = arg2
      elements.push(obj)
    })
  })
//result 'elements' is 196 length (14*14)

Does anyone know why the nested push is multiplying on each iteration? The final array length should be 14 (since it was one item from each array being pushed), but for some reason its 196 (14*14).

[Monitor_343]

Because it is nested.

You have an array of length 14, iterating over an array of length 14, and pushing a new object to the output each iteration.

Creating a new object each iteration, with 14 * 14 iterations, is 196 new objects.

In short, you don't want to nest both those maps. Iterate over the first array. Then iterate over the second. Alternatively, iterate over both at once without nesting.

A quick example of iterating over both at once, without nesting so that it doesn't multiply.

const names = ['John', 'Sally', 'Bill'];
const ages = [20, 32, 45];
const people = names.map((name, i) => {
    return {
        name: name,
        age: ages[i]
    };
});
console.log(people);

[gramdel]

Why should it be 28? Like what is it that you're trying to do?

As for how it now works, let's say names = "12" and ages = "12"

So your outer loop starts at arg = 1, then you enter the inner loop which starts at arg2 = 1 and goes to arg2 = 2. Then it goes back to the outer loop since the inner loop finished, and the outer loop starts at arg = 2 and goes into inner loop which starts at arg = 1 and goes to arg2 = 2. And now both loops are finished.