5.9 Cloning an Object

Building on the enumeration loop, let's focus on the specific use case of cloning an object. There are three common approaches in modern JavaScript. We'll review each, from the most verbose to the most elegant.

1. The classic for...in loop

const another = {};
for (let key in circle) {
  another[key] = circle[key];
}

This is the building-block version: declare an empty target, iterate the source's keys, copy each property with bracket notation. It works but it is verbose and easy to get wrong.

2. Object.assign

  • Takes a target object as first argument and one or more source objects after it.
  • Copies every property from the sources into the target and returns the target.
  • The target can be empty (pure clone) or pre-filled (clone + merge).
const another = Object.assign({}, circle);
const merged  = Object.assign({ color: "yellow" }, circle);

3. The spread operator

const another = { ...circle };

The spread operator (...) takes every property and method of the source object and drops them into a new object literal. It is the shortest and most readable syntax in modern JavaScript. It can also combine several sources: { ...a, ...b, extra: true }.

The key point: Object.assign copies properties from one or more sources into a target — perfect for cloning or merging. The spread operator does the same with cleaner syntax. Both perform a shallow copy: nested objects are still shared by reference. See you in the next video.

Summary

This lesson covers three techniques for cloning objects in JavaScript: iterating through properties with a for-in loop and copying them manually, using the Object.assign() method, and using the spread operator (...). The spread operator is shown as the simplest and most elegant approach for creating object clones in modern JavaScript.

Key points

  • Manual cloning involves iterating through object properties with a for-in loop and copying each property to a new object using bracket notation.
  • Object.assign() copies properties from one or more source objects into a target object—the target can be empty or pre-populated with existing properties.
  • The spread operator (...) is the most concise modern way to clone an object by expanding all its properties into a new object literal.
  • All three methods preserve both properties and methods of the source object.
  • Object.assign() and the spread operator can be used to merge multiple objects into one.

FAQ

What is the difference between Object.assign() and the spread operator for cloning?

Object.assign() takes a target object as the first parameter and source objects as additional arguments, allowing you to pre-populate the target with existing properties. The spread operator creates a new object literal and directly expands the source object's properties into it, making it simpler and more concise.

Why is manual cloning with a for-in loop considered outdated?

While the for-in loop approach works, Object.assign() and the spread operator are more concise and readable, representing modern JavaScript best practices for object cloning.

Can the spread operator be used to combine multiple objects?

Yes, the spread operator can combine properties from multiple source objects into a single new object by spreading each object within the same object literal.