Why is this for loop adding more nested objects than anticipated?

Question

I was answering a question on here and I figured out how to do it using map() and the spread (...) operator, but I wanted to write it in more of a imperative way. I'll show you (1) what I've written, (2) what I expected to be the outcome, and then (3) the actual outcome.

(1) What I've written:

    const arrayOfObjects = [
        { var1: 1, var2: 2 },
        { var1: 3, var2: 4 },
        { var1: 5, var2: 6 },
        { var1: 7, var2: 8 }
    ]
    
    const newArray = []
    
    const length = arrayOfObjects.length
    
    for (let i = 0; i < length; i++) {
        if (i < (length - 1)) {
            newArray.push(arrayOfObjects[i])
            newArray[i].child = arrayOfObjects[i+1]
        } else {
            newArray.push(arrayOfObjects[i])
        }
    }
    
    console.log(newArray)

(2) So the expected outcome is this:

[ { var1: 1,
    var2: 2,
    child: { var1: 3, var2: 4 } },
  { var1: 3,
    var2: 4,
    child: { var1: 5, var2: 6 } },
  { var1: 5, var2: 6, child: { var1: 7, var2: 8 } },
  { var1: 7, var2: 8 } ]

(3) But the actual outcome is this:

[ { var1: 1,
    var2: 2,
    child: { var1: 3, var2: 4, child: [Object] } },
  { var1: 3,
    var2: 4,
    child: { var1: 5, var2: 6, child: [Object] } },
  { var1: 5, var2: 6, child: { var1: 7, var2: 8 } },
  { var1: 7, var2: 8 } ]

And if you were to inspect the first index of the new array, console.log(newArray[0]) you'll see that it's added a child object all the way down:

{ var1: 1,
  var2: 2,
  child: 
   { var1: 3,
     var2: 4,
     child: { var1: 5, var2: 6, child: [Object] } } }

I feel like I'm missing something very obvious, but I can't for the life of me figure it out! Thanks in advance :)

It is because newArray[i].child = arrayOfObjects[i+1] assigns by reference. You need to create a new object and assign it. If you assign by reference, when you change newArray value, arrayOfObjects value changes too and includes child element. — Mindaugas Nakrošis
– Mindaugas Nakrošis, Commented Dec 12, 2018 at 12:08

Code Maniac · Accepted Answer · 2018-12-12 12:09:56Z

1

You need to do this

Object are assigned by reference not by value.so in order to assign value you need to create a copy of it and than assign it.

 newArray[i].child = Object.assign({},arrayOfObjects[i+1])

So here Object.assign will create a copy of arrayOfObjects.so now when you assign it will be assigned by value.

const arrayOfObjects = [
    { var1: 1, var2: 2 },
    { var1: 3, var2: 4 },
    { var1: 5, var2: 6 },
    { var1: 7, var2: 8 }
]

const newArray = []

const length = arrayOfObjects.length

for (let i = 0; i < length; i++) {
    if (i < (length - 1)) {
        newArray.push(arrayOfObjects[i])
        newArray[i].child = Object.assign({},arrayOfObjects[i+1])
    } else {
        newArray.push(arrayOfObjects[i])
    }
}

console.log(newArray)

There is one more way to do it using ... operator.

const arrayOfObjects = [
    { var1: 1, var2: 2 },
    { var1: 3, var2: 4 },
    { var1: 5, var2: 6 },
    { var1: 7, var2: 8 }
]

const newArray = []

const length = arrayOfObjects.length

for (let i = 0; i < length; i++) {
    if (i < (length - 1)) {
        newArray.push(arrayOfObjects[i])
        newArray[i].child = {...arrayOfObjects[i]};
    } else {
        newArray.push(arrayOfObjects[i])
    }
}

console.log(newArray)

edited Dec 12, 2018 at 12:09

answered Dec 12, 2018 at 12:07

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

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

2 Comments

Joss Classey Over a year ago

Thank you! This explains a lot.

Code Maniac Over a year ago

@JossClassey if it helped you can mark it as correct one :p anyways happy to help :)

Collectives™ on Stack Overflow

Why is this for loop adding more nested objects than anticipated?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related