Objects

How to Clone and Merge Objects

Use spread operator (...) to clone and merge objects

Quick Answer (2024 ES6+ Way)

javascript

const user = { name: 'Alice', age: 30 };
const updatedUser = { ...user, age: 31 };
console.log(updatedUser); // { name: 'Alice', age: 31 }

Live Example

javascript

const defaults = {
  theme: 'light',
  fontSize: 14,
  language: 'en'
};

const userSettings = {
  fontSize: 16,
  language: 'fr'
};

// Merge: user settings override defaults
const settings = { ...defaults, ...userSettings };
console.log(settings);

Common Variations

Deep Clone

javascript

const deepClone = JSON.parse(JSON.stringify(obj));
// Use for simple objects without functions or dates

Conditional Spreading

javascript

const config = {
  ...baseConfig,
  ...(production && { debug: false })
};

❌ Don't Do This (Outdated Way)

Avoid Object.assign() for simple cases

javascript

// DON'T DO THIS (older way, still works but spread is cleaner)
var merged = Object.assign({}, obj1, obj2);

Browser Support

✓ Works in all modern browsers (ES2018+)

#spread#objects#clone