Understanding Shallow Copy in JavaScript

Shallow copy is a fundamental concept in JavaScript, referring to the creation of a new object that copies only the first level of properties from an existing object.

Main Points

What is Shallow Copy?

• A shallow copy duplicates the immediate properties of an object.
• If the object contains references to other objects, the shallow copy will reference those same objects rather than duplicating them.

Key Characteristics

• Top-Level Only: Only the first level of properties is copied. Nested objects remain linked to the original.
• References Maintained: Changes to nested objects in the copied object will affect the original object, and vice versa.

How to Create a Shallow Copy

There are several ways to create a shallow copy in JavaScript:

Using Spread Syntax

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

Using Object.assign()

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

Example Demonstration

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

// Modifying the shallow copy
shallowCopy.b.c = 3;

console.log(original.b.c); // Output: 3
console.log(shallowCopy.b.c); // Output: 3

In this example, modifying shallowCopy.b.c also affects original.b.c because they both reference the same nested object.

When to Use Shallow Copy

• Use a shallow copy when you need a new object but are okay with shared references to nested objects.
• It is useful for maintaining performance in large objects where deep copying would be inefficient.

Conclusion

A shallow copy is a straightforward way to duplicate objects in JavaScript, but it's essential to understand its limitations regarding nested objects. Always be cautious of shared references when working with shallow copies to avoid unintended side effects.