title: Why are my callback functions executing in the wrong order?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var getUsername = (callback) =&gt; {
  
    console.log("Getting username...")
    setTimeout(() =&gt; {
      let username = "srishti"
      console.log(`Username = ${username}`)
      validateUsername(username)
  
    }, 3000)
  }
  
  let validateUsername = (username) =&gt; {
    console.log("Validating username...")
    if (username === username) {
      console.log("Valid Username!")
  
    } else {
      console.log("Invalid Username! Please try again!")
    }
  }
  
  
  var getPassword = (callback) =&gt; {
  
    console.log("Getting password...")
    setTimeout(() =&gt; {
      let pass = "upgrad"
      console.log(`Password = ${pass}`)
      validatePassword(pass)
  
    }, 3000)
  }
  
  let validatePassword = (pass) =&gt; {
    console.log("Validating password...")
    if (pass === pass) {
      console.log("Valid Password!")
  
    } else {
      console.log("Invalid Password! Please try again!")
    }
  }
  
  let done = () =&gt; {
    console.log("BOTH VALID!")
  }
  
  const login = () =&gt; {
    getUsername(validateUsername(username =&gt; {
      getPassword(() =&gt; {
        validatePassword(password =&gt; {
          done()
        })
      })
    }))
  
  
  }
  
  login()</code></pre>
  </div>
  </div>
  </p>
  <p>Expected output:</p>
  <pre><code>Getting username...
  Username = srishti
  Validating username...
  Valid Username!
  Getting password...
  Password = upgrad
  Validating password...
  Valid Password!
  BOTH VALID!
  </code></pre>
  <p>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.</p>