Cloning JavaScript Objects

3.1.1 Shallow Copying and Property Reference Behavior

Explanation
The spread operator creates a new object by copying properties from an existing object. Only own enumerable properties are included in the copy. Primitive property values are copied independently. Nested objects continue to share references with the original. The original object remains unchanged throughout the operation.

Code / Tabular Examples

const user = { name: "Ali", age: 21 };

const userCopy = { ...user };

userCopy.age = 22;

Example
Assigning objects directly causes reference sharing.
Using spread prevents this by creating a new object.
Changes to the copied object stay isolated.
This reduces unintended data mutation.
It improves reliability in complex applications.

Use Cases

• Creating immutable object copies
  
• Protecting shared data
  
• Managing application state
  
• Reusing object templates

3.2 Merging Objects and Overriding Properties

Property Precedence and Conflict Resolution

Explanation
Multiple objects can be merged using the spread operator inside an object literal. Properties from later objects overwrite earlier ones when keys conflict. This precedence is determined by the order of spreading. No source object is modified during merging. The result is a consolidated object with predictable values.

Code / Tabular Examples

const defaults = { theme: "light", layout: "grid" };

const userSettings = { theme: "dark" };

const settings = { ...defaults, ...userSettings };

Example
Configuration objects often need controlled overrides.
Spread allows defaults to be applied first.
User-defined values can then replace them.
The order of spreading makes precedence clear.
This approach simplifies configuration management.

Use Cases

• Merging configuration objects
  
• Overriding default values
  
• Combining API response data
  
• Building flexible data models