Accessing Object Properties in JavaScript
Tags: javascript, webdev
Published: 2021-06-30 15:43:53

![objects--greeting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f9z6cchgmtnvwif3kv1x.gif)


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](https://developer.mozilla.org/en-US/docs/Glossary/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✌️.