Object.assign

Object.assign

What it is

Object.assign() copies enumerable properties from source objects to a target object. Introduced in ES6 (2015).

Before this feature

Manual property copying or libraries:

// Manual copying
function extend(target, source) {
  for (const key in source) {
    if (source.hasOwnProperty(key)) {
      target[key] = source[key];
    }
  }
  return target;
}

// Libraries like jQuery
$.extend(target, source);

After this feature

Built-in method for object merging:

// Copy to target
const target = { a: 1, b: 2 };
const source = { b: 3, c: 4 };
Object.assign(target, source);
// target = { a: 1, b: 3, c: 4 }

// Clone object (shallow)
const original = { x: 1, y: 2 };
const clone = Object.assign({}, original);

// Merge multiple sources
const obj = Object.assign(
  {},
  { a: 1 },
  { b: 2 },
  { c: 3 }
);
// { a: 1, b: 2, c: 3 }

// Default values pattern
function createUser(options) {
  const defaults = {
    role: 'user',
    active: true,
    premium: false
  };
  return Object.assign({}, defaults, options);
}

createUser({ name: 'Alice' });
// { role: 'user', active: true, premium: false, name: 'Alice' }

// Later properties override earlier
const result = Object.assign(
  {},
  { x: 1 },
  { x: 2 },
  { x: 3 }
);
// { x: 3 }

Why this is better

• Built-in: No need for libraries
• Multiple sources: Merge many objects at once
• Standard: Consistent behavior across code
• Chainable: Returns target object
• Flexible: Works with any number of sources

Key notes / edge cases

• Shallow copy only (nested objects are referenced)
• Copies enumerable own properties only
• Symbols are copied
• Getters/setters not copied (just values)
• Later sources override earlier ones
• null/undefined sources are ignored

// Shallow copy caveat
const original = {
  user: { name: 'Alice' }
};
const copy = Object.assign({}, original);
copy.user.name = 'Bob';
console.log(original.user.name); // 'Bob' - shared reference!

// Deep copy requires different approach
const deepCopy = JSON.parse(JSON.stringify(original));

// Symbols are copied
const sym = Symbol('id');
const obj = { [sym]: 123 };
const copy = Object.assign({}, obj);
console.log(copy[sym]); // 123

// Getters become values
const source = {
  get x() { return 1; }
};
const copy = Object.assign({}, source);
// copy.x is 1 (value), not a getter

// null/undefined ignored
Object.assign({}, null, { a: 1 }, undefined, { b: 2 });
// { a: 1, b: 2 }

Quick practice

1. Create a shallow copy of { name: 'Alice', age: 25 }

   Answer

   const original = { name: 'Alice', age: 25 };
   const copy = Object.assign({}, original);
   // or with spread
   const copy = { ...original };

2. Merge { a: 1, b: 2 } and { b: 3, c: 4 } without mutating

   Answer

   const merged = Object.assign({}, { a: 1, b: 2 }, { b: 3, c: 4 });
   // Result: { a: 1, b: 3, c: 4 }

3. Does Object.assign create deep copies?

   Answer

   No. It creates shallow copies. Nested objects are referenced, not copied. Use JSON.parse/stringify or libraries like lodash.cloneDeep for deep copies.