Exploring How Objects Work in JavaScript

JavaScript relies on objects as a fundamental data type, acting as the foundation for more complex data structures. When dealing with objects, it’s crucial to understand how they’re referenced and copied. In this article, we’ll break down the concepts of object reference, copying, Object.assign(), object cloning and Structured Cloning for nested object.

Photo by Polina Tankilevitch: https://www.pexels.com/photo/pictures-in-a-book-6929197/

Object Reference in Simple Terms :

In JavaScript, when you assign an object to a variable, the variable doesn’t store the actual object. Instead, it holds a reference to the object. This means that if you change something in the object through one variable, it affects all other variables referencing that object.

let originalObject = { key: 'value' };
let referenceObject = originalObject;

referenceObject.key = 'new value';

console.log(originalObject.key); // Prints: 'new value'

Here, referenceObject isn't a new object it's just pointing to the same object as originalObject. So, changes made to one affect the other.

Object Copying :

A loop technique for deep cloning involves manually iterating through the object’s properties and copying them. This technique ensures a deep copy.

let originalObject = { key: 'value', key2:'value2'};
let clonedObject = {};

for (let key in originalObject) {
         clonedObject[key] = originalObject[key];
  }

Using Object.assign() :

Object.assign() copies property values from source objects to a target object. However, it performs a shallow copy if the object is nested .It is only deep clone an object if the object is not nested.

let originalObject = { key: 'value' };
let copiedObject = Object.assign({}, originalObject);

copiedObject.key = 'new value';

console.log(originalObject.key); // Outputs: 'value'

Deep Copying an Object containing nested object :

Manually iterating recursively traverses the object, ensuring a deep copy

function deepClone(obj) {
  let clone = {};
  for (let key in obj) {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      clone[key] = deepClone(obj[key]);
    } else {
      clone[key] = obj[key];
    }
  }
  return clone;
}

let originalObject = { key: 'value', nested: { innerKey: 'innerValue' } };
let clonedObject = deepClone(originalObject);

clonedObject.nested.innerKey = 'new inner value';

console.log(originalObject.nested.innerKey); // Outputs: 'innerValue'

Using structuredClone() :

structuredClone() is an inbuilt javascript global function can be used to deep clone an object.

let originalObject = { key: 'value', nested: { innerKey: 'innerValue' } };
let clonedObject = structuredClone(originalObject);

clonedObject.nested.innerKey = 'new inner value';

console.log(originalObject.nested.innerKey); // Outputs: 'innerValue'

Conclusion :

Understanding object reference and copying is vital when working with JavaScript objects. While references optimize data management, it’s crucial to be mindful of potential side effects.