Accessing Attribute in Controller Lightning Salesforce

Question

I am trying to access the attribute which I am assigning the value in Helper, and calling the helper in Controller init, but while accessing the the same attribute in init, its returning undefined.

Here is my code

Helper

userName : function(component) {
    //loading user related data
    var action = component.get("c.getUserName");
    action.setCallback(this, function(response){
        var state = response.getState();
        if (state === "SUCCESS") {
            component.set("v.Name", response.getReturnValue());
           // alert('$$$' + component.get("v.Name"));

         }
    });
    $A.enqueueAction(action);   
},

Controller

doinit : function(component, event, helper) {

    helper.userName(component);
    //here its returning undefined 
    alert(component.get("v.Name"));
}

Component

<aura:handler name="init" value="{!this}" action="{!c.doinit}"/>

<aura:attribute name="Name" type="String" /> 

Answer 1

You can take help of callback to get the updated value after the Ajax call:

Helper

userName : function(component, callbackMathod) {
    //loading user related data
    var action = component.get("c.getUserName");
    action.setCallback(this, function(response){
        var state = response.getState();
        if (state === "SUCCESS") {
            component.set("v.Name", response.getReturnValue());
            alert('Called in helper: ' + component.get("v.Name"));
            if(callbackMathod){
                callbackMathod();
            }
         }
    });
    $A.enqueueAction(action);   
},

Controller

doinit : function(component, event, helper) {
    helper.userName(component, function(){
        alert('Called in controller: ' + component.get("v.Name"));
    }); 
}

Component

<aura:handler name="init" value="{!this}" action="{!c.doinit}"/>

<aura:attribute name="Name" type="String" /> 

Answer 2

As mentioned in the comment ,this is happening because in javascript the order of execution is not sequential like apex .

You generally do not need to access anything in your controller as the view is binded to the attribute and you can do further logic in the callback .

userName : function(component) {
//loading user related data
var action = component.get("c.getUserName");
action.setCallback(this, function(response){
    var state = response.getState();
    if (state === "SUCCESS") {
        component.set("v.Name", response.getReturnValue());
       //do your logic here .You can create functions or further callbacks or promises 

     }
  });
   $A.enqueueAction(action);   
 }

If you really want to understand the async behaviour.In the controller for some fun you can simply put a timeout function like below

doinit : function(component, event, helper) {

 helper.userName(component);
 window.setTimeout(
 $A.getCallback(function() {
    if (component.isValid()) {
        alert(component.get("v.Name"));
    }
 }),1000);
}

Caution : Do not use this timeout method for any business logic .Its just for fun and help you understand how javascript is asynchronous in nature and even though the code block will be sequential the order of execution is not as place your code block .Here is an in depth articles to understand callbacks

Instead provide a callback implementation like below

({
    doinit : function(component, event, helper) {
        helper.userName(component,function(){
            alert(component.get("v.Name"));
        });
       }
   })

({
    userName : function(component,callback) {
    //loading user related data
    var action = component.get("c.getUserName");
    action.setCallback(this, function(response){
        var state = response.getState();
        if (state === "SUCCESS") {
            component.set("v.Name", response.getReturnValue());
           // alert('$$$' + component.get("v.Name"));
           if(callback){
                callback();
            }
         }
    });
    $A.enqueueAction(action);   
}
})