Expression Evaluation

Expressions are evaluated much the same way that expressions in JavaScript or other programming languages are evaluated.

Operators are a subset of those available in JavaScript, and evaluation order and precedence are generally the same as JavaScript. Parentheses enable you to ensure a specific evaluation order. What you may find surprising about expressions is how often they are evaluated. The framework notices when things change, and trigger re-rendering of any components that are affected. Dependencies are handled automatically. This is one of the fundamental benefits of the framework. It knows when to re-render something on the page. When a component is re-rendered, any expressions it uses will be re-evaluated.

Action Methods

Expressions are also used to provide action methods for user interface events: onclick, onhover, and any other component attributes beginning with "on".

Action methods must be assigned to attributes using an expression, for example {!c.theAction}. This assigns an Aura.Action, which is a reference to the controller function that handles the action.

Assigning action methods via expressions allows you to assign them conditionally, based on the state of the application or user interface. For more information, see Conditional Expressions.

<aura:component>
    <aura:attribute name="liked" type="Boolean" default="true"/>
    <lightning:button aura:id="likeBtn"
     label="{!(v.liked) ? 'Like It' : 'Unlike It'}"
     onclick="{!(v.liked) ? c.likeIt  : c.unlikeIt}"
    />
</aura:component>

This button will show "Like It" for items that have not yet been liked, and clicking it will call the likeIt action method. Then the component will re-render, and the opposite user interface display and method assignment will be in place. Clicking a second time will unlike the item, and so on.

Note

Note

The example demonstrates how attributes can help you control the state of a button. To create a button that toggles between states, we recommend using the lightning:buttonStateful component.