Angular/Javascript array find method

Issue

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.

Solution

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.

Answered By - Maher