How to Access Object Properties in JavaScript

🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

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.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

🆕 High-Demand 80–90% OFF

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

🆕 High-Demand 80–90% OFF

ChatGPT + Generative AI + Prompt Engineering for Beginners

🚀 Trending Now 80–90% OFF

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Real-Time REST APIs with Spring Boot - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Building Microservices with Spring Boot and Spring Cloud

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Java Full-Stack Developer Course with Spring Boot and React JS

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

🌟 Top Rated 80–90% OFF

Testing Spring Boot Application with JUnit and Mockito

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot Thymeleaf Real-Time Web Application - Blog App

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Master Spring Data JPA with Hibernate

🔥 Bestseller 80–90% OFF
Available in Udemy for Business

Spring Boot + Apache Kafka Course - The Practical Guide

🎓 Student Favorite 80–90% OFF
Available in Udemy for Business

Java Testing: Mastering JUnit 5 Framework

🆕 New 80–90% OFF

Reactive Programming in Java: Spring WebFlux and Testing

🌟 Top Rated 80–90% OFF

Spring Boot + RabbitMQ Course - The Practical Guide

🌟 Top Rated 80–90% OFF
Available in Udemy for Business

Functional Programming in Java (Includes Java Collections)

🎓 Student Favorite 80–90% OFF

ChatGPT for Java Developers: Boost Your Productivity with AI

🚀 Trending Now 80–90% OFF