What is the difference between ( for… in ) and ( for… of ) statements in JavaScript?

Question

I know what is for... in loop (it iterates over key), but heard the first time about for... of (it iterates over value).

I am confused with

Answer 1

A see a lot of good answers, but I decide to put my 5 cents just to have good example:

For in loop

iterates over all enumerable props

let nodes = document.documentElement.childNodes;

for (var key in nodes) {
  console.log( key );
}

For of loop

iterates over all iterable values

let nodes = document.documentElement.childNodes;

for (var node of nodes) {
  console.log( node.toString() );
}