How can I have two objects access the same array

Question

Class A is instantiated to an object that has an array named this.people that is filled with a bunch of data. Class A instantiates an object of class B and this.people is passed to it's constructor. If object B updates the array, when object A updates it, it overwrites the changes from object B. How can I fix this?

Answer 1

That happens because you're passing a reference of A's people array to B's constructor. You want to make either a "shallow copy" or a "deep copy" of A's people array, since you want B's people array contents to be different.

With a "shallow copy" you copy all of the primitive values in the array to the new one, but if you have compound values (arrays or objects) inside the array, then only the reference to them will be copied, so any changes that you do to the compound values will be reflected in both A and B. With a "deep copy", both primitive and compound values (and not just their references) will be copied to a new place in memory.

If you don't have objects and arrays inside the people array, you can do a shallow copy using Array.from(a.people). Otherwise, you can do a deep copy with JSON.parse(JSON.stringify(a.people))

Snippet:

class B {
  constructor(_people) {
    // shallow copy:
    this.people = Array.from(_people);

    // deep copy:
    //this.people = JSON.parse(JSON.stringify(_people));
  }
}
class A {
  constructor() {
    this.people = [];
  }
  func() {
    this.objB = new B(this.people);
    //do something
  }
}

// Usage Example
let objA = new A();
objA.people.push("A");
objA.func();
objA.objB.people.push("B");
console.log(objA.people.toString());
console.log(objA.objB.people.toString());

Some helpful links: https://medium.com/@gamshan001/javascript-deep-copy-for-array-and-object-97e3d4bc401a

https://dev.to/samanthaming/how-to-deep-clone-an-array-in-javascript-3cig

Answer 2

Give each class its own version of people

class A{
    constructor(){
        this.people = ["bob","jane","john"]
        this.objB = new B(this.people)   
    }
}

class B{
    constructor(people){
        this.people = people
    }
}

let objA = new A()
objA.objB.people.push("a")
objA.people.push("b")
console.log(objA.people, objA.objB.people)

Answer 3

Pass the array by value with destructuring.

class Family {
  constructor(people) {
    this.people = people;
  }
}

let members = ["mom", "dad"];

let smiths = new Family(members);
let joneses = new Family(smiths.people); // pass by reference

joneses.people.push("Billy");
console.log(smiths.people); // changes to ["mom","dad","Billy"]

let wilsons = new Family([...smiths.people]); // pass by value

wilsons.people.push("Suzy");
console.log(smiths.people); // remains ["mom","dad","Billy"]