I do not get how this works.

Take a break :)

Any object consists of what we call key/value pairs. In the object below, the keys are "firstName" and "lastName" and their respective values are "Wil" and "Smith"

var yourObject = {
  firstName: "Wil",
  lastName: "Smith"
}

A for in loop lets you loop over these. Below and in the video the word key is used, but it's essentially just a variable you've just declared. You could also write var item in yourObject and console.log item and it'd still work.

for (var key in yourObject) {
  console.log(key)
  // logs "firstName" and "lastName"
}

The above just logs the keys, that's where the brackets come in. On a regular object, if you do something like: console.log(yourObject["firstName"]), you would be accessing the "firstName" property on the object and logging it's value. You can apply the same in the loop:

for (var key in yourObject) {
  console.log(yourObject[key])
  // logs "Wil" and "Smith"
}

Since your loop is already returning the key each time it runs, you can just say, get me yourObject and console.log the value of the current key.

I put the above in a jsfiddle, run it and have a look in the console. https://jsfiddle.net/u9c7p1un/6/

Object keys are essentially strings in JavaScript. So the first time the loop runs, var is essentially set to var key = "firstName" and you're just passing the variable to access the value. So in that first loop yourObject[key] is the same as yourObject["key"]