Javascript (Typescript) nested for-loop updating all elements, not just the inner loop

Question

When using for-loop in Typescript, for some reason the for loop updates the whole array. Here is the code:

UpdatesToAllSelectedTabs() {

    if (this.selectedOuterTabs[1]) {
        this.outerTabs[1].InnerTabs = this.outerTabs[this.referencedOuterTab].InnerTabs;
        for (let j = 0; j < this.outerTabs[1].InnerTabs.length; j++) {
            this.outerTabs[1].InnerTabs[j].OuterTabId = this.outerTabs[1].Id;
        }
    }
}

The first version of the code had also the outer loop, but it also doesn't work proper with the fixed outer index ( in example above = 1). What this piece of code does, is the following:

If selected, copies the innerTabs from the referenced outerTab[0] to outerTab[1]. Which is ok. Then, it sets the ...innerTabs[j].OuterTabId from both outerTabs[1] and outerTabs[0] to the this.outerTabs[1].Id.

Can someone please explain what is happening here? Why are the outerTab[0] also updated?

Nitzan Tomer · Accepted Answer · 2016-11-30 08:36:31Z

1

From this line:

this.outerTabs[1].InnerTabs = this.outerTabs[this.referencedOuterTab].InnerTabs;

It seems that this.outerTabs[1] is referencing the same object as this.outerTabs[this.referencedOuterTab], so if you change one you change the other one as well.

A simpler example of the problem:

let arr1 = [{ key: "value1" }, { key: "value2" }, { key: "value3" }];
let arr2 = new Array(...arr1);

console.log(arr1[1]); // {key: "value2"}
console.log(arr2[1]); // {key: "value2"}

arr2[1].key = "value2.2"

console.log(arr1[1]); // {key: "value2.2"}
console.log(arr2[1]); // {key: "value2.2"}

(code in playground)

To fix that you need to assign different instances, for example using Object.assign:

this.outerTabs[1].InnerTabs = Object.assign({}, this.outerTabs[this.referencedOuterTab].InnerTabs);

In my example:

let arr1 = [{ key: "value1" }, { key: "value2" }, { key: "value3" }];
let arr2 = new Array(Object.assign({}, arr1[0]), Object.assign({}, arr1[1]), Object.assign({}, arr1[2]));

console.log(arr1[1]); // {key: "value2"}
console.log(arr2[1]); // {key: "value2"}

arr2[1].key = "value2.2"

console.log(arr1[1]); // {key: "value2"}
console.log(arr2[1]); // {key: "value2.2"}

(code in playground)

answered Nov 30, 2016 at 8:36

Nitzan Tomer

166k51 gold badges330 silver badges307 bronze badges

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

1 Comment

Mkov Over a year ago

Thanks. In my full example Object.assign didn't work, but it got me on the right track. I cloned the this.outerTabs[this.referencedOuterTab].InnerTabs and then the code behaved as it should have.

Collectives™ on Stack Overflow

Javascript (Typescript) nested for-loop updating all elements, not just the inner loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related