JS: Dot and Bracket Notation

Learning Goals

• Use dot and bracket notation to access 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

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 (Example: 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 (Example: user['name']) or a variable (Example: user[name])

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’]

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

Bracket Notation & Variables

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.

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

What will be returned from the checkForFood function?

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.