for...in vs for...of

ES6 introduced the `for...of` loop, and it's important to understand how it differs from the older `for...in` loop. The `for...in` loop iterates over the enumerable properties of an object. It gives you the *keys* (or property names) of the object, not the values. While you can use it on arrays, it's generally discouraged because it can iterate over unexpected properties (like those on the `Array.prototype`) and the order of iteration is not guaranteed. Its primary use case is for iterating over the properties of a plain object. In contrast, the `for...of` loop was designed to iterate over *iterable* objects, such as `Array`, `String`, `Map`, `Set`, etc. It gives you the *values* of the iterable directly, making the code much cleaner and more direct than a traditional `for` loop with an index. For example, when looping over an array, `for...of` will give you each element of the array in sequence. Because it works on any iterable, it provides a unified way to loop over various data structures. In modern JavaScript, you should prefer `for...of` for iterating over arrays and other iterables, and use `for...in` specifically when you need to inspect the keys of an object.