Object.assign() Method

Well I guess it's cause for celebration, as this is the last in my very first blog series, based off the Syntax FM episode "20 JavaScript Array and Object Methods to make you a better developer." It's been a long, long journey that I started last November and have been able to put more time into in the past few months. I'll probably still stumble over some of the terminology or exact syntax (if I were to write any of these methods, say on a white board), but overall I'm feeling like I have a much better understanding for what these methods can do and when I might want to use them.

Of course, this series isn't an exhaustive list of Array or Object methods, and I'll continue to write about those as I learn about them or they arrive in spec. But this has been a great exercise in focusing on some very basic JavaScript capabilities. And so to round it out, let's take a look at Object.assign().

Object.assign() is another way to copy the values of enumerable properties from one or more JavaScript data objects into another one.

const person = {  name: "Joey Reyes",  age: 31,  hungry: false,};
const attributes = {  location: "Austin",  hungry: true,};
const fullPerson = Object.assign(person, attributes);console.log(fullPerson);// expected result:// {//   name: 'Joey Reyes',//   age: 31,//   hungry: true,//   location: 'Austin'// }

As might be expected, if a property already exists within the target object, then it will be overwritten by a property of the same name that exists within the object you're copying into the target. I'm sure you're thinking, Object.assign() sounds and behaves really similarly to Object Spread. And you're right! The following works the same as the code above:

const person = {  name: "Joey Reyes",  age: 31,  hungry: false,};
const attributes = {  location: "Austin",  hungry: true,};
const fullPerson = { ...person, ...attributes };console.log(fullPerson);// expected result:// {//   name: 'Joey Reyes',//   age: 31,//   hungry: true,//   location: 'Austin',// }

So what is the difference? Well, to me they appear the same, and in fact the spec states { ...obj } is equivalent to Object.assign({}, obj). For my money and in most use cases, Object Spread just looks more readable to me and will likely be the thing that I use.

However, this article by Valeri Karpov points out that because Object.assign() modifies an object in place, that method can make use of ES6 setters. Valeri further points out:

Object.assign() modifies an object in place, and so it can trigger ES6 setters. If you prefer using immutable techniques, the object spread operator is a clear winner. With Object.assign(), you would have to ensure you always pass an empty object as the first argument.

Since I'm not super familiar (yet?) with getters and setters, I will also leave here the example code Valeri gave to accompany the above explanation:

class MyClass {  set val(v) {    console.log("Setter called", v);    return v;  }}const obj = new MyClass();
Object.assign(obj, { val: 42 });// Prints "Setter called 42"

My understanding here is that Object Rest is not capable of printing that console.log out. More for me to learn!

From MDN: The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.

See more examples and documentation here.