AuraHandledException

From Apex class:

    @AuraEnabled
    public static List<Account> fetchAccount() {
        throw new AuraHandledException('User-defined error');
    }

From client-side controller:

    doInit: function(component, event, helper) {
        var action = component.get('c.fetchAccount');
        action.setParams({ firstName : cmp.get("v.firstName") });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set('v.Accounts', response.getReturnValue());
            }
            else if (component.isValid() && state === "ERROR") {
                console.log("Error Message: ", response.getError()[0].message);
            }
        });
        $A.enqueueAction(action);
    }

Lightning Component Rendering LifeCycle

Rendering LifeCycle

1. The init event is fired by the component service that constructs the components to signal that initialization has completed.

2. For each component in the tree, the base implementation of render() or your custom renderer is called to start component rendering.

3. Once your components are rendered to the DOM, afterRender() is called to signal that rendering is completed for each of these component definitions.

4. To indicate that the client is done waiting for a response to the server request XHR, the aura:doneWaiting event is fired.

5. The framework fires a render event, enabling you to interact with the DOM tree after the framework’s rendering service has inserted DOM elements. Handling the render event is preferred to creating a custom renderer and overriding afterRender().

6. Finally, the aura:doneRendering event is fired at the end of the rendering lifecycle.

Salesforce doesn't recommend using the legacy aura:waiting, aura:doneWaiting, and aura:doneRendering application events except as a last resort. The aura:waiting and aura:doneWaiting application events are fired for every batched server request, even for requests from other components in your app.

References:
https://developer.salesforce.com/blogs/developer-relations/2015/06/understanding-system-events-lightning-components-part-1.html
https://developer.salesforce.com/blogs/developer-relations/2015/06/understanding-system-events-lightning-components-part-2.html

Access SOQL data in Lightning component

public class AccountContactController {
    @AuraEnabled
    public static List<Account> fetchAccount() {
        List<Account> listOfAccounts = [SELECT Name, AnnualRevenue, BillingState, (SELECT LastName FROM contacts) FROM Account LIMIT 10];
        return listOfAccounts;
    }
}

<aura:component controller="AccountContactController">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="Accounts" type="Account[]"/>
    <ul>
        <aura:iteration items="{!v.Accounts}" var="account">
            <li>AccountName: {!account.Name}</li>
            <ul>
                <aura:iteration items="{!account.Contacts}" var="contact" indexVar="index">
                    <li>Contact {!index + 1} : {!contact.LastName}</li>
                </aura:iteration>
            </ul>
            <hr/>
        </aura:iteration>
    </ul>
</aura:component>

({
    doInit: function(component, event, helper) {
        var action = component.get('c.fetchAccount');
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set('v.Accounts', response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    }
})

Access apex class properties in Lightning component

public class PersonController {
    @AuraEnabled public String Name {get;set;}
    @AuraEnabled public integer Age {get;set;}
    @auraEnabled public List<Account> ListOfAccounts {get;set;}
    
    @AuraEnabled
    public static PersonController initMethod(){
        PersonController person = new PersonController();
        person.Name = 'John Doe';
        person.Age = 30 ;
        person.ListOfAccounts = [SELECT Id, Name FROM Account LIMIT 10];
        return person ;
    }
}

Note the attribute personController of type PersonController.

<aura:component controller="PersonController">
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="personController" type="PersonController"/>
    
    <div>
        Name: {!v.personController.Name}<br />
        Age: {!v.personController.Age}<br />
    </div>
    <div>
        List of Accounts:
        <aura:iteration items="{!v.personController.ListOfAccounts}" var="account">
            <li>{!account.Name}</li>
        </aura:iteration>
    </div>
</aura:component>

({
    doInit : function(component, event, helper) {
        var action = component.get('c.initMethod');
        action.setCallback(this,function(response){
            var state = response.getState();
            if (state === "SUCCESS") {
                component.set('v.personController', response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
    },
})

Javascript: Functions

There are actually two literal forms of functions. The first is a function declaration, which begins with the function keyword and includes the name of the function immediately following it.

function add(num1, num2) {
   return num1 + num2;
}

The second form is a function expression, which doesn’t require a name after function. These functions are considered anonymous because the function object itself has no name. Instead, function expressions are typically referenced via a variable or property, as in this expression:

var add = function(num1, num2) {
   return num1 + num2;
};

Function hoisting

Function declarations are hoisted to the top of the context when the code is executed. That means you can actually define a function after it is used in code without generating an error.

var result = add(5, 5);

function add(num1, num2) {
   return num1 + num2;
}

Function hoisting happens only for function declarations because the function name is known ahead of time. Function expressions, on the other hand, cannot be hoisted because the functions can be referenced only through a variable. So this code causes an error:

// error!
var result = add(5, 5);

var add = function(num1, num2) {
   return num1 + num2;
};

Functions as Values

function sayHi() {
   console.log("Hi!");
}

sayHi(); // outputs "Hi!"

var sayHi2 = sayHi;

sayHi2(); // outputs "Hi!"

Parameters

You can pass any number of parameters to any function without causing an error. That’s because function parameters are actually stored as an array-like structure called arguments. The values are referenced via numeric indices, and there is a length property to determine how many values are present.

function sum() {

   var result = 0,
   i = 0,
   len = arguments.length;

   while (i < len) {
      result += arguments[i];
      i++;
   }
 
   return result;
}

console.log(sum(1, 2));       // 3
console.log(sum(3, 4, 5, 6)); // 18
console.log(sum(50));         // 50
console.log(sum());           // 0

Overloading

The fact that functions don’t have signatures in JavaScript doesn’t mean you can’t mimic function overloading. You can retrieve the number of parameters that were passed in by using the arguments object, and you can use that information to determine what to do.

function sayMessage(message) {

   if (arguments.length === 0) {
      message = "Default message";
   }

   console.log(message);
}

sayMessage("Hello!");    // outputs "Hello!"