For Of ...

Mdn Defination

The for...of statement executes a loop that operates on a sequence of values sourced from an iterable object. Iterable objects include instances of built-ins such as Array, String, TypedArray, Map, Set, NodeList (and other DOM collections), as well as the arguments object, generators produced by generator functions, and user-defined iterables.

I know u didn't came here to read this 😂 let me explain you in the easiest way possible.

for...of statement executes a loop over iterable objects(i.e objects which you can loop through) , such as arrays , strings , TypedArray , map , set , NodeList .

Still confused? 😁 , yes I know, so now nail down the concept via some examples.

Example 1

const arr = [1, 2, 3];

for (const element of arr) {
  console.log(element);
}

Output

Example 2

const str =  "superman";
for (const i of str) {
    console.log(i);
}

Output

Example 3

const iterable = new Map([
    ["a", 1],
    ["b", 2],
    ["c", 3],
  ]);

 for (const [key, value] of iterable) {
    console.log(key , value);
}

Output

---

For In ...

Mdn Defination

The for...in statement iterates over all enumerable string properties of an object (ignoring properties keyed by symbols), including inherited enumerable properties.

Let me explain u 😁

The for...in statement helps you to iterate over an object(i.e key , value) and helps you to extract them.

Example 1

const object = { a: 1, b: 2, c: 3 };

for (const property in object) {
  console.log(`${property}: ${object[property]}`);
}

Output

Summary

1) for...of helps to iterate over array, String, TypedArray, Map, Set, NodeList

2) for...in helps to iterate over object

Conclusion