Skip to content
Related Articles

Related Articles

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

Improve Article
Save Article
  • Last Updated : 13 Jul, 2022
Improve Article
Save Article

In this article, we will see how to access the properties of a javascript object result returned by the async() function in Javascript.

A javascript object property is a variable that is associated (read attached) with the object itself, i.e. the properties have a name and value is one of the attributes linked with the property, which defines the access granted to the property. You can access a property of an object using the dot (.) notation or bracket ([]) notation. For instance, the key is a property of the obj object, and the value of the property is accessed using both, dot notation as well as bracket notation.

var obj = {"key": "value"}
console.log(obj.key) // dot notation
console.log(obj["key"]) // bracket notation

Output:

value
value

Here, we will understand how to access the response of a promise object. A Promise is a javascript object that returns upon completion of an asynchronous operation. A Promise has 3 states:

  • Fulfilled: When an asynchronous operation completes without throwing any errors.
  • Rejected: When an asynchronous operation could not complete and throws an error midway.
  • Pending: When an asynchronous operation is ongoing.

Now, to understand how to access a javascript object’s properties when the object is a response to a promise, let’s look at the below approaches.

Approach 1: Using async/await syntax to handle promise-based behavior

Async/Await helps in writing a cleaner code for handling promises. The async keyword is used with functions that handle asynchronous operations, and the await keyword is used in an async function, that awaits the response of an asynchronous operation, for example a promise.

Example: This example describes the process for accessing the object’s properties in Javascript.

Javascript




<script>
  // A function that returns a promise object
  const call = (input) => {
      return new Promise((resolve, reject) => {
          return resolve({
              val: input
          })
      })
  }
  
  // Let’s await the response of the promise 
  // and log the result to the console
  async function test() {
      const res = await call("Hello World!")
      console.log(res.val); // dot notation
      console.log(res["val"]) // bracket notation   
  }
  test();
</script>


If you do not wish to use the await keyword to await the Promise response, then you can also choose to go for the Promise chaining technique using the then keyword to wait for a promise response before proceeding ahead in a callback chain.

Output:

Code output

Approach 2: Using the ‘then’ keyword to implement a promise chain

The then() method handles the response of promise, be the state of the promise is either fulfilled or rejected. It takes two callback functions, one for each of the above-mentioned promise states. 

Example: This example describes the process for accessing the object’s properties in Javascript by using the ‘then‘ keyword to implement a promise chain.

Javascript




<script>
  // A function that returns a promise object
  const call = (input) => {
    return new Promise((resolve, reject) => {
      return resolve({
        val: input,
      });
    });
  };
  
  // Use then keyword to wait for the response
  // and use a callback function to log the 
  // result to the console
  
  // Dot notation
  call("Hello World!")
    .then((res) => console.log(res.val));
  
  // Bracket notation
  call("Hello World!")
    .then((res) => console.log(res["val"]));
</script>


Output:

Code output


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!