Is spread a deep copy?

Understand the concept

Spread syntax creates a new outer object or array by copying its enumerable contents. It is a shallow copy, so nested objects are still shared references. This matters when updating React state or copying request data that another part of the application may modify.

Important ideas

• No. { ...user } copies only the first level.

• Nested objects still share references.

• Copy each changed level, or use structuredClone for supported data types.

• Changing a top-level field in the copy does not change that field in the original.

• structuredClone supports many nested data types, but not functions and not every custom object behavior.

Work through the example

const original = { address: { city: 'Surat' } };
const copy = { ...original };
copy.address.city = 'Ahmedabad';
console.log(original.address.city); // Ahmedabad

• Both outer objects still point to the same nested address object.