javascript - dot vs bracket notation in enumeration

Question

I do know there's some differences between dot and bracket notations but for this specific problem I am a bit confused why the dot notation wouldn't work and bracket does.

var rockSpearguns = {
  Sharpshooter: {barbs: 2, weight: 10, heft: "overhand"},
  Pokepistol: {barbs: 4, weight: 8, heft: "shoulder"},
  Javelinjet: {barbs: 4, weight: 12, heft: "waist"},
  Firefork: {barbs: 6, weight: 8, heft: "overhand"}
};

function listGuns (guns) {
    for(var speargun in guns){
        console.log("Behold! "+speargun+", with "+ guns[speargun].heft +" heft!");
    }
}

the part I am a bit confused is guns[speargun].heft this would work properly but if I do guns.speargun.heft then it will be undefined.

Since the properties in the rockSpearguns are all just one word shouldn't gun.speargun still able to call out the properties too?

I have thought a bit was the reason because now speargun is a string that if putting into gun.speargun it actually becomes something like gun."speargun" because if using bracket notation we just do gun[speargun] instead of using gun["speargun"] because this will just make it a double quote which is wrong.

Possible duplicate of [difference between dot notation and bracket notation in javascript](http://stackoverflow.com/questions/20736758/difference-between-dot-notation-and-bracket-notation-in-javascript) — Sebastian Simon, Jan 11 '17 at 15:15

score 1 · Answer 1 · answered Oct 15 '16 at 17:41

Yeah is really ambiguous, there is a rules of thumb:

use brackets when the property value to access is generated dynamically, example:

var Person = {
    name: 'John',
    lastName: 'Doe'
};

var propertyToCheck = 'name';

console.log(Person.propertyToCheck); //error!
console.log(Person[propertyToCheck]); //correct way

use dots when the property value to access is not generated dynamically(you know the property beforehand), example:
```
 var Person = {
     name: 'John',
     lastName: 'Doe'
 };

console.log(Person.name);
```

By the way, you can use brackets in both cases, but I prefer to choose what I just mentioned above because using brackets seem you are working with arrays and not with objects

Hope this helps you

Nina Scholz · Answer 2 · 2016-10-15T17:54:56.557

The equivalent of

speargun = 'Sharpshooter';
guns[speargun].heft

is

guns['Sharpshooter'].heft

or

guns.Sharpshooter.heft

because the variable in square brackets is evaluated and the content is inserted into the brackets. You get the second paragraph.

If you have a string literal, then you can use it as property accessor for the object with dots.

In your above case, you use

guns.speargun.heft

which does not exist, because you have no property speargun in the object guns.

score 1 · Accepted Answer · edited Oct 15 '16 at 18:18

It is not working because there is no speargun property in the rockSpearguns object.

The reason is that in a JS object, all property keys are strings. When you use dot notation, JS is thinking you are looking for a key with the explicit key of whatever is after the dot.

In your code var speargun is being replaced with a string value of each of the properties inside the rockSpearguns object.

So, guns[speargun].heft translates to guns["Sharpshooter"].heft

I suggest you to read this article.

javascript - dot vs bracket notation in enumeration

3 Answers3