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!