JavaScript Object.assign(): Copying Object Properties Effectively

The Object.assign() method in JavaScript is a powerful and versatile tool for copying the values of all enumerable own properties from one or more source objects to a target object. It’s commonly used to merge objects, clone objects (shallowly), or update object properties. This guide will provide a detailed overview of the Object.assign() method, including its syntax, usage, and practical examples.

What is the Object.assign() Method?

The Object.assign() method is a static method of the Object class in JavaScript. It modifies the target object and returns it. The properties are overwritten if the target object already contains properties with the same keys from the source objects.

Purpose of the Object.assign() Method

The primary purposes of the Object.assign() method are:

• Merging Objects: Combining multiple objects into a single object.
• Cloning Objects: Creating a shallow copy of an object.
• Updating Object Properties: Modifying properties of a target object with values from source objects.
• Setting Default Values: Establishing default values for object properties that can be overridden by provided objects.

Syntax of Object.assign()

The syntax for the Object.assign() method is as follows:

Object.assign(target, ...sources)

Where:

• target: The target object to which the properties will be copied. This object will be modified and returned.
• sources: One or more source objects from which the properties will be copied.

Parameters

Parameter	Type	Description
`target`	Object	The target object that will receive properties from the source objects. It will be modified and returned by the method.
`sources`	Object(s)	One or more source objects containing the properties to be copied to the target object.

Return Value

The Object.assign() method returns the target object after the properties from the source objects have been copied to it.

Basic Usage of Object.assign()

The most basic use case of Object.assign() is to copy properties from one object to another.

const targetObj1 = { a: 1, b: 2 };
const sourceObj1 = { b: 4, c: 5 };

const returnedTargetObj1 = Object.assign(targetObj1, sourceObj1);

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

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

In this example, the properties from sourceObj1 are copied to targetObj1. Note that the b property in targetObj1 is overwritten by the value from sourceObj1.

Merging Multiple Objects

Object.assign() can merge multiple source objects into a single target object.

const targetObj2 = { a: 1 };
const sourceObj2a = { b: 2, c: 3 };
const sourceObj2b = { d: 4, e: 5 };

const returnedTargetObj2 = Object.assign(targetObj2, sourceObj2a, sourceObj2b);

console.log(targetObj2);
// Output: { a: 1, b: 2, c: 3, d: 4, e: 5 }

console.log(returnedTargetObj2);
// Output: { a: 1, b: 2, c: 3, d: 4, e: 5 }

Here, properties from both sourceObj2a and sourceObj2b are merged into targetObj2.

Shallow Copying

Object.assign() performs a shallow copy. If a source value is a reference to an object, it only copies the reference value.

const targetObj3 = { a: { b: 1 } };
const sourceObj3 = { a: { c: 2 } };

const returnedTargetObj3 = Object.assign(targetObj3, sourceObj3);

console.log(targetObj3);
// Output: { a: { c: 2 } }

// Modifying the source affects the target
sourceObj3.a.c = 3;
console.log(targetObj3);
// Output: { a: { c: 3 } }

In this example, the a property in targetObj3 is overwritten with the object from sourceObj3. Modifying sourceObj3.a.c also affects targetObj3.a.c because they both reference the same object in memory.

Cloning Objects

To create a clone of an object, you can use Object.assign() with an empty object as the target. This creates a new object with the properties of the source object.

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

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

// Modifying the clone does not affect the original
clonedObj4.a = 3;
console.log(originalObj4);
// Output: { a: 1, b: 2 }
console.log(clonedObj4);
// Output: { a: 3, b: 2 }

In this case, clonedObj4 is a new object with the same properties as originalObj4. Modifying clonedObj4 does not affect originalObj4. However, note that this is still a shallow copy.

Using Object.assign() for Default Values

Object.assign() is useful for setting default values for an object, which can then be overridden by other objects.

const defaultsObj5 = { a: 1, b: 2, c: 3 };
const userSettingsObj5 = { b: 4, d: 5 };

const combinedSettingsObj5 = Object.assign({}, defaultsObj5, userSettingsObj5);

console.log(combinedSettingsObj5);
// Output: { a: 1, b: 4, c: 3, d: 5 }

Here, defaultsObj5 provides the default values, and userSettingsObj5 overrides the b property and adds the d property.

Copying Symbols

Object.assign() also copies Symbol-keyed properties.

const targetObj6 = {};
const symbolObj6 = Symbol("foo");
const sourceObj6 = { [symbolObj6]: "bar" };

Object.assign(targetObj6, sourceObj6);

console.log(targetObj6[symbolObj6]);
// Output: bar

This example demonstrates that Object.assign() can copy properties with keys that are Symbols.

Copying Properties with Different Data Types

Object.assign() can handle properties with different data types, including primitives, objects, and functions.

const targetObj7 = {};
const sourceObj7 = {
  a: 1,
  b: "hello",
  c: { d: 2 },
  e: function() { console.log("Function called"); }
};

Object.assign(targetObj7, sourceObj7);

console.log(targetObj7);
// Output: { a: 1, b: 'hello', c: { d: 2 }, e: [Function: e] }

targetObj7.e();
// Output: Function called

In this example, Object.assign() copies properties with different data types from sourceObj7 to targetObj7.

Real-World Applications of Object.assign()

The Object.assign() method is used in various real-world scenarios, including:

• Configuration Management: Merging default configuration settings with user-specified settings.
• State Management: Updating application state by merging changes from different sources.
• Component Composition: Combining properties from different components into a single component.
• Data Transformation: Transforming data from one format to another by copying properties.

Practical Example: Configuration Management

Consider a scenario where you have default configuration settings for an application and you want to allow users to override these settings. You can use Object.assign() to merge the default settings with the user’s settings.

// Default configuration settings
const defaultConfig8 = {
  theme: "light",
  fontSize: 12,
  language: "en"
};

// User-specified settings
const userConfig8 = {
  theme: "dark",
  fontSize: 14
};

// Merge the default settings with the user's settings
const appConfig8 = Object.assign({}, defaultConfig8, userConfig8);

console.log(appConfig8);
// Output: { theme: 'dark', fontSize: 14, language: 'en' }

In this example, the appConfig8 object contains the merged configuration settings, with the user’s settings overriding the default settings.

Browser Support

The Object.assign() method is supported by all modern web browsers. For older browsers that do not support Object.assign(), you can use a polyfill.

Here’s a basic polyfill:

if (typeof Object.assign !== 'function') {
  Object.assign = function (target) {
    if (target == null) {
      throw new TypeError('Cannot convert undefined or null to object');
    }

    target = Object(target);
    for (var index = 1; index < arguments.length; index++) {
      var source = arguments[index];
      if (source != null) {
        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }
    }
    return target;
  };
}

Conclusion

The Object.assign() method is a valuable tool for copying properties between objects in JavaScript. It’s widely used for merging objects, cloning objects (shallowly), updating object properties, and setting default values. Understanding how to use Object.assign() effectively can greatly simplify your code and make it more maintainable. By mastering the techniques and examples provided in this guide, you’ll be well-equipped to leverage the power of Object.assign() in your JavaScript projects.