3

I'm just following an online course and I'm interested as to why the tutor would have used the spread operator to update an object in an array instead of just using the object itself?

I've googled it and finding tones of information on the spread operator but not really why he went about it that way.

For example:

handleUpdate = async (post) => {
   post.title = "Updated";
   ...
   const posts = [...this.state.posts];
   const index = posts.indexOf(post);

   // why use this
   posts[index] = { ...post };

   // instead of 
   // posts[index] = post;

   this.setState({ posts });

};

I've tested with the object being set directly and it seems to work but I'm interested as to why you would use one method over the other? It is just a preference thing or it there more to it?

Thanks.

Improve this question
1
  • 2
    immutability, immutability and react and the syntax is elegant. eg: x=[1,2,3];y=[...x];z=x;y[1]=0;z[1]=5;console.log(x===y,x===z, x, y, z) Commented Jun 14, 2020 at 1:58

3 Answers 3

Reset to default
4

The main reason I can see for this is to create a shallow copy of the object, so that if you perform any operations on the copy, it won't mutate the original. This would be especially useful in a functional programming paradigm where you don't want to mutate any shared objects/maintain a shared state.

However, as I mentioned, this only creates a shallow copy (as opposed to a deep copy), so that if any of the properties of the object are themselves mutable (such as an array property), then those properties would still be able to be mutated.

Edit: From the question in the comments, and building off of what @AdiH mentioned in their answer, it doesn't seem to make any sense to update post.title before creating the shallow copy as this would mutate the original object. It's possible that the author intended for this change to be reflected in both the original and the copy, but for any further changes to be reflected only in the copy

const x = { a: 'b', c: 'd', d: [] };

const copy = { ...x };
copy.a = 'c';
console.log(x); // unchanged

const same = x;
same.a = 'c';
console.log(x); // changed

copy.d.push('e');
console.log(x); // x.d has been changed

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

3 Comments

Ah... I see. Thanks for clarifying. Makes sense now. One thing though, in the sample I posted, he modified the object that was passed to the method instead of creating a copy of it immediately as you do and then uses the "shallow" copy of the object to update the array. Does that mean that if the "post" was in a shared state, it would have been updated?
@Thierry no problem, and yeah, the original object post in that case would be updated as well as that change being reflected in the shallow copy. I'm not sure if the author had some specific reasoning behind wanting to show that the original object was also updated
It seems @AdiH just addressed that in their answer, and I agree, it doesn't seem to make any sense in that specific use case
2

I can see your confusion. I think the example is not great. One can only guess what the author had in mind but if he or she intended to enforce immutability I would not have done post.title = "Updated" since it obviously mutates post.

Instead I would have done post[index] = { ...post, title: "Updated"} see examples of JS Spread syntax.

So yes, I'm also unable to guess the motivation behind that example.

Improve this answer

Comments

1

The reason deals with the pattern of immutability. Nothing is mutated, rather a new object is created and that object is changed. It makes change detection simple.

However it's not always necessary if developer is careful.

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.