Understand JavaScript Object References and Copying - Brief Explanation

When working with objects in JavaScript, understanding the difference between object references and object copying is crucial. Here’s a detailed overview:

Object References

1. Objects are reference types:
   • When you assign an object to a variable, you are assigning a reference to the memory location where the object is stored, not a copy of the object itself.
   • Modifying the object through one reference affects all references to the same object.

 let obj1 = { name: "Alice" }; let obj2 = obj1; // obj2 now references the same object as obj1 obj2.name = "Bob"; console.log(obj1.name); // Output: "Bob" 

1. Equality checks:
   • Two variables are equal if they reference the same object in memory, not if their contents are identical.

 let a = { key: "value" }; let b = { key: "value" }; console.log(a === b); // Output: false (different references) let c = a; console.log(a === c); // Output: true (same reference) 

Object Copying

There are two main types of object copying: shallow copy and deep copy.

1. Shallow Copy

• A shallow copy creates a new object, but it only copies the first level of properties. Nested objects or arrays are still referenced, not duplicated.

Techniques for Shallow Copy:

• Object.assign():
  

   let original = { name: "Alice", details: { age: 25 } }; let copy = Object.assign({}, original); copy.details.age = 30; console.log(original.details.age); // Output: 30 (shared reference) 

• Spread operator (...):
  

   let original = { name: "Alice", details: { age: 25 } }; let copy = { ...original }; copy.details.age = 30; console.log(original.details.age); // Output: 30 (shared reference) 

• Both methods create a shallow copy, meaning nested objects are still linked.

2. Deep Copy

• A deep copy duplicates the entire object, including nested structures. The new object is completely independent of the original.

Techniques for Deep Copy:

• JSON.parse() and JSON.stringify():
  

   let original = { name: "Alice", details: { age: 25 } }; let copy = JSON.parse(JSON.stringify(original)); copy.details.age = 30; console.log(original.details.age); // Output: 25 

  • Limitation: This method does not handle functions, undefined, Infinity, or special objects like Date or RegExp.

• StructuredClone() (Modern JavaScript):
  

   let original = { name: "Alice", details: { age: 25 } }; let copy = structuredClone(original); copy.details.age = 30; console.log(original.details.age); // Output: 25 

  • This method handles most edge cases (e.g., circular references) but is not supported in older environments.

• Custom Libraries:

  • Use libraries like lodash:

   import cloneDeep from "lodash/cloneDeep"; let original = { name: "Alice", details: { age: 25 } }; let copy = cloneDeep(original); copy.details.age = 30; console.log(original.details.age); // Output: 25 

Summary Table

Understanding these concepts helps you avoid unintended side effects when working with objects in JavaScript!