JavaScript clone and rewrite property from existing object

In JavaScript, we work a lot with Objects, and you'll have to modify some of the object data from time to time.

Let's take the following object as our example.

const user = {
  username: 'Chris',
  online: false,
};

This user object is used to keep track of all the users and their status.

But what should we do when we want to set the online status to true, but the original one to remain false?

There are multiple good answers to this question, but I'll show you the easiest way to do this in this article.

Using the spread operator to overwrite an object property

We'll use the spread operator, which you can recognize by the three dots.

Let's say we want the status to be true. We can use the following call.

console.log({ ...user, online: true });

// { username: 'Chris', online: true }

It's a super clean syntax and easy to see which value we are overwriting.

The only thing you must remember while using this method is that the order matters.

If we, for instance, put the property we want to overwrite. First, it won't work.
This is because the latter assignments always win.

console.log({ online: true, ...user });

// { online: false, username: 'Chris' }

And that's the easiest way to overwrite an object value using JavaScript's spread operator.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Comments

[Jon Randy 🎖️]

Eh? The easiest way to overwrite a property is just to set it on the object:

user.online = true

Your examples are not overwriting the original object at all - they are creating a totally new object and overwriting the property on that. The original user object will remain unchanged

[peerreynders]

I wonder if in this context "Rewriting JavaScript object properties" might be a better way of putting it.

Strangely enough "updating" an Elixir map

%{expenses | groceries: 150, commute: 75}

or an Elm record

{ steve | name = "Wozniak" } 

creates an entirely new value as well (because everything is immutable).

[Chris Bongers]

You are completely right Jon,

I forget to mention a context where you want to keep the original existing.
I use this method for updating states that don't need to refresh in the UI (React)

Could have probably worded it a bit differently

[Alex Lohr]

The spread operator is nice if you want a shallow copy to retain immutability. Otherwise direct assignment will suffice, as Jon Randy correctly remarked.

But why immutability? It allows to compare objects by reference to detect changes, which can be a requirement for state management, e.g. for react.

[Chris Bongers]

to prevent direct state updates and await response from a backend, but see I completely missed explaining that part 😅

[Calin Baenen]

See ðe comment Jon Randy made.
Ðis doesn't overwrite ðe value, however, as peerreynders says, you might want to title it as "Easily Rewrite JavaScript object." or "Easily compose new objects in JavaScript from older ones.", good proper titling is up to you, but I feel since ðis post is tagged for "beginners" ðe title is a little misleading.

[Chris Bongers]

You're completely right, I set the title before and then changed kind of the way I decided to showcase.

Let me refactor.