executeQueryAsync don't behave as synchronously

Question

I am creating different forms where I need same functions, so I created separate js file which I call on my each forms.

In below code if alert currentUser from success method then I get the value but If I call currentUser value from my forms in document ready then it will give me "undefined" how can I solve it.

var currentUser;

    $.getScript("/_layouts/15/SP.Runtime.js", function () {
        $.getScript("/_layouts/15/SP.js", execOperation);
    });
function execOperation() {
    // get context and then username
    context = new SP.ClientContext.get_current();
    web = context.get_web();

    getUserName();
}
function getUserName() {
    user = web.get_currentUser();
    context.load(user);
    context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);
}
function onGetUserNameSuccess() {
    currentUser = user.get_loginName();
}
function onGetUserNameFail(sender, args) {
    alert('Failed to get user name. Error:' + args.get_message());
}
function getJSON(url) {
    var requestUri = _spPageContextInfo.webAbsoluteUrl + url;

    $.ajax({
        url: requestUri,
        type: "GET",
        headers: { "ACCEPT": "application/json;odata=verbose" },
        success: function (data) {
            return data.d;
        },
        error: function () {
            alert("Failed to get " + url);
        }
    });
}

This is the way I call from another page

$(document).ready(function () {
        alert(currentUser);
    });

Answer 1

As stated in the comments, you would need to structure your code in a way to get the result of the asynchronous operation, your code should be something like this:

SP.SOD.executeFunc('sp.js', 'SP.ClientContext', getUserName);

var user ;  //declare this as a variable related to your current namespace, only here for demonstration.

function getUserName(){
  var userPromise = retrieveUserCall();
  userPromise    //this line will wait until the server call completes
  .done(function(){
    //do something with user variable
  })
  .fail(function(){
    //do something on fail
  })
}

function retrieveUserCall(){
  var context = new SP.ClientContext();
  var web = context.get_web();
  user = web.get_currentUser();
  context.load(user);
  var dfd = $.Deferred();
  context.executeQueryAsync(function(){
      dfd.resolve();
    },
    function(){
      dfd.reject();
    });
  return dfd;   //dfd will return the result of the server call
}

Note that each call to the server is an asynchornous call, you don't know the result of it right away, and JavaScript will continue executing. So you need to declare a $.Deferred() variable that will store the result of the server call, and you would wait for the execution to complete with .done() for success and .fail() for fail.