Wrong approach to dot notation?

Question

I have a object that looks like this:

var obj = {
   Laser: [0, 2],
   Missile: [4, 4]
}

using literal notation, i can access the properties just fine:

for (prop in obj){
console.log(prop + " scored " + obj[prop][0] + " out of " + obj[prop][1] + " shots.");

Why cant the same be said using dot-notation like this ?

for (prop in obj){
console.log(prop + " scored " + obj.prop[0] + " out of " + obj.prop[1] + " shots.");
-> error

thanks in advance

Answer 1

Because these two examples are not the same. The first one is ok:

prop == "Laser"
obj[prop] == obj["Laser"]
obj["Laser"][0] === 0

prop == "Missile"
obj[prop] == obj["Missile"]
obj["Missile"][0] == 4

In the second one you are trying to access "prop" property, which is undefined:

obj.prop == obj["prop"]
obj["prop"] === undefined
obj["prop"][0] // TypeError: Cannot read property "0" of undefined

And, btw, this has nothing to do with JSON.

Answer 2

When using dot notation, the prop in this case looks for an actual key named prop on the object, which it doesn't have. Take a look at this post for a more in depth difference between dot and bracket notation https://stackoverflow.com/a/20736772/3421811

Answer 3

I highly recommend you this awesome reading

Here is the quote from the Accessing Properties chapter:

The notations work almost identically, with the only difference being that the square bracket notation allows for dynamic setting of properties and the use of property names that would otherwise lead to a syntax error.

With the sample from this source:

var foo = {name: 'kitten'}
foo.name; // kitten
foo['name']; // kitten

var get = 'name';
foo[get]; // kitten

foo.1234; // SyntaxError
foo['1234']; // works

Answer 4

I think it will be most simple to replace the variables with constants to see what is actually going on in each loop:

The first loop:

for (prop in obj){
    console.log(prop + " scored " + obj[prop][0] + " out of " + obj[prop][1] + " shots.");
}

Iteration 1:

console.log("Laser" + " scored " + obj["Laser"][0] + " out of " + obj["Laser"][1] + " shots.");

Iteration 2:

console.log("Missile" + " scored " + obj["Missile"][0] + " out of " + obj["Missile"][1] + " shots.");

The second loop:

    for (prop in obj){
console.log(prop + " scored " + obj.prop[0] + " out of " + obj.prop[1] + " shots.");
-> error

Iteration 1:

console.log("Laser" + " scored " + obj["prop"][0] + " out of " + obj["prop"][1] + " shots.");

Iteration 2:

console.log("Missile" + " scored " + obj["prop"][0] + " out of " + obj["prop"][1] + " shots.");

By using dot notation you are asking to look for a property named prop on the obj. This is obviously not what you are after.

So these are equivalent:

1. obj.prop
2. obj["prop"]

Answer 5

Simply put, prop is a string form of the property name. obj.prop in a for ... in is the same as doing obj.'Missile'.

The bracket method uses a string and compares that string with the names of the object's properties. If you don't use a string inside the brackets it will look for a variable named Missile and return a reference error because there isn't one.

var obj = {
  Laser: [0, 2],
  Missile: [4, 4]
}

function log(input) {
  setTimeout(function() {
    console.log(input);
  }, 1000);
}

log(obj['Missile']); // [4, 4]
log(obj.Missile); // [4, 4]
log(obj[Missile]); // Looks for a variable called Missile. Doesn't find it. ReferenceError: Missile is not defined
// log(obj.'Missile'); // Invalid string placement. SyntaxError: Unexpected string