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:

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

---

Summary Table

Action	Result
Assignment (=)	Creates a reference. Changes to one variable affect the other.
Shallow Copy	Creates a new object but retains references for nested objects.
Deep Copy	Creates a completely independent object, including nested structures.

Action

Result

Assignment (=)

Creates a reference. Changes to one variable affect the other.

Shallow Copy

Creates a new object but retains references for nested objects.

Deep Copy

Creates a completely independent object, including nested structures.

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

The above is the detailed content of Understand JavaScript Object References and Copying - Brief Explanation. For more information, please follow other related articles on the PHP Chinese website!