Passing object in arrow-function in javascript

Question

I have a really hard time understanding the workflow of the following code-snippet

const Circuit = require('circuit-sdk');
const client = new Circuit.Client({
  client_id: '<client_id>',
  client_secret: '<client_secret>',
  domain: 'circuitsandbox.net'
});
client.logon()
  .then(user => console.log('Logged on as bot: ' + user.emailAddress))
  .catch(console.error);

How is, in the second last line, the object user defined? Or, asked another way, how can i access user.emailAddress, without defining it beforehand?

This code works, its a sample from the documetation, i just can't get it into my head

The user is what it return from the logon function, this is the way to get the information returned by this function — mbadeveloper
– mbadeveloper, Commented May 25, 2018 at 9:17

T.J. Crowder · Accepted Answer · 2018-05-25 09:38:33Z

How is, in the second last line, the object user defined?

user is the resolution value of the promise from client.logon. It's set by the code in client.logon that resolves the promise. When the promise is resolved (by that code in client.logon), your then handler is called and passed the resolution value as an argument (remember that user => ... defines a function accepting a user parameter; more in this question's answers). That's how you can see it, and how you can use its properties (which presumably were created by client.logon).

For instance, client.logon might look something like this (conceptually, not literally):

class Client {
    // ...

    logon() {
        return new Promise((resolve, reject) => {
            // start the login process, which is presumably asynchronous,
            // and then in some handler for completion:
            resolve(result); // Where `result` is the user object
        });
    }

    // ...
}

It's the value logon passes into resolve that your then handler receives.

Of course, logon may not use new Promise, it may well chain onto a promise from another function, but at some level, the innermost of those will create a promise via new Promise (or async, which is syntactic sugar for a function that creates and returns a promise).

Here's a simple live example:

class Client {
  logon() {
    return new Promise((resolve) => {
      // Simulate asynchronous process via setTimeout
      setTimeout(() => {
        resolve({emailAddress: "[email protected]"});
      }, 100);
    });
  }
}

const client = new Client();
client.logon()
  .then(user => console.log(user.emailAddress))
  .catch(console.error);

Shubham Khatri · Accepted Answer · 2018-05-25 09:17:48Z

0

You need to think of the arrow function as a callback function, an equivalent to the above would be

client.logon()
  .then(function(user) {
        console.log('Logged on as bot: ' + user.emailAddress)
  }.bind(this))
  .catch(console.error);

If you wonder what .bind(this) does here, it for binding the context of the function to the outer context where client.logon is invoked.

Arrow function achieves the same since it doesn have its own this, rather if inherits the this from the parent context.

answered May 25, 2018 at 9:17

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Collectives™ on Stack Overflow

Passing object in arrow-function in javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related