JavaScript promises behaviour: calling global function vs local function

Question

I am learning about promises in JavaScript and encounter some weird thing

const successFunc = msg => {
    console.log(`Success ${msg}`);
};

const failFunc = msg => {
    console.log(`Fail ${msg}`);
};

// create a promise object
// inside the promise object, there is a logic gate inside.
const promise = new Promise((resolve, reject) => {
    const a = 5;
    const b = 1;
    if (a > b) {
        // it will call the resolve function
        resolve();
    } else {
        // it will call the reject function
        reject();
    }
});

// // the promise object is activate and start when calling
// // this is actually an object chain promise.then(func).catch(func)
promise
    .then(successFunc("calling successFun"))
    .catch(failFunc("calling Fail Func"));

promise
    .then(() => {
        console.log("success");
    })
    .catch(() => {
        console.log("fail");
    });

In the first version, I expect this to return only the message from successFunc but somehow, it will return both of them. In the second version, the function is created inside instead globally, this somehow creates the behaviour I expect, which is calling success message only. Could someone provide more information about this behaviour?

This is the output:

>> node .\promise.js
Success calling successFun
Fail calling Fail Func
success

You're calling the functions and passing the *results* to then and catch; for this to work they need to be higher-order functions, functions that return functions, like `const createSuccessCallback = (msg) => () => console.log(msg);`. Your two examples **are not** equivalent, hence different results. — jonrsharpe, Dec 31 '19 at 08:49
accept/upvote if the answer helped, check [When Someone Answers](https://stackoverflow.com/help/someone-answers) — Akash Shrivastava, Dec 31 '19 at 13:34

score 1 · Accepted Answer · answered Dec 31 '19 at 08:52

You are providing a value instead of a function as a callback to .then and .catch. Provide a function and it should work.

const successFunc = msg => {
    console.log(`Success ${msg}`);
};

const failFunc = msg => {
    console.log(`Fail ${msg}`);
};

// create a promise object
// inside the promise object, there is a logic gate inside.
const promise = new Promise((resolve, reject) => {
    const a = 5;
    const b = 1;
    if (a > b) {
        // it will call the resolve function
        resolve();
    } else {
        // it will call the reject function
        reject();
    }
});

// // the promise object is activate and start when calling
// // this is actually an object chain promise.then(func).catch(func)
promise
    .then(() => successFunc("calling successFun"))
    .catch((e) => failFunc("calling Fail Func"));

promise
    .then(() => {
        console.log("success");
    })
    .catch(() => {
        console.log("fail");
    });

When you use it like

.then(successFunc("calling successFun"))
.catch(failFunc("calling Fail Func"));

then successFunc("calling successFun") are treated as function call, and are excuted and result is passed on to .then

JavaScript promises behaviour: calling global function vs local function

1 Answers1