How to access object properties from result returned by async() function in JavaScript?

In this article, you will understand how to access object properties from result returned by async() functions in JavaScript. An object property in JavaScript is a variable that is associated with the object itself, i.e. the properties have a name and value is one of the attributes linked with the property.

When working with async functions that return objects, you can access their properties using standard JavaScript notation once the promise resolves. The key is using await to wait for the promise to resolve before accessing properties.

Using Dot Notation

In this example, let's understand how to access objects property using dot notation:

console.log("A function is created that returns promise object")
const promiseFunction = (input) => {
   return new Promise((resolve, reject) => {
      return resolve({
         val: input
      })
   })
}

console.log("\nCalling the function using dot notation")

async function test() {
   const result = await promiseFunction("This is an asynchronous function response")
   console.log(result.val); 
}
test();

A function is created that returns promise object

Calling the function using dot notation
This is an asynchronous function response

Using Bracket Notation

In this example, we'll access the same property using bracket notation:

console.log("A function is created that returns promise object")
const promiseFunction = (input) => {
   return new Promise((resolve, reject) => {
      return resolve({
         val: input
      })
   })
}

console.log("\nCalling the function using bracket notation")

async function test() {
   const result = await promiseFunction("This is an asynchronous function response")
   console.log(result["val"])
}
test();

A function is created that returns promise object

Calling the function using bracket notation
This is an asynchronous function response

Accessing Multiple Properties

You can access multiple properties from the resolved object:

const fetchUserData = () => {
   return new Promise(resolve => {
      resolve({
         name: "John Doe",
         age: 30,
         email: "john@example.com"
      })
   })
}

async function displayUser() {
   const user = await fetchUserData()
   console.log("Name:", user.name)
   console.log("Age:", user.age)
   console.log("Email:", user["email"])
}
displayUser();

Name: John Doe
Age: 30
Email: john@example.com

Comparison

Conclusion

After awaiting an async function that returns an object, you can access its properties using either dot notation or bracket notation. Both methods work identically for accessing object properties from resolved promises.