Unlocking the Power of JavaScript Objects: A Deep Dive into Copying and Mutating

Understanding Objects in JavaScript

In JavaScript, objects are a fundamental data type that stores key-value pairs, allowing you to create complex data structures. These properties can be values of other data types, including primitive types like Boolean, Number, and undefined, or even other objects.

The Importance of Object Behavior

When you copy an object variable, you’re indirectly creating another reference to the same object in memory. This means that changing the value of the variable never changes the underlying object.

let user = { name: 'John', age: 30 };
let newUser = user;
console.log(newUser === user); // true

Copying Objects: Shallow vs Deep

JavaScript offers several ways to copy objects, but most methods only provide a shallow copy.

Shallow Copying with Object.assign()

Object.assign() is a method that copies the values and properties from one or more source objects to a target object.

const user = { name: 'John', age: 30 };
const copied = Object.assign({}, user);
console.log(copied); // { name: 'John', age: 30 }

Shallow Copying with the Spread Syntax

The spread operator is an ES2018 feature that adds spread properties to object literals.

const user = { name: 'John', age: 30 };
const copied = { ...user };
console.log(copied); // { name: 'John', age: 30 }

Deep Cloning Objects

When it comes to deeply nested objects, shallow copying methods are insufficient.

Native Deep Cloning

The HTML standard includes an internal structured cloning/serialization algorithm that can create deep clones of objects.

const v8 = require('node:v8');
const user = { name: 'John', age: 30 };
const deepCopied = v8.deserialize(v8.serialize(user));
console.log(deepCopied); // { name: 'John', age: 30 }

Other Object Cloning Methods

There are other ways to clone objects, such as iterating through each object property and copying it into a new empty object, or using JSON.parse and JSON.stringify to deep clone objects.

Conclusion

By understanding the difference between shallow and deep copying, you can ensure that your code behaves as expected.