Trying to understand backtick and the variable in a loop

So this is the lesson in question:
The very last question #2 has me iterate through an object like so:
for (let crewnames in spaceship.crew) {
console.log(${spaceship.crew[crewnames].name}: ${spaceship.crew[crewnames].degree})

Lily: Computer Engineering
Dan: Aerospace Engineering
Clementine: Physics
Shauna: Conservation Science

How does the variabl;e {crewnames} know which name to get? How does it know to get names and not degree in the first column?

The variable crewnames iterates through the nested spaceship.crew object. This object has 4 nested objects which are represented by the crewnames variable in the loop. The .name and .degree keys are accessed inside the console.log and retrieve the values associated with those keys. For example: spaceship.crew[crewnames].name will retrieve the value associated with the name key. This is expressed in the left column of the console.log. Degree is retrieved in the same way but is placed in the right column in the console.log.

The variable crewnames is a little deceiving as these are not names, but titles or roles. We have a captain, a first officer, a medic and a translator, which make up those keys of the crew object. Because the loop is iterating over these with a variable (crewnames) we are forced to use associative array syntax (bracket notation) on them but can access their explicit properties (.name, .degree) with property (dot) notation.