This is a demonstration of how to use the for...in and for...of loops in JavaScript to iterate over an object. It shows the difference between the two loops, and explains why for...of is the best way to loop over an object.

object_loop.js

const car = {engine: true};
const sportsCar = Object.create(car);
sportsCar.speed = 'fast';

console.log('The sportsCar object: ', sportsCar);
// Output: The sportsCar object:  { speed: 'fast' }

// It loops over all the enumerable properties of the object,
// including those from its prototype chain.
for (const prop in sportsCar) {
    console.log(`This is for in loop ${prop}, ${sportsCar[prop]}`);
}
// Output:
// This is for in loop speed, fast
// This is for in loop engine, true


// It only iterates over the object’s own properties, not the inherited ones.
for (const prop of Object.keys(sportsCar)) {
    console.log(`This is for of loop ${prop}, ${sportsCar[prop]}`);
}
// Output:
// This is for of loop speed, fast