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

Pre-Work

Watch the first 7 minutes of this video about dot and bracket notation. If you want to watch the whole thing, go ahead! Just know that it covers some Mod 2 concepts that may be a little intimidating at this point :)

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

Warm Up

  • Independently, complete the exercise found on this repl.
  • When you finish, use the zoom chat to DM me your answer to this question: Which of the following expressions is equivalent to car.brand?
    A. car[brand]
    B. car['brand']

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

Stop and Think

  • What differences do you notice in the way each notation is written?

Key Point #1

You can write equivalent expressions using dot and bracket notation. For example: object.property is equivalent to object['property'].

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

Paired Practice

  • In a breakout room, complete the exercises found on this repl.
  • When you finish, discuss this question with your partner: In your opinion, which notation is easier to read and write?
  • Be prepared to discuss as a whole group after. Write down any questions that pop up along the way so we can discuss as a group!

Key Point #2

Whenever it is possible, we will default to using dot notation.

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.

Key Point #3

We must use bracket notation whenever we are accessing an object’s property using a variable or when the property’s key is a number or includes a symbol or is two words with a space.

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.

Paired Practice

  • In a breakout room, complete the exercises found on this repl.
  • Be prepared to discuss as a whole group after. Write down any questions that pop up along the way so we can discuss as a group!

Key Point #4

When we use dot notation, the JS interpreter looks in the object for a key that is an exact letter-by-letter literal match to whatever comes after the dot.
When we use bracket notation, the JS interpreter evaluates everything between the brackets, then looks in the object for a key that matches whatever the code between the brackets evaluated to.

Paired Practice

  • In a breakout room, complete the exercises found on this repl.
  • Be prepared to discuss as a whole group after. Write down any questions that pop up along the way so we can discuss as a group!

Reflect

In your notebook, answer the following questions:

  • How does the JavaScript interpreter handle dot and bracket notation differently?
  • When should you use dot notation? Bracket notation?
  • What is a limitation of using dot notation? How does bracket notation address this?

Homework (Optional and Spicy!)

  • Complete the code challenges found on this repl. These are tough! Do what you can. Stuck? Look here.
  • Answer the questions found in the JavaScript section of this codepen.

Lesson Search Results

Showing top 10 results