2

I am trying to figure out why console prints undefined when I use dot notation when why it prints values of each key when I use bracket notation.

What I want is to print the values of each key, so I use bracket notation. I just want to know why dot notation doesn't work.

Below is the example. 

const sunny = { mac: 'priest', dennis: 'calculating', charlie: 'birdlaw', dee: 'bird', frank: 'warthog' };

for(var key in sunny){
  console.log(sunny.key)
}

for(var key in sunny){
  console.log(sunny[key])
}

undefined
undefined
undefined
undefined
undefined
"priest"
"calculating"
"birdlaw"
"bird"
"warthog"

tk421
  • 5,775
  • 6
  • 23
  • 34
sgt.ahn
  • 99
  • 1
  • 10
  • 4
    `sunny.key` is looking for the attribute `key` itself, not it's value. – DjaouadNM May 29 '18 at 18:49
  • 3
    You could use https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects for reference, specifically the **Objects and properties** section – J. Pichardo May 29 '18 at 18:50
  • @AdamAzad Hi Adam, I am really new to JavaScript. Could you explain why key is the index? I thought for...in statements iterates enumerable **properties** – sgt.ahn May 29 '18 at 18:58
  • It has nothing to do with the for in loop, it has to do with how dot notation works. – epascarello May 29 '18 at 19:00
  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors – epascarello May 29 '18 at 19:02

4 Answers4

4
for(var key in sunny){
  console.log(sunny.key)
}

sunny.key in bracket notation is equivalent to sunny["key"]. It is searching for a property name "key" which is not there in your object.Hence returning undefined always.

key here is actually variable , not a string to extract the value of a property.

See : https://codeburst.io/javascript-quickie-dot-notation-vs-bracket-notation-333641c0f781

Yamini Chhabra
  • 1,119
  • 7
  • 9
1

When you write sunny.key you are accessing the property/field called key on the instance sunny; NOTE, this has absolutely nothing to do with the variable called key. sunny.key in your example is equivalent to sunny["key"] NOT sunny[key]. When you write sunny[key], you are telling the interpreter to get the value of the variable key at run-time, and then access the member with name equal to the value of key at the time.

The key in sunny.key is an identifier, the iterator variable of your loop is a variable. These are two different entities, and the rules of the language dictate which one you actual mean in each context.

The operator . applied to variable is a member accessor, anything that follows this will always be an identifier.

odyss-jii
  • 2,619
  • 15
  • 21
0

As said by Mr. Geek in comment, sunny.key here in essence is looking for a attribute of sunny called. Key, which is undefined If things could work this way then code like this could also work ex

Var something = { "Foo" : 123 };
Var key = "Foo";
Console.log(something.key)

I guess this example can be easily understood. And why that didn't work or rather shouldn't work

Shreyan Mehta
  • 550
  • 5
  • 17
0

In the loop key is a property which holds the each key of Object.

so when you try sunny.key it is actually looking for property name key.

when you say sunny[key] key is extract with the property of object running in loop. so this notation works.

In other words, sunny.key is equal to sunny["key"]

ngChaitanya
  • 435
  • 2
  • 8