How do you use the Object.assign() method in JavaScript?

The Object.assign() method is a built-in function in JavaScript that allows you to copy the values of all enumerable properties from one or more source objects into a target object.

It takes two or more arguments, where the first argument is the target object, and any subsequent arguments are the source objects.

Here’s a basic example to illustrate how Object.assign() works:

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const result = Object.assign(target, source);

console.log(result); // { a: 1, b: 4, c: 5 }
console.log(target); // { a: 1, b: 4, c: 5 }

In this example, we have a target object with properties a and b, and a source object with properties b and c. When we call Object.assign(target, source), the values of source.b and source.c are copied over to target.b and target.c, respectively. The resulting object, result, is the same as target because Object.assign() modifies and returns the target object.

Let’s look at a more complex example to see how Object.assign() can be used in a practical way. Suppose we have two objects representing a user’s profile: userProfile and userSettings. We want to merge these two objects into a single object, user, that contains all the properties from both objects. We’ll use Object.assign() to accomplish this:

const userProfile = {
  username: "johndoe",
  firstName: "John",
  lastName: "Doe",
  email: "johndoe@example.com",
};

const userSettings = {
  darkMode: true,
  notificationSound: "beep",
  language: "en-US",
};

const user = Object.assign({}, userProfile, userSettings);

console.log(user);
/*
{
  username: 'johndoe',
  firstName: 'John',
  lastName: 'Doe',
  email: 'johndoe@example.com',
  darkMode: true,
  notificationSound: 'beep',
  language: 'en-US'
}
*/

In this example, we start by defining two objects: userProfile and userSettings. We want to merge these two objects into a single object, user, that contains all the properties from both objects. We first create an empty object ({}) as the target object, and then pass in userProfile and userSettings as the source objects. The resulting object, user, contains all the properties from both userProfile and userSettings.

It’s important to note that Object.assign() only copies enumerable properties from the source objects, and it only copies property values, not property accessors. In addition, if multiple source objects have the same property name, the last source object in the argument list will overwrite any previous values for that property in the target object.

Here’s an example to illustrate these points:

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3, a: 4 };

const target = Object.assign({}, obj1, obj2, obj3);

console.log(target); // { a: 4, b: 2, c: 3 }

In this example, we have three source objects: obj1, obj2, and obj3. obj3 has a property named a, which has a value of 4. When we pass these objects to Object.assign(), the resulting target object has the properties a, b, and c, with values 4, 2, and 3, respectively. This is because obj3 is the last source object in the argument list, so its values overwrite any previous values for the same properties in the target object.

It’s also worth noting that Object.assign() can be used to clone an object, although there are some caveats to keep in mind. If you want to create a shallow clone of an object (i.e., a new object with the same properties and values as the original object), you can pass the original object as the target object and an empty object as the source object, like this:

const original = { a: 1, b: 2 };
const clone = Object.assign({}, original);

console.log(clone); // { a: 1, b: 2 }

In this example, we create an object called original with properties a and b. We then create a shallow clone of original using Object.assign() by passing an empty object as the target object and original as the source object. The resulting object, clone, is a new object with the same properties and values as original.

However, it’s important to note that Object.assign() only creates a shallow copy of the object. This means that if the original object contains nested objects or arrays, those objects and arrays will still reference the same objects and arrays as the original object. Here’s an example to illustrate this:

const original = {
  a: 1,
  b: {
    c: 2,
  },
};

const clone = Object.assign({}, original);

console.log(clone); // { a: 1, b: { c: 2 } }
console.log(clone.b === original.b); // true

In this example, we create an object called original with properties a and b. Property b contains another object with property c. We then create a shallow clone of original using Object.assign(). When we log clone, we see that it has the same properties and values as original, including the nested object in property b. However, when we check if clone.b is the same object as original.b using the === operator, we see that they are the same object. This is because Object.assign() only creates a shallow copy of the object, so the nested object in b is still a reference to the same object in memory as the original object.