JavaScript property access dot notation vs brackets

Question

Other than the obvious fact that the first form could use a variable and not just a string literal  is there any reason to use one over the other  and if so under which cases   In code      Given  var foo     bar    baz        Then var x   foo  bar        vs   var x   foo bar    Context  I ve written a code generator which produces these expressions and I m wondering which is preferable

User · Answer

You have to use square bracket notation when -

The property name is number.

var ob = {
  1: 'One',
  7 : 'Seven'
}
ob.7  // SyntaxError
ob[7] // "Seven"

The property name has special character.

var ob = {
  'This is one': 1,
  'This is seven': 7,
}  
ob.'This is one'  // SyntaxError
ob['This is one'] // 1

The property name is assigned to a variable and you want to access the property value by this variable.
```
var ob = {
  'One': 1,
  'Seven': 7,
}

var _Seven = 'Seven';
ob._Seven  // undefined
ob[_Seven] // 7
```

User · Answer

Generally speaking  they do the same job  Nevertheless  the bracket notation gives you the opportunity to do stuff that you can t do with dot notation  like  var x   elem  foo         can t do elem foo      This can be extended to any property containing special characters

User · Answer

Be careful while using these notations  For eg  if we want to access a function present in the parent of a window  In IE    window  parent    func     is not equivalent to   window   parent func     We may either use    window  parent    func      or   window parent func    to access it

User · Answer

You need to use brackets if the property names has special characters   var foo          Hello  world    true    foo  Hello  world      false    Other than that  I suppose it s just a matter of taste  IMHO  the dot notation is shorter and it makes it more obvious that it s a property rather than an array element  although of course JavaScript does not have associative arrays anyway

User · Answer

Dot notation does not work with some keywords  like new and class  in internet explorer 8   I had this code     app users is a hash app users new          some code     And this triggers the dreaded  expected indentifier   at least on IE8 on windows xp  I havn t tried other environments   The simple fix for that is to switch to bracket notation   app users  new            some code

User · Answer

Let me add some more use case of the square-bracket notation  If you want to access a property say x-proxy in a object  then - will be interpreted wrongly  Their are some other cases too like space  dot  etc   where dot operation will not help you  Also if u have the key in a variable then only way to access the value of the key in a object is by bracket notation  Hope you get some more context

User · Answer

Dot notation is always preferable  If you are using some  smarter  IDE or text editor  it will show undefined names from that object   Use brackets notation only when you have the name with like dashes or something similar invalid  And also if the name is stored in a variable

User · Answer

Bracket notation can use variables  so it is useful in two instances where dot notation will not work   1  When the property names are dynamically determined  when the exact names are not known until runtime    2  When using a for  in loop to go through all the properties of an object    source  https   developer mozilla org en-US docs Web JavaScript Guide Working with Objects

User · Answer

An example where the dot notation fails  json          value   4      help   2      hello   32      data   2                a             2        2             correct console log json  value      console log json  help      console log json  help       console log json  hello       console log json  hello      console log json  data      console log json       console log json  a           wrong console log json value    console log json help    console log json hello    console log json data    console log json    console log json a           The property names shouldn t interfere with the syntax rules of javascript for you to be able to access them as json property name

User · Answer

Sourced from here    Square bracket notation allows the use of characters that can t be used with dot notation    var foo   myForm foo       incorrect syntax var foo   myForm  foo         correct syntax    including non-ASCII  UTF-8  characters  as in myForm       more examples    Secondly  square bracket notation is useful when dealing with  property names which vary in a predictable way    for  var i   0  i  lt  10  i        someFunction myForm  myControlNumber    i         Roundup         Dot notation is faster to write and clearer to read    Square bracket notation allows access to properties containing   special characters and selection of   properties using variables        Another example of characters that can t be used with dot notation is property names that themselves contain a dot   For example a json response could contain a property called bar Baz   var foo   myResponse bar Baz     incorrect syntax var foo   myResponse  bar Baz       correct syntax

User · Answer

The bracket notation allows you to access properties by name stored in a variable   var obj      abc     hello     var x    abc   var y   obj x   console log y     output - hello   obj x would not work in this case

User · Answer

The two most common ways to access properties in JavaScript are with a dot and with square brackets  Both value x and value x  access a property on value   but not necessarily the same property  The difference is in how x is interpreted  When using a dot  the part after the dot must be a valid variable name  and it directly names the property  When using square brackets  the expression between the brackets is evaluated to get the property name  Whereas value x fetches the property of value named    x     value x  tries to evaluate the expression x and uses the result as the property name   So if you know that the property you are interested in is called    length     you say value length  If you want to extract the property named by the value held in the variable i  you say value i   And because property names can be any string  if you want to access a property named    2    or    John Doe     you must use square brackets  value 2  or value  John Doe    This is the case even though you know the precise name of the property in advance  because neither    2    nor    John Doe    is a valid variable name and so cannot be accessed through dot notation   In case of Arrays  The elements in an array are stored in properties  Because the names of these properties are numbers and we often need to get their name from a variable  we have to use the bracket syntax to access them  The length property of an array tells us how many elements it contains  This property name is a valid variable name  and we know its name in advance  so to find the length of an array  you typically write array length because that is easier to write than array  length

User · Answer

Case where    notation is helpful    If your object is dynamic and there could be some random values in keys like number and   or any other special character  for example -  var a     1   3     Now if you try to access in like a 1 it will through an error  because it is expecting an string over there

[javascript] JavaScript property access: dot notation vs. brackets?

Examples related to javascript

Examples related to syntax

Examples related to object-literal