Accessing Object Properties in JavaScript

Almost all JavaScript values have properties and accessing the said properties can be done in 3 ways, i.e.,

dot notation

square brackets

object destructuring

Dot notation

To access a property of an object through dot notation, we must know the property name beforehand.

Syntax: expression.identifier

Let's see an example to understand this better.

Example 1:

const items = {
      food: "soup",
      "phone-1": "iphone 12"
}

// to access food property
items.food
// output => soup

In the example above, items is an object from which we need to access a property, and food is an identifier. Accessing food property of items is easy enough. However, if we try to access the phone-1 property through dot notation, it won't work. Wondering why? Because it is not a valid identifier. So, how can we access that property? We'll cover that in the next section.

Now you know how accessing a property from dot notation works.

Note: The identifier should be a valid identifier.

Square brackets

To access a property of an object via square brackets, we do not need to know the property name beforehand, that is, the property name could be dynamic (determined at run time).

Syntax: expression[expression]

Let's understand this method through example 1. In example 1, there was an object items and it had two properties. So, to access the food property, we simply have to do this: items[food]. Now about that second property, do you think we would be able to access that?

If your answer is yes then you are correct.

We can access the phone-1 property by doing this: items["phone-1"]. When using square brackets, the expression between the brackets is evaluated and converted to a string to get the property name. Whereas using dot notations only fetches the value.

Object destructuring

Destructuring is a JavaScript expression that allows us to extract data from arrays, objects, and maps and set them into new, distinct variables. Object destructuring assigns the properties of an object to variables with the same names by default.

See the example below: -

Example 2:

const items = {
    food: "soup"
    "phone-1": "iphone 12"
}

const { food } = items;

food;
// output => soup

The destructuring defines a variable food with the value of property food.

Note: The variable should have the same name as the property.

Further, to create a variable name different than the property name and to access the phone-1 property, we can use aliasing.

Syntax: const { identifier: aliasIdentifier } = expression;

For instance in example 2, to create a different variable name of phone-1 property, do this:

const {"phone-1": newVariable} = items

newVariable;
// output => iphone 12

Conclusion

To access a property of an object via dot notation, the property name should be a valid identifier and known ahead of time. Whereas accessing the property of an object via square brackets is favorable when the property name is dynamic or is not a valid identifier. In addition, the object destructuring extracts the property directly into a variable.

Fun fact from Eloquent

The elements in an array are stored as the array’s properties, using numbers as property names. Because you can’t use the dot notation with numbers and usually want to use a binding that holds the index anyway, you have to use the bracket notation to get at them.

Did you like this blog? Let me know in the comments below✌️.