JS: Dot and Bracket Notation

Learning Goals

• Use dot and bracket notation to access values within JavaScript objects
• Compare expressions in dot and bracket notation and identify equivalent expressions
• Determine appropriate use cases for each notation
• Apply our knowledge of each notation to gain a deeper understanding about a familiar concept
• Compare similar concepts in Ruby

Vocabulary

• Object An unordered collection of related data in the form of key-value pairs. JavaScript provides two notations for accessing object properties…
• Dot Notation A property in an object is accessed by giving the object’s name, followed by a period, followed by the property name (i.e. user.name)
• Bracket Notation The object name is followed by a set of square brackets, with the property name specified inside the brackets via either a string (i.e. user['name']), or a variable (i.e. user[name])

Warm Up

Watch the first 7 minutes of this video about dot and bracket notation.

• Independently, complete the exercise found on this repl.

Equivalent Expressions

Objects are a key piece of working with JavaScript. In order for objects to be helpful for us, we have to be able to access the information inside of the objects. To do this, we can use dot notation or bracket notation.

Here are some examples of dot notation:

house.address;
student.gradeLevel;
school.classroom.teacher;

Here are equivalent expressions in bracket notation:

house["address"];
student["gradeLevel"];
school["classroom"]["teacher"];

In Ruby, we use a similar syntax for accessing hash values:

house[:address]
student[:grade_level]
school[:classroom][:teacher]

Chaining

As you have seen in a couple of examples today, you can chain multiple properties onto an expression in order to dig in deeper on an object. Let’s take this object, for example:

var user = {
  email: "jonathan@email.com",
  name: "Jonathan",
  contactInfo: {
    phone: 123456789,
    address: {
      street: "1234 Main Street",
      city: "Denver",
      state: "CO",
      zip: 80206,
    },
  },
};

If we wanted to access this user’s zip code using dot notation, we could write:

• user.contactInfo.address.zip

In order to access their zip using bracket notation, we would write:

• user[‘contactInfo’][‘address’][‘zip’]

You can also mix and match! We could write something like this and it would work:

• user.contactInfo[‘address’].zip

Notice how each block is formatted:

• user .contactInfo [‘address’] .zip

Practice

Complete the exercises found on this repl.

Bracket Notation & Variables

One important thing to remember; dot notation only works if you have access to the exact property name. Dot notation interprets the expression literally. Meaning, it will look for the actual property that is passed in. Let’s take, for example, this code block:

var phrases = {
  greeting: "hello",
  departing: "goodbye",
};

var lookupField = "greeting";

If we ran the command below, we would get undefined. This is because the JavaScript interpreter is looking for a property that is literally called “lookupField” and it does not exist:

console.log(phrases.lookupField); // output: undefined

The same would happen in this case:

console.log(phrases["lookupField"]); // output: undefined

We can use bracket notation in our favor, by passing in the variable, like the example below. In this case, the interpreter will evaluate whats between the brackets, register lookupField as a variable and then pass in it’s value of ‘greeting’ to get the output of ‘hello’:

console.log(phrases[lookupField]); // output: "hello"

If we reassigned the value of lookupField and then ran the same command as above, we’d get a new output:

lookupField = "departing";

console.log(phrases[lookupField]); //output: "goodbye"

💡 Remember: A variable represents some other value, and that value could be reassigned/change over time. This means dot notation is not an option when using a variable to represent the object’s key we are trying to access because to use dot notation, we must be able to type out the exact letter-by-letter name the key. Bracket notation gives us the ability to use variables to access values in an object. This is especially helpful with the value of the variable changes.

In Ruby, we can use variables as keys in a similar way:

phrases = {
  greeting: "hello",
  departing: "goodbye"
}

lookup_field = :greeting

puts phrases[lookup_field] # output: "hello"

Take a moment to read through this code:

function checkForFood(restaurant, food) {
  if (restaurant.menus[food.type].includes(food.name)) {
    return `Yes, we're serving ${food.name} today!`;
  }
  return `Sorry, we aren't serving ${food.name} today.`;
}

var foodItem = {
  name: "Quiche",
  price: "6.49",
  type: "lunch",
};

var restaurant = {
  name: "Butcher Block Cafe",
  menus: {
    breakfast: ["Quiche", "Egg and Sausage Sandwich", "Corn Beef Hash"],
    lunch: ["Ham and Swiss", "Chicken Fried Steak", "Cheeseburger"],
    dinner: ["T Bone Steak", "Spaghetti and Meatballs"],
  },
};

console.log(checkForFood(restaurant, foodItem));

Applying What We’ve learned

Even if these concepts are new to you, you’ve actually been putting them into practice for awhile now! Let’s take a deeper look into something familiar to you: for loops.

Ruby Comparisons

As you wrap up this lesson, let’s consider the following comparisons between JavaScript and Ruby:

1. Object Creation:

   • Ruby: obj = { key: "value" }
   • JavaScript: var obj = { key: "value" };

2. Accessing Properties:

   • Ruby: obj[:key] or obj["key"]
   • JavaScript: obj.key; or obj["key"];

3. Adding New Properties:

   • Ruby: obj[:new_key] = "new value"
   • JavaScript: obj.newKey = "new value"; or obj["newKey"] = "new value";

4. Nested Objects/Hashes:

   • Ruby: obj[:nested][:deeply_nested]
   • JavaScript: obj.nested.deeplyNested;

Summary

In this lesson, you’ve learned:

1. The difference between dot and bracket notation in JavaScript
2. When to use each type of notation
3. How to work with variables as object keys
4. The similarities and differences between JavaScript object notation and Ruby hash notation

Remember, dot notation is generally preferred for its simplicity, but bracket notation is necessary when working with variables or special property names.

Further Resources

• MDN Web Docs: Working with Objects
• Ruby Documentation: Hash