5.8 Enumeration of properties of an object

Now that we know objects inside out, let's see how to enumerate their properties. The classic tool is the for...in loop combined with bracket notation. At each iteration we receive the key of one property and we read the matching value with object[key].

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

This is exactly what we'd do if we wanted to clone an object the old-fashioned way: walk every property and copy it into a new object. The new object holds the same radius property and the same draw method as the original.

Modern alternatives

• Object.assign(target, source) — copies all properties from one or more source objects into a target. With an empty target, it acts as a one-line clone.
• { ...circle } — the spread operator, the cleanest way to clone an object literal.
• Both let you also pre-fill or override properties, like Object.assign({ color: "yellow" }, circle).

const another = Object.assign({}, circle);
const clone   = { ...circle };

Whichever syntax you pick, the idea is the same: enumerate the keys of an object and decide what to do with each one. In the next video we'll look more closely at cloning an object and what these techniques mean in practice.

Summary

This lesson demonstrates how to enumerate object properties and use that technique to clone or copy objects in JavaScript. It covers three approaches: the traditional for...in loop for manual copying, the modern Object.assign() method for shallow copying, and the spread operator for the most concise syntax. Each method allows you to duplicate object properties and methods, or combine multiple objects into a single object.

Key points

• Use a for...in loop with bracket notation to iterate through all properties of an object and copy them to a new object
• Object.assign() method copies properties from one or more source objects into a target object and returns the result
• The spread operator (...) provides the simplest and most elegant way to clone an object by spreading its properties into a new object literal
• The target object in Object.assign() can be empty or pre-populated with existing properties and methods that will be merged with source properties
• All three approaches create shallow copies of objects, spreading properties and methods from the source into the new or target object

FAQ

What is the difference between using for...in loop, Object.assign(), and the spread operator?

The for...in loop requires manual iteration and assignment (older approach), Object.assign() is more concise and allows multiple sources to be merged, while the spread operator is the simplest and most modern syntax, making it the preferred choice in contemporary JavaScript.

Can I add new properties while cloning an object with Object.assign()?

Yes. When passing a target object to Object.assign(), you can pre-populate it with properties like {color: 'yellow'}, and those properties will be merged with the properties copied from the source object.

Why is cloning objects useful?

Cloning allows you to create independent copies of objects, avoiding unintended mutations of the original, and provides a way to combine properties from multiple objects into a single new object.