0

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.

Improve this question
2
  • If someone could answer this You did explain the situation but please, make sure to ask an actual question (with a ?). Commented Oct 18, 2022 at 7:16
  • Hi Mike, I have updated the question. Sorry for the inconvenience. Hope this time it's clear. I have found the answer, Thanks for your timely response👍 Commented Oct 18, 2022 at 9:15

3 Answers 3

Reset to default
2

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.

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

1 Comment

Thank you so much, Maher. That was so wonderfully answered. You also gave some additional information that was so good of you. Keep up the good work
2

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.

Improve this answer

1 Comment

Thanks a lot, Moxxi. That was so helpful
0

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 be independent you can use

Copy Array

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.