Why doesn't profile lookup work with contacts[i].prop instead of contacts[i][prop]?

JavaScript
#1

For this exercise, this piece of code with return contacts[i][prop]; works

> function lookUpProfile(name, prop){
> 
>     // Only change code below this line
> 
>     for (var i=0;i<contacts.length;i++)
> 
>     {
> 
>         if (contacts[i].firstName===name)
> 
>         {
> 
>                 if (contacts[i].hasOwnProperty(prop))
> 
>                 {
> 
>                     return contacts[i][prop];
> 
>                 }
> 
>                 else return "No such property";
> 
>         }
> 
>     }
> 
>     return "No such contact";
> 
>     // Only change code above this line
> 
> }

but this doesnt :

> function lookUpProfile(name, prop){
> 
>     // Only change code below this line
> 
>     for (var i=0;i<contacts.length;i++)
> 
>     {
> 
>         if (contacts[i].firstName===name)
> 
>         {
> 
>                 if (contacts[i].hasOwnProperty(prop))
> 
>                 {
> 
>                     return contacts[i].prop;
> 
>                 }
> 
>                 else return "No such property";
> 
>         }
> 
>     }
> 
>     return "No such contact";
> 
>     // Only change code above this line
> 
> }

Why is this so?
I thought javascript objects could be accessed with both . operator and [ ] operator ?

#2

Because prop is a variable name, not an actual property name. You can only use dot notation with property names.

{
  id: 100
}

There is a property named id so you can get the value of the property by its name:

object.name

Using dot notation always means that the string to the right of the dot is an actual property name in the object. So when you try:

contacts[i].prop

JS is looking for a property named prop in the object.

Since prop is a variable that stores a property name, and that name is what you are really trying to find in the object, then you have to use bracket notation so JS knows that you want the value stored in prop.

contacts[i][prop]

This says to replace [prop] with the value stored in prop. So if prop is holding the string id then it would essentially become:

contacts[i].id
4 Likes
#3

To add to this, for redability purposes it is far easier to tell what is going on in this snippet then using it mixed with a period. This is because periods can also represent function calls

 someVar[dog][name]
#4

What do you mean by this?

1 Like
#5

Are you referring to a method of a class/object:

someObject.method();

This is only a function call because of the parens at the end. The dot itself does not make it a function call. Likewise, you could also do:

someObject['method']();

A little awkward, but it’s the parens at the end that make it a function call.

1 Like
#6

just strictly readability and not functionality. It’s far cleaner to review code when it’s easy to skim over and see what is happening without extra effort

#7

Maybe not everyone feels that way but when reviewing code cleanliness and readability are helpful

#8

My general recommendation is to always use dot notation when the property being accessed will not change, which would include method calls. Bracket notation is for when the property you are accessing may change based on the way your code are functions are run.

Though, like many things, when there are different valid styles, you should defer to the prevailing style used by most developers or the prevailing style used by your team of collaborators.

#9

Totally, and if you code on a team everyone has their own opinion so it may be necessary to adapt. :+1: