This post is written by a Power Code Academy Student Developer. To learn more about this program, follow the Training Your Own Entry Level Developers blog series on Tech at Power.

Accessing JavaScript Properties

JavaScript properties are the values associated with a JavaScript object, which is a collection of unordered properties. We give objects properties that are unique to them so we are able to store them and, later on, retrieve them. In the grand scheme of things, this helps us keep our objects clean and consistent for when we want to retrieve certain values down the road.

Now for the purposes of this blog, let’s assume we have a monthly box subscription that offers a videogame of the month with a few trinkets that follow a certain theme. We have been very successful and now we have a massive database full of different customers (each individual customer would be an object in this case), and each customer has values associated with them, such as their first name, last name, address, phone number, email, previous orders, etc:

const customer1 = {
    firstName: "Rick",
    lastName: "Sanchez",
    address: "C 137, Citadel of Ricks",
    phone: "555-123-rick",
    email: "morty_suckz@rickmail.com"
  }

Now Rick is one of our loyal customers and has been for quite some time, so we want to send him a small thank you gift. Along with that gift, we also want to add a handwritten letter for that extra touch. Since he’s our first customer, he has an ID of 1 and it’s easy to locate him, but now we want to access his info. We can think of an object as an associative array. The keys in this array are the names of the object’s properties. We have two ways of accessing the attributes in a JavaScript object:

1. Dot Notation
2. Bracket Notation

Dot Notation

The attributes and functions of an object are called the members of that object and these are accessed using dot notation. Dot notation is used more frequently in comparison to bracket notation. We access properties by placing a dot after the object, directly followed by the name of the property we are looking for (object.property). For example, if we want to find the first name of our customer, we can do something like this:

customer1.firstName 
// => "Rick"
  
customer1.lastName 
// => "Sanchez"

We can have JavaScript do the work of adding both names and returning our loyal customer’s full name:

const fullName = customer1.firstName + " " + customer1.lastName
  
Console.log(fullName)
// => Rick Sanchez

Dot notation is much easier to read than bracket notation and is used more often due to that fact.

Bracket Notation

With bracket notation, we use the computed member access operator, which is a pair of square brackets []. We can get the same effect from using the dot notation using bracket notation as well:

customer1['firstName']
  // => "Rick"
  
customer1['lastName']
// => "Sanchez"

Bracket notation is a bit harder to read than dot notation. However, there are two main situations where we use bracket notation.

1. Whenever we have non-standard keys: Meaning that the string we used as our key is oddly-formed, which ranges from having periods in the key, hyphens, symbols, and spaces (Typically we want to camelCaseEverything). For instance:

  customer1.'plumbuses returned: customer_wasnt_a_fan';
  // ERROR: Uncaught SyntaxError: Unexpected string
  
  customer1['plumbuses returned: customer_wasnt_a_fan'];
  // => "No way, everyone has a plumbus in their home"

2. Whenever we want to dynamically access properties: With brackets, we can place any expression inside the brackets and the JavaScript engine will compute its value to figure out which property to access:

  customer1['first' + 'Name']
  // => "Rick"

The main benefit of accessing properties dynamically is the ability to compute the value of variables or constants that we can assign. Circling back to our initial object, let’s say we want to assign address as the multiverse:

const customer1 = {
  address: "C 137, Citadel of Ricks",
 }
 customer1.address
 // =>"C 137, Citadel of Ricks"
 let multiverse = 'address';
 customer1[multiverse]
 // => "C 137, Citadel of Ricks"
 customer1['address']
 // => "C 137, Citadel of Ricks"
 customer1.multiverse
 // => undefined

So bracket notation is not as explicit as dot notation, but it allows us to pass keys that are either not in conventional camelCase, include numbers, or values held in a variable.

Look, Morty…

As a quick recap:

• Dot Notation can only read and access alphanumeric properties, it cannot start with a number, and it cannot be a variable
• Dot Notation is able to read _ and $
• Bracket Notation is able to read and access strings or variables that reference a string
• Bracket Notation is dynamic enough to read variables, keys with spaces and symbols, and strings that start with numbers