DEV Community

Cover image for Understand JavaScript Object References and Copying - Brief Explanation
Rinon Tendrinomena
Rinon Tendrinomena

Posted on

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"
Enter fullscreen mode Exit fullscreen mode
  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)
Enter fullscreen mode Exit fullscreen mode

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

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!

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs