Object data is copied by reference. Consider an example:
const person = { name: "Alexander" };//create an object
const newperson = person;//let's write our object into a constant person
//check the name property of both constants
console.log(person.name); // Alexander
console.log(newperson.name); // Alexander
//change the name property of the newperson constant
newperson.name = "Nick";
//re-checking the name property of both constants
console.log(person.name); // Nick
console.log(newperson.name); // Nick
In this case, the newperson constant is getting a reference to the person constant, so after this assignment, both constants are essentially point to the same object in memory.
Method Object.assign
This method allows you to copy the properties of one object and transfer them to another object.
The Object.assign() method takes two parameters:
Object.assign(target, ...sources)
target – the object to copy the properties to
sources – set of objects to copy properties from
Returns the method of the target object, into which the properties from the sources objects are copied.
Let’s look at an example:
const person = { name: "Alexander", age: 33 };//create an object
const newperson = Object.assign({}, person);
newperson.name = "Nick";
newperson.age = 34;
When copying properties from several objects:
const person1 = { name: "Alexander" };
const person2 = { age: 33 };
const newperson = { height: 190 };
Object.assign(newperson, person1, person2);//let's write the properties and methods of the person1 and person2 objects into the newperson object
While Object.assign() works great for simple objects, what happens if the property of the object being copied
object also represents an object:
const person = { name: "Alexander", company: { title: "Microsoft" } };
const newperson = Object.assign({}, person);//copy the properties to the new person object from the person object
newperson.name = "Bob";//overwrite the name property
newperson.company.title = "Google";//overwrite the title property of the company internal object
console.log(person.name); // Here everything will happen as predicted, Alexander will bring it to the console
console.log(person.company.title); // Google will bring it to the console, although we expected Microsoft
Here, the company property of the person object represents an object with a single property. And when copied, the newperson object will get not a copy of the person.company value, but a reference to that object. Therefore, changes to newperson.company will affect and person.company.
Spread operator
The spread operator … allows you to spread an object into different property-value pairs that can be passed to another object.
const person = { name: "Alexander", age: 33, company: "Microsoft" };
const newperson = { ...person };//using the ... operator, split the object into property-value pairs and write them into a new newperson object
newperson.name = "Alexander";
In this case, the newperson object is passed copies of the properties of the person object.
If some properties of the new object should have other values (as in the example above, the name property), then they can be put at the end:
const person = { name: "Alexander", age: 33, company: "Microsoft" };
const newperson = { ...person, name: "Bob" };//after spread, we indicate the properties that need to be replaced
console.log(newperson); // {name: "Bob", age: 33, company: "Microsoft"}
if the objects contain nested objects, then these nested objects, when copied, again, in fact, will represent
references to the same object:
const person = { name: "Alexander", age: 33, company: { title: "Microsoft" } };
const newperson = { ...person }
newperson.name = "Alexander";
newperson.company.title = "Google";
console.log(`${person.name} - ${person.company.title}`); // Alexander - Google