JavaScript property access: dot notation vs. brackets?

  1. Home
  2. javascript
  3. JavaScript property access: dot notation vs. brackets?

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.

First 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 < 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

Second 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
}

Third 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

Reprint:https://stackoverflow.com/questions/4968406/javascript-property-access-dot-notation-vs-brackets
Spread the love

Related articles

Comments are closed.