JavaScript Concepts : Dot and Bracket Notation

📆 31 Aug 2021

Dot and bracket notation... What are they for? Why would I use one or the other? Is it even important to know the differences? How do they work? Did you know that dot and bracket notation can also be referred to as property accessors?

Beyond that tidbit, here are some other interesting things about this useful JavaScript tool.

Syntax

Let's start with the syntax. We have two options when using property accessors.

Dot . notation : object.property;

Bracket [] notation : object["property"];

The property is the key you are attempting to access within an object. Property accessors give us the ability to obtain these values. Neat!

How to choose?

🕵️‍♀️ Start by asking yourself a question : "Do I know the key names I want to access?"

If the answer is yes, use dot notation!

Because dot notation is so easy to use, go with dot notation! Unless you can't. And sometimes you just can't use the dot, because you don't know what you're looking for, or because the key has a weird name that doesn't follow the rules.

Remember, when using dot notation, one must follow the standard naming rules for JavaScript identifiers. (If you don't remember those rules, here's a refresher.)

If the answer is no, use bracket notation!

If you don't know the key names, use brackets! You can use variables to identify unknown or weird key names using the syntax object[property_name], where property_name can be represented by a string or Symbol. Because JavaScript relies upon type coercion, these values will be coerced into strings.

Dot Notation

🏁 To get some practice, let's create an object. Copy this code into your console to follow along. There is also a replit you can fork to get some practice and follow along.

const jediOne = {
  name: "Ahsoka Tano",
  homeworld: "Shili"
}

When thinking about the properties a Jedi might have, it's safe to assume they will each have a name and a homeworld, so we can use those to check out some dot notation.

🏁 Let's get the name property first. To access the value of the name property, type the following in the console: the object name, then a dot, then the word name. Or, just copy this code:

jediOne.name;

This should log the Jedi's name, Ahsoka Tano!

🌶 Try it out with the homeworld. Having trouble? Follow the example for getting the value of the name and try again. You may also be getting some hints from your console, and that's great! You can use those prompts to help you learn too.

Let's move on to bracket notation.

Bracket notation

🏁 Bracket notation can be used much like dot notation when you know the key. This code should give you the same string you accessed using the dot notation:

jediOne["name"];

Beyond matching the usefulness of dots, bracket notation gives you even more power for accessing and manipulating values dynamically. When using bracket notation, the key name does not need to be known! If a variable is created, JavaScript has the power to search an object for a matching property, and return that value if a match is found. This gives flexibility in how we interact with objects.

🏁 Let's see if we can discover the Jedi's homeworld using this power (and pretend you haven't already examined this property). Type or copy the following code in the console:

const mysteryPlanet = "homeworld";

jediOne[mysteryPlanet];

This should give you the name of Ahsoka's homeworld, Shili!

📌 Take note of the syntax when calling on a variable to do the work of the accessor -- you don't need quotations! JavaScript knows that in this example, mysteryPlanet is a variable, and it's not looking for a matching key in the jediOne object. What happens if you do include the quotations?

Adding properties with brackets

🏁 Next, let's add a new property to our jediOne object using bracket notation. To do this, you'll want to follow this example:

jediOne["jediMaster"] = "Anakin Skywalker";

Now, jediOne should have a third property!

🏁 Try adding additional properties - you can follow the same process using bracket notation, or try it with dot notation instead. 🌶 If you want to get spicy, write a function to do the work for you!

Chaining and nesting

Dot and bracket notation can also be chained or nested.

🏁 Let's add another property to jediOne to test out these tools.

jediOne.lightsabers = [
  {
    hilt: "silver",
    blade: "green",
    pair: false
  },
  {
    hilt: "silver",
    blade: "yellow-green",
    pair: false
  },
  {
    hilt: "silver",
    blade: "white",
    pair: true
  }
];

Ahsoka should now have an array of lightsabers! And we can get their values by using some fancy notation.

🏁 Try accessing the pair of white lightsabers and logging this string in the console: "Ahsoka Tano has a pair of lightsabers with white blades."

What did you come up with?

Was it this?

`${jediOne.name} has a pair of lightsabers with ${jediOne.lightsabers[2].blade} blades.`

Or maybe something else? Did you get the result you wanted! If you did, yay!!! 🎉 Keep experimenting with this object and see what else you can do. If you aren't getting the results you want, try something else. And if you're getting red in the console, follow the error messages. 🕵️‍♀️