How to Clone a JavaScript Object Without Errors

const original = { name: "Alice", age: 30 };
const reference = original;
 
reference.age = 31;
console.log(original.age); // 31 - original was mutated!

const original = { name: "Alice", age: 30, active: true };
const clone = { ...original };
 
clone.name = "Bob";
console.log(original.name); // "Alice" - original untouched
console.log(clone.name);    // "Bob"

const defaults = { theme: "light", fontSize: 14, lang: "en" };
const userPrefs = { theme: "dark", fontSize: 18 };
 
const config = { ...defaults, ...userPrefs };
console.log(config);
// { theme: "dark", fontSize: 18, lang: "en" }

const original = {
  name: "Alice",
  address: { city: "Portland", state: "OR" }
};
 
const clone = { ...original };
clone.address.city = "Seattle";
 
console.log(original.address.city); // "Seattle" - BUG! Nested object was shared

const original = { name: "Alice", age: 30, active: true };
const clone = Object.assign({}, original);
 
clone.name = "Bob";
console.log(original.name); // "Alice" - original untouched

const existing = { x: 1 };
const source = { y: 2, z: 3 };
 
// This mutates existing!
Object.assign(existing, source);
console.log(existing); // { x: 1, y: 2, z: 3 }

const original = {
  name: "Alice",
  address: { city: "Portland", state: "OR" },
  hobbies: ["reading", "hiking"],
  metadata: {
    scores: { math: 95, science: 88 }
  }
};
 
const clone = structuredClone(original);
 
// Modify the clone deeply
clone.address.city = "Seattle";
clone.hobbies.push("coding");
clone.metadata.scores.math = 100;
 
// Original is completely untouched
console.log(original.address.city);      // "Portland"
console.log(original.hobbies.length);     // 2
console.log(original.metadata.scores.math); // 95

// Works with Date, Map, Set
const data = {
  created: new Date("2026-01-01"),
  tags: new Set(["js", "web"]),
  scores: new Map([["math", 95], ["science", 88]])
};
 
const clone = structuredClone(data);
console.log(clone.created instanceof Date); // true
console.log(clone.tags instanceof Set);     // true
console.log(clone.scores instanceof Map);   // true

const original = {
  name: "Alice",
  address: { city: "Portland" },
  scores: [95, 88, 92]
};
 
const clone = JSON.parse(JSON.stringify(original));
clone.address.city = "Seattle";
console.log(original.address.city); // "Portland" - deep clone works

const data = {
  date: new Date("2026-01-01"),      // Becomes a string
  regex: /hello/gi,                  // Becomes empty object {}
  func: () => "hi",                  // Completely removed
  undef: undefined,                  // Completely removed
  nan: NaN,                          // Becomes null
  infinity: Infinity,                // Becomes null
  map: new Map([["a", 1]]),          // Becomes empty object {}
  set: new Set([1, 2, 3])            // Becomes empty object {}
};
 
const clone = JSON.parse(JSON.stringify(data));
console.log(clone.date);     // "2026-01-01T00:00:00.000Z" (string, not Date)
console.log(clone.regex);    // {}
console.log(clone.func);     // undefined (removed)
console.log(clone.undef);    // undefined (removed from object)
console.log(clone.nan);      // null

// Flat object with no nesting - use spread
const flat = { a: 1, b: "two", c: true };
const clone1 = { ...flat };
 
// Nested object with plain data - use structuredClone
const nested = { user: { name: "Alice", address: { city: "Portland" } } };
const clone2 = structuredClone(nested);
 
// Object with functions - manual clone required
const withMethods = {
  name: "Alice",
  greet() { return `Hi, I'm ${this.name}`; }
};
const clone3 = { ...withMethods }; // Spread copies the function reference
 
// Merging multiple sources - use Object.assign or spread
const merged = { ...defaults, ...overrides };

function updateUserProfile(state, updates) {
  // Deep clone the state to avoid mutating the original
  const newState = structuredClone(state);
 
  // Apply updates safely
  if (updates.name) newState.user.name = updates.name;
  if (updates.email) newState.user.email = updates.email;
 
  if (updates.address) {
    newState.user.address = {
      ...newState.user.address,
      ...updates.address
    };
  }
 
  if (updates.addSkill) {
    newState.user.skills.push(updates.addSkill);
  }
 
  newState.lastModified = new Date();
  return newState;
}
 
const currentState = {
  user: {
    name: "Alice",
    email: "alice@example.com",
    address: { city: "Portland", state: "OR" },
    skills: ["JavaScript", "React"]
  },
  lastModified: new Date("2026-01-01")
};
 
const nextState = updateUserProfile(currentState, {
  name: "Alice Johnson",
  address: { city: "Seattle" },
  addSkill: "TypeScript"
});
 
// Original state is preserved
console.log(currentState.user.name);         // "Alice"
console.log(currentState.user.address.city); // "Portland"
console.log(currentState.user.skills.length); // 2

const original = { x: 1, y: 2 };
const notACopy = original;  // This is a reference, NOT a copy
 
notACopy.x = 99;
console.log(original.x); // 99 - mutated!
 
// Fix: explicitly clone
const actualCopy = { ...original };

const state = {
  user: { preferences: { theme: "dark" } }
};
 
// WRONG - nested objects are shared
const newState = { ...state };
newState.user.preferences.theme = "light";
console.log(state.user.preferences.theme); // "light" - BUG!
 
// CORRECT - use structuredClone for deep data
const safeState = structuredClone(state);

const obj = { name: "circular" };
obj.self = obj; // Circular reference
 
// JSON method throws
// JSON.parse(JSON.stringify(obj)); // TypeError: circular
 
// structuredClone handles it correctly
const clone = structuredClone(obj);
console.log(clone.self === clone); // true (circular ref preserved)