Dot Notation and Square Bracket Notation in JavaScript

In JavaScript, everything is an object. Put simply, this means that any variable can have properties which are other objects. There are two different syntaxes for accessing properties which this article explains and compares.

David Dorward

  1. Document Information

Dot-notation is most commonly used in JS to access properties of objects, which means that the property name is given after a full stop character.

For example:

Given:

<form id="myForm" action="/">
  <div><input name="foo"></div>
</form>

We can say:

var myForm = document.getElementById("myForm");
var input = myForm.foo;

Here we call the getElementById property of the document object as a function, and then we take the foo property of the form (which is the input with the name "foo").

Square bracket notation lets us do exactly the same thing, but with different syntax:

var myForm = document["getElementById"]("myForm");
var input = myForm["foo"];

This is long winded compared to dot notation, so why would we want to do something like that? There are two reasons.

First, square bracket notation allows us to use characters that we can't use with dot notation due to their having special meaning.

<form id="myForm">
  <div><label>
    <input type="checkbox" name="foo[]" value="1"> 1
  </label></div>
  <div><label>
    <input type="checkbox" name="foo[]" value="2"> 2
  </label></div>
  <div><label>
    <input type="checkbox" name="foo[]" value="3"> 3
  </label></div>
</form>

This example is destined to be sent to a PHP script and uses the standard PHP method to indicate that there are multiple controls with the same name. This requires the use of square brackets in the name of the control, so dot notation can't reference the controls.

Example with errors:

var inputs = myForm.foo[];

Square bracket notation, on the other hand, allows:

var inputs = myForm["foo[]"];

Since the square brackets are part of a string, their special meaning doesn't apply.

The second advantage of square bracket notation is when dealing with variable property names.

for (var i = 0; i < 10; i++) {
  doSomething(myForm["myControlNumber" + i]);
}

In summary:

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.

Document Information

First published: 15th of May 2007
Last update: 6th of October 2008
Prerequisite: None
Author: David Dorward
Maintained by: David Dorward