How does `.then` know what to pass?

[jliu0324]

In the example for this exercise, the handleSuccess function takes in a variable and logs it to console. My first question is how does the prom.then function know which handle function to pass through? Since the resolvedValue variable doesn’t explicitly refer to the resolve outcome, how does it know what to log to console?

let prom = new Promise((resolve, reject) => {
let num = Math.random();
if (num < .5 ){
resolve(‘Yay!’);
} else {
reject(‘Ohhh noooo!’);
}
});

const handleSuccess = (resolvedValue) => {
console.log(resolvedValue);
};

const handleFailure = (rejectionReason) => {
console.log(rejectionReason);
};

prom.then(handleSuccess, handleFailure);

My second question is does order matter? If I flip the order of handleSuccess and handleFailure so that it is:
const handleFailure = (rejectionReason) => {
console.log(rejectionReason);
};

const handleSuccess = (resolvedValue) => {
console.log(resolvedValue);
};

prom.then(handleSuccess, handleFailure);
Does the prom.then function still pass the correct handles?

[nestfluechter]

Did anyone reply to this question yet? I also wonder how the .then() method knows which handle to use for resolve/reject. I swapped them in the syntax but the result remains the same so somehow the method knows which one is which not just by the order they appear in, I just don’t get how.

[tensor2]

It actually is just based off the order of the arguments. The first function you pass in will always be used for resolve, the second for reject.

It is a bit confusing in the example, because even if you do swap the arguments, the result is the same. But that’s just because the success function and failure function do exactly the same thing: take in a message and print it to the console.

You can modify the functions a little to make it easier to see which one is being called, by adding “Success” or “Failure” to the start of the message:

const handleSuccess = (resolvedValue) => {
    console.log(`Success: ${resolvedValue}`);
};

const handleFailure = (rejectReason) => {
    console.log(`Failure: ${rejectReason}`);
};

Then, you can try swapping them around in the .then(). You should see the first function you pass to then() is always used as the resolve function, even if it says “failure,” and vice versa.

[lucatubertosi]

Hello guys,
I have a question related to part 6, specifically to this example:

If ‘handleSuccess’ and ‘handleFailure’ are functions that take in one argument, why when they are inserted in ‘then(handleSuccess, handleFailure)’ don’t take any arguments?

I’ve the doubt that’s a stupid question but I must resolve this.

Thanks for your answer.

[mtf]

don’t take any arguments?

callbacks do not take arguments because they are not invoked when passed in. Only the representation of the function is given. The then method will invoke the one that matches the outcome. The first callback is for success, the second for failure. then decides which to use and gives the appropriate argument at that time.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

[lucatubertosi]

Thank you, that’s clear now.

[tera2239037203]

I don’t think I fully understand this code in the example:

const prom = new Promise((resolve, reject) => {
resolve(‘Yay!’);
});

const handleSuccess = (resolvedValue) => {
console.log(resolvedValue);
};

prom.then(handleSuccess); // Prints: ‘Yay!’

Is an anonymous function being declared inside the Promise() function instead of declaring it separately and then passing it into Promise() like we did before?

Also, how does it know what to pass in for the “resolvedValue” parameter?

[foadmosba]

The .then method will take answer of the promise function (in this case, prom), and if it was resolved, pass it in to the first callback function (in this case, handleSuccess) and if it was rejected, pass it in to the second callback function (in this case, handleFailure)

[theviggie]

I am fairly certain that the method does not “know” anything. Both handleFailure() and handleSuccess() do exactly the same thing, they log the parameter that was given to them by checkInventory() to the console. That means that it doesn’t matter which comes first, the outcome is the same, even if you delete one callback function (i.e you invoke checkInventory(order).then(handleFailure), for example).
However, I really don’t know what the creator of this exercise wanted to show us when she/he created it…

[theviggie]

I’m having a hard time comprehending why callback functions do not need arguments, still the necessary arguments somehow show up just when we need them to. Could you kindly explain this, or provide a link to this topic? Thanks!

[mtf]

const isEven = x => x % 2 === 0;
const isOdd = x => x % 2 !== 0;

const evens = [1, 2, 3, 4, 5, 6, 7, 8, 9].filter(isEven);
const odds =  [1, 2, 3, 4, 5, 6, 7, 8, 9].filter(isOdd);

console.log(evens)    // [2, 4, 6, 8]

console.log(odds)     // [1, 3, 5, 7, 9]

We pass only a reference to the callback. The parameter x takes a value from the array as .filter iterates over it.

const parity = x => console.log(`${x} is ${x % 2 ? `odd` : `even`}.`);

[1, 2, 3, 4, 5, 6, 7, 8, 9].forEach(parity);

/*
1 is odd.
2 is even.
3 is odd.
4 is even.
5 is odd.
6 is even.
7 is odd.
8 is even.
9 is odd.
*/

Same thing as before. .forEach() iterates the array and passes the value to the callback parameter.