Bound and unbound expression in salesforce lightning

Expressions in Salesforce Lightning are evaluated much the same way that expressions in JavaScript or other programming languages are evaluated. Operators are a subset of these available in JavaScript, and evaluation order and precedence are generally the same as JavaScript. Parentheses enable you to ensure a specific evaluation order.

Expression in Salesforce Lightning

Expression in Salesforce Lightning allows users to make calculations and access property values and other data within component markup. Use expressions for dynamics output or passing values into the components by assigning them to attributes. An expression in Salesforce lightning is any set of literal values, variables, sub-expressions, or operators that can be resolved to a single value. Function calls are not allowed in Expressions.

  • The Expression syntax is either {#expression} or {!expression}

What is Bound Expression?

Anything inside the {!} delimiters is evaluated and dynamically replaced when the component is rendered or when the value is modified by the component. Whitespace is ignored. This is referred to as a bound expression.

What is Unbound Expression?

Anything inside {#} delimiters are evaluated and dynamically replaced when the component is rendered, however, its output is not refreshed when the value is modified by the component. This is referred to as an Unbound Expression.

The resulting value can be primitive, such as an integer, string, or boolean. It can so be a JavaScript object, a component or collection, a controller function such as an action function, and other useful results. If you are including literal values in expressions,

  • Enclose text values within single quotes, such as {#’ Some text ‘}.
  • Include numbers without quotes, for example, {#123}

To output, the value of a component attribute, use the following expression syntax {#v.attributeName} or {!v.attributeName}. The v prefix represents a value provider for the component view.

Numeric Literals inside Expression

We can use numeric literals inside of an expression, check the following example

Example:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <aura:attribute name="num1" type="Decimal" default="5"/>
    <div> 2 + {!v.num1} ={!2 + v.num1} </div>
    <div>2 + Null = {! 2 + null } </div>
</aura:component>
<aura:application >
    <c:Add2Numbers/>
</aura:application>
Expressions in Lightning

Running the code results in the following output

2 + 5 =7
2 + Null = 2

Expressions based on the Arithmetic operators

Expressions based on the Arithmetic operators result in numeric values. The standard operators of +, -, *, /, %, and – are all supported. Check the example below

<aura:component >
        <aura:attribute name="num1" type="Decimal" default="5"/>
        <aura:attribute name="num2" type="Decimal" default="5"/>
    <div class="expression">{!v.num1} + {!v.num2} =
    <span class="result">{!v.num1 + v.num2}</span>
    </div>
    <div class="expression">{!v.num1} - {!v.num2} =
    <span class="result">{!v.num1 - v.num2}</span>
    </div>
    <div class="expression">{!v.num1} * {!v.num2} =
    <span class="result">{!v.num1 * v.num2}</span>
    </div>
    <div class="expression">{!v.num1} / {!v.num2} =
        <span class="result">{!v.num1 / v.num2}</span>
    </div>
    <div class="expression">{!v.num1} % {!v.num2} =
    <span class="result">{!v.num1 % v.num2}</span>
    </div>
    <div class="expression">Negative {!v.num1} =
    <span class="result">{! -v.num1}</span>
    </div>
</aura:component>
Arithematic Operators in an Expression

Output

5 + 5 = 10
5 - 5 = 0.0
5 * 5 = 25.0
5 / 5 = 1.0
5 % 5 = 0.0
Negative 5 = -5.0

Using math Function

The following math functions are supported and all function names are case-sensitive.

FunctionAlternativeusageOperators
additionConcatadd(5,7)+
SubtractionSubtractsub()10,5
Multiplicationmultiplymulti(10,2)*
DivisionDividediv(8,4)\
Modmodulusmod(6,7)%
Abs abs(1) 
NegativeNegateneg(100)-(unary)

Example:-

<aura:component >
<aura:attribute name="num1" type="Decimal" default="5"/>
<aura:attribute name="num2" type="Decimal" default="5"/>
<div class="expression">{!v.num1} + {!v.num2} =
<span class="result">{!v.num1 + v.num2}</span>
</div>
<div class="expression">{!v.num1} - {!v.num2} =
<span class="result">{!v.num1 - v.num2}</span>
</div>
<div class="expression">{!v.num1} * {!v.num2} =
<span class="result">{!v.num1 * v.num2}</span>
</div>
<div class="expression">{!v.num1} / {!v.num2} =
<span class="result">{!v.num1 / v.num2}</span>
</div>
<div class="expression">{!v.num1} % {!v.num2} =
<span class="result">{!v.num1 % v.num2}</span>
</div>
<div class="expression">Negative {!v.num1} =
<span class="result">{! -v.num1}</span>
</div>
<div>6+5={#add(6,5)}</div>
<div>6-5={#sub(6,5)}</div>
<div>abs(-5)={#abs(-5)}</div>
</aura:component>

Output

5 + 5 = 10
5 - 5 = 0.0
5 * 5 = 25.0
5 / 5 = 1.0
5 % 5 = 0.0
Negative 5 = -5.0
6+5=11
6-5=1.0
abs(-5)=5.0

Using String Literals

String Literals must be enclosed in single quotation marks, Double quotation marks are reserved for enclosing attribute values, and must be escaped in strings. We use “\ ” character to escape strings

  • ‘\n’ for new line.
  • ‘\t’  for new Tab.
  • ‘\r’  for carriage return
  • ‘\”‘  for a double quote.
  • ‘\” for a single quote.
  • ‘\\’ for Backslash
Scroll to Top