JS dot-notation vs. bracket notation

4 min readOct 3, 2014

To access the properties (a key-value pair) of a JS object, you can use either:

[]

e.g. object.property = object[“property”]

So why do these options exist? Well dot notation is a little bit easier to read. however, it has to do with the way JS “unboxes” statements. If you use dot notation, javascript goes till this first dot and then starts to unbox the property after the dot. For instance, let’s say we have the following object:

var cat = { 
           property1: "meow",
           property2: "hiss"
          }

Sounds like most cats. Now let’s say we want to access the first property of this cat with dot notation like this:

cat.property1

javascript sees the dot, and thinks “ok, after this dot is an explicit name of a property called “property1” in this case. Let’s open up this property box and take out the value that belongs to the key “property1”. What happens is this:

cat.property1
"meow"

We get a similar result using bracket notation:

cat["property1"]
"meow"

notice how property1 and [“property1"] are treated similarly. Now let’s say we want to use a variable to either return or set a property. This is useful in loops and other applications.

Let’s make a variable called “x”.

var x = "property2"

Now, remember we have a property in our cat object with a key of “property2". If we want to get the value of this property in dot notation, we can just type:

cat.property2

This opens up the second property of cat with a key of “property2" and gives us the value like so:

cat.property2
"hiss"

Now, since we created our variable “x” to be equal to “property2", it seems like we should be able to unbox this property by saying cat.x RIGHT….?

cat.x
undefined

But why? Why undefined? Is there anyway to access a property by using a variable? Surely there must be a way! Let’s try bracket notation:

cat[x]
hiss

Great Scott— it works! But why didn’t I type quotation marks around x like I did with property1?

cat[x]
hiss
cat["property2"]
hiss

Because in a JS object, all property keys are strings. When you use dot notation, JS is thinking you are looking for a key whose value is a string of whatever is after the dot. So

cat.x

looks for a property of cat with a key of “x”. But

cat
Object {property1: "meow", property2: "hiss"}

our object cat doesn’t have a property called “x”. Now bracket notation can handle cat[x] because, as said before, the way JS interprets or “unboxes” statements. It runs along and starts to evaluate the first complete statement it encounters. It then evaluates this statement and runs along till it finds the next complete statement, which it then evaluates. Let’s illustrate by introducing another wrinkle in our code by way of a new object

var dog = {attribute1: "loving", attribute2: "trueBlue"}

Let’s also give cats a new property with the following value:

cat["loving"] = "something cat's are not"

What if we wanted to access this value of “something cat’s are not” by using the dog object? Can it be done with dot notation?

cat.dog.attribute1
TypeError: Cannot read property 'attribute1' of undefined

Dog is not an attribute of cat, so this will not work. With dot notation we can only move down an object’s property tree by way of its explicit property keys.

But this can be done with bracket notation:

cat[dog["attribute1"]]
"something cat's are not"

Javascript has seen the opening brackets, but keeps moving till it encounters the first closed bracket. Then it evaluates this statement. In our case above, after the first evaluation, we get

cat["loving"]

Next, JavaScript evaluates this statement, revealing the value stored inside the “loving” key of this cat property:

"something cat's are not"

There is something else that JS does, which we will illustrate by creating a few more variables.

var y = dog
var z = "attribute1"

Now let’s try to access the same value of cat with these variables:

cat[y[z]]
"something cat's are not"

Aha! This is useful because then we can use variables, necessary for loops and all sorts of other things.

As someone stated in a StackOverflow:

In general terms, the expression in the square brackets is evaluated and its toString() method called. It is that value that is used as the property name.

So… this was long and meandering but here’s the TLDR;

In a JS object, all property keys are strings.
Dot notation only lets you access the explicit key name of a property.
You can’t use dot notation with variables (or numbers either).
JS evaluates the first complete expression with square brackets in a statement, runs toString() on it to convert it into a string and then uses that value for the next bracket expression, on down the line till it runs out of bracket expressions.

JS dot-notation vs. bracket notation

Helpful resources:

Written by code_thoughts