How to Access Object Properties in JavaScript

In JavaScript, objects are used to store data in the form of key-value pairs. The keys are called properties, and the values are the data linked to those properties. In this post, we’ll learn simple ways to access these properties in an object using an example of an Employee object with properties like firstName, lastName, and email.

Employee Object Example

Let’s first create an example of an Employee object:

const employee = {
  firstName: "Ramesh",
  lastName: "Fadatare",
  email: "ramesh.fadatare@gmail.com"
};

Now that we have an object, let’s explore how to access its properties.

Dot Notation

The simplest and most commonly used method to access object properties is dot notation. You can directly access a property by writing the object name followed by a dot (.), and then the property name.

Example:

console.log(employee.firstName); // Output: Ramesh
console.log(employee.lastName);  // Output: Fadatare
console.log(employee.email);     // Output: ramesh.fadatare@gmail.com

In this example, employee.firstName gives us the value "Ramesh", and similarly, we can access the lastName and email.

Bracket Notation

Another way to access properties is bracket notation. This method is useful when you want to use a variable or when the property name contains special characters or spaces.

Example:

console.log(employee["firstName"]); // Output: Ramesh
console.log(employee["lastName"]);  // Output: Fadatare
console.log(employee["email"]);     // Output: ramesh.fadatare@gmail.com

Both dot notation and bracket notation work the same, but bracket notation allows you more flexibility, like using variables to access properties.

Accessing Nested Properties

Sometimes, objects can have other objects inside them. You can use dot or bracket notation to access properties of nested objects.

Example:

const employee = {
  firstName: "Ramesh",
  lastName: "Fadatare",
  email: "ramesh.fadatare@gmail.com",
  address: {
    city: "Mumbai",
    zip: "400001"
  }
};

console.log(employee.address.city); // Output: Mumbai

Here, employee.address.city accesses the city of the employee.

Using Variables to Access Properties

You can also use variables to access properties in bracket notation. This is especially useful when the property name is dynamic (changes based on certain conditions).

Example:

const property = "email";
console.log(employee[property]); // Output: ramesh.fadatare@gmail.com

In this example, the value of property is "email", so employee[property] retrieves the email address.

Handling Undefined Properties

Sometimes, you might try to access a property that doesn’t exist in the object. JavaScript will return undefined for such cases, and it won’t throw an error.

Example:

console.log(employee.phoneNumber); // Output: undefined

Since phoneNumber is not a property of employee, the result will be undefined.

Practical Use Cases

In real-world applications, accessing object properties is useful when dealing with APIs, user data, or any structured data. Here’s a simple use case where we want to display the employee’s full name and email.

Example:

console.log(`Employee: ${employee.firstName} ${employee.lastName}`);
console.log(`Email: ${employee.email}`);

Output:

Employee: Ramesh Fadatare
Email: ramesh.fadatare@gmail.com

Conclusion

Accessing object properties in JavaScript is straightforward using dot notation or bracket notation. Whether you're working with nested objects or dynamic property names, these methods provide the flexibility to manage your data effectively. Always remember that if a property doesn’t exist, JavaScript will return undefined, so handle such cases accordingly.