js: valid ways to access a property of an object

The image you are linking to is not actually accessible, but based on your title I'm guessing your referring to this question from the "Object Literal Review" quiz:

Which of these is NOT a valid way to access a property, "name", on an object?

//A
var key = "name";
cat[key];

//B
var key = "name";
cat.key;

//C
cat["name"];

//D
cat.name;

The order the answers appear in is randomized each time the quiz is taken, so I don't know exactly which of these options showed as "B" to you, but I'm going to guess that it was the option listed as "A" in the code above. As that is the option most likely to cause confusion.

When you use dot notation to access a property (like cat.name) JavaScript will treat the text you write after the dot as the literal name for the property you are looking for. When you use bracket notation however (like cat[key]) JavaScript will not treat the text as the name, but rather evaluate it like regular code, and it expects to be passed a string. That means that if you write in a word like key JavaScript will look for a variable called key, and then pass in the contents of that variable.

Basically if you had code like this:

var key = "name";
console.log(key);

What would be printed out? name or key? The answer is of course name, because JavaScript prints the string that the variable holds, not what the variable is named. The exact same holds true when the variable is used with bracket syntax for objects.

So when JavaScript encounters cat[key] in the above code it looks at the string contained in key and uses that as the name of the property it should access. Which is name in the above code, and that results in the name property being accessed.

If I made a wrong assumption about what question or option confused you, or you found my explanation unclear then please post a reply clarifying exactly what confused you, and I'll do my best to clarify.