Script Expressions are short code blocks you can write in your prototype. They can be used in Page Actions or actions attached to component instances.

Script expressions let you retrieve and manipulate variables, perform complex math and logic tests, and use the results to update variables or trigger state changes and transitions directly in the prototype. You can use arithmetic, algebra, trigonometry, geometry and logical functions, as well as array and object data types.

Script expression are written within Actions and are most commonly used in conjunction with Variables. To read more about how Script Expressions can be used within actions to interact with variables check out our article on using variables in your projects


Syntax for writing script expressions

Script expressions in Atomic are built on the mathjs library, which is similar to JavaScript, but better suited to math. You can learn more about mathjs here. Note: You do not need to use the math. prefix when referencing mathjs functions in script expressions. 

Here’s an example. Let’s say in our prototype we have two form inputs, one collects a user’s income and the second collects expenses. Both inputs are linked to variables, so text entered will be updated in those variables automatically. Now, let’s say we have a Page action listening to the expenses variable, and when expenses changes we want the action to calculate the result of income minus expenses and put that result into a third variable named netIncome.

The syntax for this is:

netIncome = income - expenses 

The above expression reads: assign the variable named netIncome a value of income minus expenses. Like in JavaScript, we’ve cast the values of income and expenses as numbers in order to perform the numerical operation. Here’s the actions made:

Some tips on script expression syntax

Assign values to variables using =

Use the = symbol  to assign a value to a variable. For example the expression
var1 = var2 reads as change var1 to have the same value as var2

Use == to test equal-to

Use the == syntax to test if value on either side are equal. For example the expression var1 == var2 reads as is it true the var1 is equal to var2?

Cast variable values to the right format

When using variable values in script expressions you may need to cast them into the correct format. If you are doing multiplication, division, addition or subtraction those values will be auto-cast as numbers, however, when you are comparing strings using < and > they need to be cast.  For example to compare two variables both must be cast as numbers like this: 

number(var1) > number(var2) 


Set a variable value using a conditional logic test 

You can set the value of a variable using a conditional logic test like this:

var1 = number(var2) > 0  ? "Yay!" : "Oh rats"

This expression reads as if var2 is greater than 0 then set var1 to Yay! otherwise set  var1 to Oh rats.

Add comments to your expressions to communicate your intent

It's always a good practice to add comments to your script expressions so when you (or someone else!) returns to them later, they'll be easy to understand and debug. Any line that begins with an # will be treated as a comment and won't interfere with your expression. For example to set the default value for var1 :

var1 = 5

Tip: comments are also a great way to debug your code. If you want to remove one line from your expression to see if it's causing problems, just add an #  to the start of the line.

Bringing new variables into scope using assignment

If you want to create a new variable within a script expression you can do that by assigning a value to suitably formatted name for example newVar = “New Zealand” will create a new variable that is available for that review session, if it doesn’t already exist. If a variable names newVar already exists, then the value will simply be assigned to it.

Format a number as currency or date

Some JavaScript formatting functions are supported in script expressions. The most common example is currency. To convert a numeric value such as 25 in currency you could use the following to return: $25.00 :

var1 = 25

var1 = var1.toLocaleString("en-US", {style: "currency", currency: "USD", minimumFractionDigits: 2})


You could also store that function inside an advanced variable then call it from within a script expression. For example, with the date function above, you could create an advanced variable like this:

The value of the advanced variable formatCurrency in this example is:

formatCurrency(n) = n.toLocaleString("en-US", {style: "currency", currency: "USD", minimumFractionDigits: 2}) 

Now back in your prototype could you simply pass any numeric variable to the formatCurrency function and it would return the nicely formatted result. The expression you could use to do this is to return $25.00 :

var1 = formatCurrency(var1) 

Accessing the previous value of a variable

When the prototype is previewed all the variables used in the prototype are initialized and stored in an object called prevState. Every time a variable change event occurs the previous value of that variable can be accessed by calling theprevState function. For example, to access the previous value of a variable named income you’d write prevState.income 

Did this answer your question?