Object Manipulation (Copying, Merging, Cloning)

When working with objects in JavaScript, you often need to:

• Copy an object

• Update an object

• Merge two objects

• Clone objects safely

However, many beginners face confusion because JavaScript objects are reference types, which means copying them incorrectly can lead to unexpected results.

This chapter will help you understand the correct methods for copying and merging objects.

Reference vs Value (Very Important)

Primitive types (number, string, and boolean) are stored as values.

Objects are stored as references.

Example:

let a = 10;
let b = a;

b = 20;

console.log(a); // 10
console.log(b); // 20

Values are copied independently.

But with objects:

let obj1 = { name: "Aman" };
let obj2 = obj1;

obj2.name = "Riya";

console.log(obj1.name);

Output:

Riya

Why?
Because both obj1 and obj2 point to the same object in memory.
This is called reference copying.

1. Shallow Copy (Copy Only First Level)

Method 1: Using spread operator ...

let student1 = { name: "Aman", age: 21 };

let student2 = { ...student1 };

student2.name = "Riya";

console.log(student1.name);
console.log(student2.name);

Output:

Aman
Riya

Now student1 is not affected — this is proper copying.

Method 2: Using Object.assign()

let user1 = { city: "Delhi", pin: 110001 };

let user2 = Object.assign({}, user1);

user2.city = "Mumbai";

console.log(user1.city);
console.log(user2.city);

Output:

Delhi
Mumbai

Both spread and assign create a shallow copy.

Important Note About Shallow Copy

A shallow copy does not copy nested objects fully.

Example:

let obj1 = {
    name: "Aman",
    address: { city: "Delhi" }
};

let obj2 = { ...obj1 };

obj2.address.city = "Mumbai";

console.log(obj1.address.city);

Output:

Mumbai

Even though you used to spread, the nested object is still shared.

This is because a shallow copy copies only the first level.

2. Deep Copy (Copy Everything Including Nested Objects)

A deep copy creates a completely separate copy of the object, including its nested objects.

Method 1: Using JSON.parse + JSON.stringify

let obj1 = {
    name: "Aman",
    address: { city: "Delhi" }
};

let obj2 = JSON.parse(JSON.stringify(obj1));

obj2.address.city = "Mumbai";

console.log(obj1.address.city);
console.log(obj2.address.city);

Output:

Delhi
Mumbai

This method fully separates the nested object.

Limitations of JSON Deep Copy

• Does not copy functions

• Does not copy undefined

• Does not copy dates properly

But for normal data, it works well.

3. Merging Objects

Method 1: Using spread operator

let objA = { name: "Riya" };
let objB = { age: 20 };

let merged = { ...objA, ...objB };

console.log(merged);

Output:

{ name: "Riya", age: 20 }

Method 2: Using Object.assign()

let finalObj = Object.assign({}, objA, objB);

console.log(finalObj);

4. Updating Objects Safely

Wrong way (modifies original):

let student = { name: "Aman", age: 21 };

let updated = student; // reference copy
updated.age = 25;

console.log(student.age); // 25

The original object is changed.

Correct way:

let updated = { ...student, age: 25 };

Now student object remains safe.

5. Removing Properties

Use delete keyword:

let user = { name: "Karan", age: 22 };

delete user.age;

console.log(user);

Real-Life Example: Updating User Profile

let user = {
    name: "Aman",
    email: "[email protected]",
    address: { city: "Delhi", pin: 110055 }
};

let updatedUser = {
    ...user,
    address: { ...user.address, city: "Mumbai" }
};

console.log(updatedUser);

This avoids modifying the original object.

Example Program (All Operations)

let emp1 = {
    name: "Meera",
    salary: 30000,
    dept: { name: "IT", floor: 3 }
};

// Clone (deep copy)
let emp2 = JSON.parse(JSON.stringify(emp1));

// Modify cloned object
emp2.dept.floor = 5;

console.log("Employee 1:", emp1.dept.floor);
console.log("Employee 2:", emp2.dept.floor);

Output:

Employee 1: 3
Employee 2: 5

Common Mistakes Beginners Make

1. Thinking spread operator creates a deep copy (it doesn’t)

2. Updating a copied object but accidentally modifying the original

3. Forgetting to copy nested objects

4. Using JSON deep copy without understanding its limitations

5. Using direct assignment for copying (wrong)

Practice Tasks (Do It Yourself)

1. Create an object and make a shallow copy using spread.

2. Create a deep copy using JSON and modify nested values.

3. Merge two objects using the spread operator.

4. Create a user object and update only one field without touching the original.

5. Remove one property from an object.