How to duplicate Javascript object properties in another object?

In JavaScript, objects are collections of key-value pairs where properties are identified by string keys. There are several ways to duplicate object properties from one object to another, each with different characteristics for handling nested objects and references.

Using Spread Operator (...)

The spread operator creates a shallow copy of an object by spreading its enumerable properties into a new object. It's represented by three dots (...) and is the most modern and readable approach.

Example 1

This example demonstrates how the spread operator copies objects in JavaScript:

var employee = {
   emp_name: "Abdul Rawoof",
   company: "Tutorials Point",
   salary: 18000,
   job: "Software Engineer-Intern"
}
console.log("The original object employee is:", employee)
var cpyEmployee = {...employee}
console.log("The copied object cpyEmployee is:", cpyEmployee);

The original object employee is: { emp_name: 'Abdul Rawoof', company: 'Tutorials Point', salary: 18000, job: 'Software Engineer-Intern' }
The copied object cpyEmployee is: { emp_name: 'Abdul Rawoof', company: 'Tutorials Point', salary: 18000, job: 'Software Engineer-Intern' }

Note: The spread operator performs a shallow copy. For objects with nested objects, you'll need additional techniques for deep copying.

Using Object.assign() Method

The Object.assign() method copies enumerable properties from source objects to a target object. Like the spread operator, it performs a shallow copy but provides more explicit control over the copying process.

Syntax

Object.assign(target, ...sources)

Example 1: Creating a Copy

Here we create an object and copy its contents into a new object, then modify the copy:

var employee = {
   emp_name: "Abdul Rawoof",
   company: "Tutorials Point",
   salary: 18000,
   job: "Software Engineer-Intern"
}
console.log("The original object employee is:", employee)
var cpyEmployee = Object.assign({}, employee)
console.log("The copied object cpyEmployee is:", cpyEmployee);
cpyEmployee.emp_name = "Jason"
cpyEmployee.job = "Content writer-Intern"
console.log("The copied object with changes:", cpyEmployee)
console.log("Original object unchanged:", employee)

The original object employee is: { emp_name: 'Abdul Rawoof', company: 'Tutorials Point', salary: 18000, job: 'Software Engineer-Intern' }
The copied object cpyEmployee is: { emp_name: 'Abdul Rawoof', company: 'Tutorials Point', salary: 18000, job: 'Software Engineer-Intern' }
The copied object with changes: { emp_name: 'Jason', company: 'Tutorials Point', salary: 18000, job: 'Content writer-Intern' }
Original object unchanged: { emp_name: 'Abdul Rawoof', company: 'Tutorials Point', salary: 18000, job: 'Software Engineer-Intern' }

Example 2: Merging Objects

Object.assign() can also merge properties from multiple source objects into a target object:

const targetObj = { a: 1, b: 2 };
const sourceObj = { b: 4, c: 5 };
const returnedTarget = Object.assign(targetObj, sourceObj);
console.log("Target object (modified):", targetObj);
console.log("Returned target:", returnedTarget);
console.log("Are they the same reference?", returnedTarget === targetObj);
console.log("Source object (unchanged):", sourceObj);

Target object (modified): { a: 1, b: 4, c: 5 }
Returned target: { a: 1, b: 4, c: 5 }
Are they the same reference? true
Source object (unchanged): { b: 4, c: 5 }

Comparison

Conclusion

Both spread operator and Object.assign() provide effective ways to duplicate object properties. The spread operator offers cleaner syntax for creating copies, while Object.assign() provides more flexibility for merging multiple objects and controlling the target object.