Brackets [] vs . syntax when accessing properties of object?

Question

Consider the following code:

    var friends = {
    bill: {
        firstName: "Bill",
        lastName:"William",
        number: "212-555-1212",
        address: ['Main Street', 'Yakama', 'WA','90012']
    },
    steve: {
        firstName: "Steve",
        lastName: "Steven",
        number: "818-555-1212",
        address: ['Any Street', 'Eureka', 'CA','90013']
    },
    betty: {
        firstName: "Betty",
        lastName: "Draper",
        number: "503-555-1212",
        address: ['Your Street', 'Madison', 'WI','90014']
    }
};

var search = function(name){
    for(var prop in friends){
        if(friends[prop].firstName === name){
           console.log(friends[prop]);
           return friends[prop];
        }
    }
};

My question is specifically regarding this portion:

if(friends[prop].firstName === name)

I want to understand the usage of the brackets around [prop] and why they are necessary in this instance. I am very familiar with dot syntax notation but not the use of these brackets.

With regards to whether or not my question is a duplicate: the question offered as preceding mine and asking the same question is actually a question of preference i.e. what are the advantages of using dot syntax vs bracket notation. My question is far more fundamental in nature and asks why use it at all and more specifically why is it necessary in the particular instance I've shown. Furthermore I do not see that my more fundamental question is answered by that other post.

A word to those who have derided me and voted down my question, called me lazy and that did not search the web or turn my head to the right: I did search the web for an answer but there are tons of web pages with various questions related but not quite or at all precisely answering my question. Furthermore, if you do not search the web with right phrases or keywords you may never find the answer you are seeking. I am not familiar with this particular syntax in JS so perhaps I was not searching with the right phrases or keywords.

The bottom line is, I asked the question in earnest to better myself as a programmer. If my only failing here is that some among you feel it a cardinal programming sin for trying to learn or for not knowing it all, that is not my problem that certain individuals who have commented here have issues with pettiness and arrogance.

That said, I do greatly appreciate those individuals who actually tried in good faith to answer my question, much appreciated.

`friends["foo"]` is the same as `friends.foo`. You use brackets when you need the property name to be variable. — millimoose, Apr 05 '13 at 23:21

score 6 · Accepted Answer · answered Apr 05 '13 at 23:21

6

By using brackets you can define the property you want to access dynamically. With the dot notation you would need to know the name of the property in the code, while with brackets you can determine it at run time.

answered Apr 05 '13 at 23:21

Jason Sperske

29,816
8
73
124

ok ... but why doesn't this work: if(friends.prop.firstName === name)? – max7 Apr 05 '13 at 23:23
2

because `friends.prop.firstName` is not the same as `friends[prop][firstName]`. For `friends.prop.firstName` to work, you would need a property named `prop` – Jason Sperske Apr 05 '13 at 23:32
Ok got it, thanks very much. With regards to how the statement is written "if(friends[prop].firstName === name)" the position of [prop] seems to me to be placed in a such a way to imitate the dot syntax notation i.e. it's drilling down into the object in the same manner to get to the property desired ... am I correct? – max7 Apr 05 '13 at 23:46
1

That is correct, prop is an object representing the property you want to (it is defined here: `for(var prop in friends){`) – Jason Sperske Apr 05 '13 at 23:59

score 3 · Answer 2 · answered Apr 05 '13 at 23:24

The contents of the brackets are an expression that's evaluated to get the property name. It allows you to use an object as an associative array.

In your code, friends[prop] evaluates the variable prop. If it's barry, then it retrieves friends.barry, if it's betty it retrieves friends.betty, and so on.

When you give a property name after ., it is treated literally, not as an expression to evaluate. So object.prop is equivalent to object["prop"].

You answer is actually very good and clear. Thanks for trying to help. — max7, Apr 06 '13 at 00:36

score 2 · Answer 3 · answered Apr 05 '13 at 23:23

2

Bracket syntax is necessary when you're using a variable to grab the key or when the key it self is a string:

var obj = { foo: 'foo', 'foo-bar': 'foo-bar' };

obj.foo // 'foo'
obj.foo-bar // error, invalid syntax
obj['foo-bar'] // 'foo-bar'

var key = 'foo';

obj.key // error not found
obj[key] // 'foo'

answered Apr 05 '13 at 23:23

elclanrs

92,861
21
134
171

Is such a key `foo-bar` even technically valid? I forget. – Lightness Races in Orbit Apr 05 '13 at 23:26
3

It is AFAIK. Object keys _can_ be strings, and strings by definition can have any character. – elclanrs Apr 05 '13 at 23:28

score 1 · Answer 4 · answered Apr 05 '13 at 23:24

1

foo.prop would be wrong because foo has no property named prop. foo[prop] works because prop evaluates to a string which is the name of foo's properties.

answered Apr 05 '13 at 23:24

David G

94,763
41
167
253

Brackets [] vs . syntax when accessing properties of object?

4 Answers4