Difference between for ... in and for ... of

Let's assume that you have the following object:

javascript
let erik = {
    'location': 'Barcelona',
    'age': 31,
    'height': '177 cm'
}

Use a for ... in to iterate through it:

javascript
for(let key in erik){
    console.log(key)
}
// location
// age
// height

for(let key in erik){
    console.log(erik[key])
}
// Barcelona
// 31
// 177 cm

Use a for ... of loop to iterate through an array:

javascript
for(let keys of Object.keys(erik)){
    console.log(keys)
}
// location
// age
// height

for(let values of Object.values(erik)){
    console.log(values)
}
// Barcelona
// 31
// 177 cm

Or you want to iterate through Object.entries():

javascript
for(let entries of Object.entries(erik)){
    console.log(entries)
}
// ['location', 'Barcelona']
// ['age', 31]
// ['height', '177 cm']

for(let [key, value] of Object.entries(erik)){
    console.log([key, value])
}
// ['location', 'Barcelona']
// ['age', 31]
// ['height', '177 cm']