Angular/Javascript array find method-CodePudding

I have started to learn angular recently. I came across a code as follows. Consider this.members as an array of objects. There is an object which has the username bob. I am trying to get that particular object using the below code.

const data = this.members.find(x=>x.userName===username);

So there an object inside the array and I have an object stored in my const data, My doubt is that will both (the object in the array and the object in the const data ) have the same memory address. If someone could answer why changing the const data is also getting reflected in the this.members array. It would be a great help. You can also share some resources if I need to go through them to understand them better.

CodePudding user response：

To shortly answer your question, yes. The data object will have a reference to the object inside this.members.

If you want to prevent that, there are multiple ways I'm sure, but one of them is to use Object.assign.

Example:

let data: any = {};
Object.assign(data, this.members.find(u => u.username === 'bob'));
console.log(this.members); // For example: [{username: 'bob'},{username: 'randy'}]

data.username = 'alex';

console.log(this.members); // Still shows [{username: 'bob'},{username: 'randy'}]
console.log(data); // {username: 'alex'}

Notice here that I am using TypeScript since you mentioned you're working with Angular.
When using Object.assign, a copy of the enumerable properties will be made and assigned to your variable without referencing the source.

See MDN Docs for more details.

Another simple way is to use the spread operator.

let data: any = {};
const foundUser = this.members.find(u => u.username === 'bob');
if (foundUser) {
  data = {...foundUser};
}

This will create a new object with the properties from the foundUser.

CodePudding user response：

You can easily try it out.

const members = [
  { username: 'bob' },
  { username: 'daniel' },
];

const data = members.find(x=>x.username==='bob');

data.username = 'bobby';

console.log(members);

That prints

[ { "username": "bobby" }, { "username": "daniel" } ]

So yes, changing data will change the array.

CodePudding user response：

The answer for this question is that Arrays in javascript are mutable which means they are reference type which means when I encounter the below line

const data = this.members.find(x=>x.userName===username);

const data will have the same memory location as that of bob in the array. As we all know that if we change data at a memory location every variable/object referring to that memory location will also change as they all point to the same memory location. Hence the array gets updated even though I assign a part of the array and make changes to that part alone.

Note: The above was my expected behavior. if you want the opposite behavior like if you need the const data and this.members to independent you can

Copy Array

or you can refer to Maher's answer in the same page.