How to Access Object Properties in JavaScript

Before we see how to access object properties in javascript, let’s understand the basic object program.

Example program of the object in Javascript:

const person = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
    city: 'Anytown',
    state: 'CA'
  }
};

In this above example program, we have created an object “person” and it has some properties such as name, age, address, etc. Here, the ‘name’ is a property of the object, and ‘john’ is the value of the ‘name’ property. We can also create nested objects. In this example, the ‘address’ property is a nested object of ‘person’. If we want to display the value of the ‘name’ property, we need to know how to access object properties. Let’s see how to access it

2 ways to access object properties

In JavaScript, there are two ways to access object properties:

1. Dot notation:

In this method, we can use the dot (.) operator to access the property of an object. This method is the most common and easy way to access an object’s properties in JavaScript. For example:

const person = {
  name: 'John',
  age: 30,
  address: {
    street: '123 Main St',
  }
};

console.log(person.name); // Output: John
console.log(person.age); // Output: 30
console.log(person.address.street); // Output: 123 Main St

1. In this above example, we have created an object “person” and it has some properties like name, age.
2. If you want to access an object’s properties using dot notation, give your objectName and use the dot (.) operator to give the properName you’re going to access.
3. See the above example, we accessed the ‘name’ property like “person.name”.
4. Then we accessed the property ‘street’ like “person.address.steet”.

2. Bracket notation:

We can also use the square brackets ‘[]’ to access the object’s properties easily. We should put the propertyName inside the square brackets. For example:

let person = {
name: 'John',
age: 30
};

console.log(person['name']); // Output: 'John'
console.log(person['age']); // Output: 30

If you want to access an object’s properties using bracket notation, give your objectName and then give the propertyName inside square bracket ‘[]’

In this above example, we have created an object “person” and it has two properties like name, and age.
Then we access and logged the ‘name’ property like “person[name]“.

This method is useful when the propertyName is not a valid identifier, i.e. contains spaces or special characters. This is also useful when the property name is stored in a variable or dynamically created at runtime.

Why do we need to access object properties?

We can create javascript objects to store and organize data in a structured way. Every object can have some properties that contain data/information or other objects, and methods that can be used to perform an action on data. Only if we access the object properties, you can retrieve or modify the data stored in the object. Here are some reasons why you might need to access object properties in JavaScript:

1. Retrieve data: You may need to retrieve data from an object, such as the user’s name or the item’s price.
2. Modify data: You may need to modify the data stored in the object, such as updating the user’s password or changing the weight of a product.
3. Perform calculations: You may need to perform calculations, such as adding the number of multiple products.
4. Check for the existence of properties: You might need to check if a user has a valid name and email address or if a product has a discount.
5. Iterate through objects: To iterate over an object’s properties in javascript and perform actions based on the data, such as displaying a list of items or filtering users by age.

So if we have created objects, accessing its properties is important and it is an essential part of working with objects in JavaScript.

Conclusion

So, we can access the object properties using dot notation and bracket notation. Both accessing notation can be used to access nested properties within an object.