JavaScript Object Copying Guide: Shallow vs Deep Copying Techniques Explained

Introduction

Understanding how to effectively copy objects in JavaScript is a fundamental skill for any developer. Whether you’re building complex data structures or simply passing data between functions, object copying is essential. In this guide, we’ll explore the intricacies of shallow and deep copies, exploring their differences, use cases, and implementation techniques. By the end, you’ll have a solid grasp of object copying and be able to confidently choose the appropriate method for your specific needs.

Shallow Copy

A shallow copy creates a new object but shares references to the original object’s properties. This means that changes made to the copied object will also affect the original object. While efficient, shallow copies can lead to unexpected behavior if not used carefully.

How Shallow Copies Work:

When you perform a shallow copy, a new object is created, and its properties are assigned the same values as the original object’s properties. However, these values are actually references to the original object’s data. As a result, any modifications to the copied object’s properties will also affect the original object.

Creating Shallow Copies:

JavaScript provides two primary methods for creating shallow copies:

1. Object.assign():

const originalObject = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, originalObject);

This method creates a new object and copies the enumerable own properties from one or more source objects to the target object.

2.  Spread Operator:

const originalObject = { a: 1, b: { c: 2 } };
const shallowCopy = { ...originalObject };

The spread operator creates a new object and copies the enumerable own properties from the right-hand side object to the left-hand side object.

Use Cases for Shallow Copies:

Shallow copies are suitable when you need to create a new object that shares some properties with the original object, but you don’t expect to modify those shared properties. For example, creating a configuration object based on a default configuration.

Deep Copy

A deep copy creates a new object and recursively copies all properties, including nested objects and arrays. This ensures that changes made to the copied object do not affect the original object.

How Deep Copies Work:

To achieve a deep copy, you need to create a new object and recursively copy all properties, including nested objects and arrays. This process involves creating new instances of each object and array, effectively isolating the copied data from the original.

Creating Deep Copies:

There are several methods for creating deep copies:

1. JSON.parse(JSON.stringify()):

const originalObject = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(originalObject));

This method serializes the original object into a JSON string and then parses it back into a new object. While simple, it has limitations, such as not handling functions, undefined values, and circular references.

2. Lodash cloneDeep():

const _ = require('lodash');
const originalObject = { a: 1, b: { c: 2 } };
const deepCopy = _.cloneDeep(originalObject);

Lodash provides a robust cloneDeep function that handles complex object structures, including circular references and custom objects.

Assigning Properties to Objects

In addition to creating copies, you often need to assign properties to existing objects. JavaScript provides several ways to achieve this:

1. Direct Assignment:

const object = {};
object.property1 = 'value1';
object['property2'] = 'value2';

2. Object Literal:

const object = {
    property1: 'value1',
    property2: 'value2'
};

3. Object.assign():

Object.assign() can be used to create a new object based on an existing one while also adding new properties to it.

const object = {};
Object.assign(object, { property1: 'value1', property2: 'value2' });

Use Cases for Deep Copies:

Deep copies are essential when you need to create an independent copy of an object and its nested structures. This is common in scenarios where you want to modify the copied object without affecting the original, such as passing data to functions or storing data in state management.

Feature	Shallow Copy	Deep Copy
Object Creation	Creates a new object	Creates a new object and recursively copies properties
Property Values	References original object’s properties	Creates new instances of properties
Performance	Generally faster	Slower due to recursive copying
Use Cases	Sharing properties without modification	Independent copy of object and nested structures

Advanced Techniques

While Object.assign, spread operator, JSON.parse(JSON.stringify), and lodash cloneDeep are commonly used for object copying, there are other techniques to explore:

• Custom Cloning Functions: You can create your own cloning functions to handle specific object structures or perform additional logic during the copying process.
• structuredClone: This experimental API provides a way to create structured clones of objects, including support for more complex data types.

Custom Cloning Functions

A custom cloning function is a function that you write yourself to copy objects in a specific way. This can be useful if you need to copy objects that have specific properties or methods, or if you need to perform additional logic during the copying process.

Here is an example of a custom cloning function that copies objects recursively:

function cloneObject(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }

  const newObj = Array.isArray(obj) ? [] : {};

  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = cloneObject(obj[key]);
    }
  }

  return newObj;
}

This function takes an object as input and returns a new object that is a deep copy of the original object. The function recursively copies each property of the object, including nested objects and arrays.

Structured Clone

The structuredClone function is an experimental API that provides a way to create structured clones of objects. This can be useful if you need to copy objects that have specific properties or methods, or if you need to perform additional logic during the copying process.

Here is an example of using the structuredClone function to copy an object:

const originalObject = {
  name: 'John Doe',
  address: {
    street: '123 Main St',
    city: 'New York',
    state: 'NY'
  }
};

const clonedObject = structuredClone(originalObject);

This code will create a new object called clonedObject that is a deep copy of the original object. The structuredClone function can also be used to copy functions and other complex data types.

Additional Considerations

When using custom cloning functions, it is important to consider the performance implications of your function. Recursive functions can be slow for large objects, so it is important to optimize your function for performance.

The structuredClone function is still an experimental API, so its support may vary between browsers. It is important to test your code with different browsers to ensure compatibility.

Best Practices

• Understand the difference between shallow and deep copies.
• Choose the appropriate copying method based on your specific requirements.
• Be aware of performance implications, especially when dealing with large objects.
• Consider using immutable data structures to avoid accidental modifications.
• Test your code thoroughly to ensure correct object copying behavior.

Conclusion

Mastering object copying in JavaScript is crucial for building robust and efficient applications. By understanding the concepts of shallow and deep copies, you can effectively manage object data and prevent unexpected side effects.Experiment with different techniques, consider performance implications, and follow best practices to optimize your object copying strategies.

Share the article with your friends

• Facebook
• LinkedIn