Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Object-Oriented JavaScript (2015) Introduction to Methods Object Literal Review

Posted by Annicha Hanwilai
.a{fill-rule:evenodd;}techdegree
Annicha Hanwilai
iOS Development with Swift Techdegree Student 11,664 Points

Question about object literal: accessing a property valid and invalid way.

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

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

//B.  ------- This one is the not valid one -----------
var key = "name";
cat.key;

//C.
cat["name"];

//D.
cat.name;
  1. How does A work, and please explain A and B.
  2. Why does accessing a property of invalid variable via square brackets is OK but via dot notation isn't. How does it know what to do?

Thank you in advance.

*note: replaced screenshot with Markdown

2 Answers

miikis
miikis
44,957 Points

Hey An H,

In JavaScript, Object's properties are of the data type String. To access a property you can use array-like syntax or dot notation. The dot notation method, while more commonly used, is very picky in what it accepts. For example, it won't let you access a property if there's a space in it ("full name") — you would need to use the array-like syntax for such cases like so (cat["full name"]).

The reason number 2 is incorrect is because cat.key looks for the property called "key" in the Cat object. There is no such property in the Cat object. Cat["key"] would do the same thing.

But, number 1 is correct because it says Cat[key] (without the quotation marks) which references the variable key, which of course contains the string "name"... so it becomes Cat["name"].

Hope that helps

Annicha Hanwilai
.a{fill-rule:evenodd;}techdegree
Annicha Hanwilai
iOS Development with Swift Techdegree Student 11,664 Points

Thank you! That's very clear. I get it now. :D

Joel Pendleton
Joel Pendleton
19,230 Points
Joel Pendleton
Joel Pendleton
19,230 Points

So you're unable to access the value of the variable using dot notion?

Joel Pendleton
Joel Pendleton
19,230 Points
Joel Pendleton
Joel Pendleton
19,230 Points

So you're unable to access the value of the variable using dot notion?

miikis
miikis
44,957 Points

That's correct, Joel. So, in the following code...

var key = "name";

var Cat = {
    name : "Señor Escobar"
};

var example1 = Cat.key; //Returns:  Undefined

var example2 = Cat[key]; //Returns: "Señor Escobar"

example1 looks for a property called key in the object called Cat. The only property in Cat is name... so this returns Undefined.

example2 looks for a variable called key. Once found, it gets the value of key (which is the string "name") and looks for a corresponding property in the object Cat. Since there is a property called name in the Cat object, this returns with the value... "Señor Escobar."

Dawa Sherpa
Dawa Sherpa
1,816 Points
Dawa Sherpa
Dawa Sherpa
1,816 Points

that was helpful!

Giuseppe Ardito
Giuseppe Ardito
14,130 Points
Giuseppe Ardito
Giuseppe Ardito
14,130 Points

Ok guys, thanks for the question and the answer.

This doubt was really tormenting me!

Kenneth Kim
Kenneth Kim
3,795 Points
Kenneth Kim
Kenneth Kim
3,795 Points

Me too! Ever since I was at the 1st part of the entire JS track. Finally my mind can be at peace :)