Why are my callback functions executing in the wrong order?

Question

var getUsername = (callback) => {

  console.log("Getting username...")
  setTimeout(() => {
    let username = "srishti"
    console.log(`Username = ${username}`)
    validateUsername(username)

  }, 3000)
}

let validateUsername = (username) => {
  console.log("Validating username...")
  if (username === username) {
    console.log("Valid Username!")

  } else {
    console.log("Invalid Username! Please try again!")
  }
}


var getPassword = (callback) => {

  console.log("Getting password...")
  setTimeout(() => {
    let pass = "upgrad"
    console.log(`Password = ${pass}`)
    validatePassword(pass)

  }, 3000)
}

let validatePassword = (pass) => {
  console.log("Validating password...")
  if (pass === pass) {
    console.log("Valid Password!")

  } else {
    console.log("Invalid Password! Please try again!")
  }
}

let done = () => {
  console.log("BOTH VALID!")
}

const login = () => {
  getUsername(validateUsername(username => {
    getPassword(() => {
      validatePassword(password => {
        done()
      })
    })
  }))


}

login()

Expected output:

Getting username...
Username = srishti
Validating username...
Valid Username!
Getting password...
Password = upgrad
Validating password...
Valid Password!
BOTH VALID!

When I pass first two function as callback function, it will the print the result as expected but when i passing the all four function as callback function it print not sequencely and print double.

Answer 1

It looks like you've misunderstood the idea of callbacks. The idea is that you pass a function as an argument to another function, where the passed-in function then gets executed when some sort of operation (eg: a setTimeout()) is complete. Currently, your code doesn't use that callback your passing into your functions, rather, you have your functions hardcoded, which doesn't allow you to execute dynamic logic once your function's operation is complete. See code comments below:

const getUsername = (callback) => { // (Not required): I suggest you make your variables `const` whereever possible
  console.log("Getting username...");
  setTimeout(() => {
    const username = "srishti";
    console.log(`Username = ${username}`);
    callback(username); // execute the function we pass in, not the hard coded `validateUsername` function
  }, 3000)
}

Your other issue is that you are passing functions as arguments to functions that aren't expecting to receive functions. Eg: you're are validateUsername(username => {...}) - here you are passing validateUsername a function, but when you look at its definition and how it uses it's argument, we see that it is expecting a string.

Lastly, calling a function is not the same as passing in a function. Currently you are doing getUsername(validateUsername(...)), here you are firstly calling validateUsername, and then passing through the return value of that into getUsername, which isn't what you want to do. Instead, you want to pass in a function that can be executed into the getUsername function that will trigger logic once your username has been retrieved.

See below example with the above issues fixed (see code comments in login on how to use your callbacks):

const getUsername = (callback) => {
  console.log("Getting username...");
  setTimeout(() => {
    const username = "srishti";
    console.log(`Username = ${username}`);
    callback(username);
  }, 3000);
}

const validateUsername = (username) => {
  console.log("Validating username...");
  if (username === username) {
    console.log("Valid Username!");
  } else {
    console.log("Invalid Username! Please try again!");
  }
}


const getPassword = (callback) => {
  console.log("Getting password...");
  setTimeout(() => {
    const pass = "upgrad";
    console.log(`Password = ${pass}`);
    callback(pass);
  }, 3000);
}

const validatePassword = (pass) => {
  console.log("Validating password...");
  if (pass === pass) {
    console.log("Valid Password!");
  } else {
    console.log("Invalid Password! Please try again!");
  }
}

const done = () => {
  console.log("BOTH VALID!");
}

const login = () => {
  getUsername(username => { // pass `getUsername` a function, which runs the below code once complete
    validateUsername(username); // this function expects a string, so we pass it the username string we just receieved (this is synchronous, so JS waits for it to complete before moving on to the below code).
    getPassword(password => { // begin accessing the password, this function (password => {), will be executed by the setTimeout call, executing the below
      validatePassword(password); // use the password we just receieved (this is synchronous, so below code waits for it to complete)
      done(); // call the done function
    });
  });
}

login()