How can I merge properties of two JavaScript objects?

Several methods exist for merging properties of two objects in JavaScript, depending on specific requirements and the JavaScript version in use. I will introduce two common methods: using the Object.assign() method and the spread operator.

Method 1: Using Object.assign()

The Object.assign() method copies all enumerable own properties from one or more source objects to a target object and returns the modified target object. This method was introduced in ES6 and is supported by most modern browsers.

Example:

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

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

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

In this example, obj1 and obj2 are merged into a new empty object. If two objects share the same property (e.g., property b), the value from the later object (obj2) overrides the value from the earlier object (obj1).

Method 2: Using the Spread Operator

The spread operator (...) allows an expression to be expanded (i.e., to expand the properties of arrays or objects) within a specific context. Introduced in ES6, this approach is more intuitive and concise when writing code.

Example:

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

const mergedObj = { ...obj1, ...obj2 };

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

Here, the spread operator expands the properties of obj1 and obj2 into a new object literal. Similarly, the value of property b in obj2 overrides the value in obj1.

Summary

Both methods are widely used techniques for merging objects. The choice depends on personal preference and the context of the code. The Object.assign() method is a standard function offering greater control, such as for cloning objects or merging multiple objects. The spread operator provides a more concise way to achieve the same result, especially when merging only two objects. In real-world development, you can select the appropriate method based on specific circumstances.