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, May 25 '18 at 09:17

T.J. Crowder · Accepted Answer · 2018-05-25T09:38:33.207

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: "foo@example.com"});
      }, 100);
    });
  }
}

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

score 0 · Answer 2 · answered May 25 '18 at 09:17

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.

Passing object in arrow-function in javascript

2 Answers2