This is one of the places which **two ways data binding** that's used in many new JavaScript frameworks will work greatly for you...

So if you are using **Angular, React** or any other frameworks which do **two ways data binding,** this issue is simply fixed, so in easy word, your result is undefined at the first stage, so you have got `result = undefined` before you recieve the data, then as soon as you get the result, it will updated and get assigned to the new value which is respond of your Ajax call...

But how you can do it in pure **javascript** or **jQuery** for example as you asked in this question?

You can use a **callback**, **promise** and recently **observable** to handle it for you, for example in promises we have some function like success() or then() which will be executed when your data is ready for you, same with callback or **subscribe** function on **observable**.

For example in your case which you are using jQuery, you can do something like this:

  

    $(document).ready(function(){
        function foo() {
            $.ajax({url: "api/data", success: function(data){
                fooDone(data); //after we have data, we pass it to fooDone
            }});
        };
    
        function fooDone(data) {
            console.log(data); //fooDone has the data and console.log it
        };
        
        foo(); //call happens here
    });

For more information study about **promises** and **observables** which are newer ways to do this async stuffs.