Expression Basics

Variables

In this Expression Basics article, you will learn how to create and use variables in your expressions. This will provide a solid foundation when moving on to later articles in the series.

Variables as pointers

When writing any expression you will need to manipulate and store pieces of data (or values) such as numbers, text, or booleans (true/false). For example, setting the following expression on the Source Text property of a text layer.

js
"Hello world";

This will cause the text layer to show 'Hello World'. If you want to use this text throughout your expression, writing 'Hello World' each time would become tedious.

js
if (time < 5) {
("Hello world");
} else if (time < 10) {
"Hello world" + " welcome to";
} else {
"Hello world" + " welcome to" + " expressions";
}

If you don't understand the other parts of this expression, don't worry! We'll get to them in the following posts in the series.

Instead of using a value directly, variables allow you to create a named reference which you then use throughout the expression.

It's important to note that a variable isn't the value itself, but rather a pointer to that piece of data. When the JavaScript engine (what runs the code) encounters one, it looks to see what the variable is pointing to then uses and that value accordingly.

While this might not seem like an important distinction now, it will be as you move on to more advanced topics.

Declaring variables

Before you can use a variable you need to create (or declare) it by using the JavaScript keyword let, followed by the variable name.

A keyword (or reserved word) is any word that has a special meaning in the language.

js
let myText; // Variable declaration

Once you've declared a variable, you can retrieve the data it points to by writing it's name.

js
let myText;
myText;

If you apply this expression on the Source Text property of a text layer, you'll see that your text layer is still empty. That's because while you have created the variable, it doesn't have a value assigned to it yet.

Naming variables

There's some limitations apply when naming variables, as well as some best practices to keep in mind.

Some names that aren't allowed are:

  • Names starting with a number
  • Reserved words such as if, function, or for (you can find a full list of reserved words here)

It's best to give variables a descriptive name and not single letters or numbers. This will make your code much easier for other people, or your future self, to read.

The convention is to write variable names in lower camel case, where you capitalize the first letter of every word except for the first one, such as myText, animationDuration, or currentLayerWidth.

Undefined vs is not defined

JavaScript gives variables that don't point to anything a special value called undefined.

It's important to note that this is different to when you try to access a variable that isn't declared, in which case you will get the error variable is not defined. You can test this by modifying your expression to:

js
let myText;
myText === undefined; // true
js
true;

Will show the value true, while the expression:

js
myText === undefined; // Throws an error
js
Error: myText is not defined

Will give the error myText is not defined, since you've tried to access a variable that isn't declared.

Assigning their value

Once you've declared a variable, you can give it a value by writing it's name followed by the equals sign (=) and then the value you want to give it. Assigning a variable's value the first time is called 'initializing' that variable.

js
let myText;
myText = "Hello world"; // Variable initialization

If you now use the variable myText, it's value is returned and set as the Source Text of the text layer.

js
let myText;
myText = "Hello world";
myText;
js
"Hello world";

You can shorten the expression by declaring and initializing in the same line, which is what's done the majority of the time.

js
let myText = "Hello world";
myText;
js
"Hello world";

Updating variables

As suggested by their name, you can change the value that a variable points to at any place in the expression by using the equals (=) sign:

js
let myText = "Hello world";
myText = "Hello JavaScript!"; // Change myText variable
myText;
js
"Hello JavaScript!";

Which will display 'Hello JavaScript!' on the text layer.

Var vs let

If you're written expressions before, you might be wondering why we've been using let, and what happened to var.

let is a new way to declare variables available in modern versions of JavaScript (such as what is used in CC2019). It's introduced to be a more strict alternative to var, which would allow you create and use variables in ways which could cause confusion or hard to diagnose bugs.

We won't cover the differences between the two in this post, but for now all you need to know is it's best to use let in your expressions.

Constants

We've been using let to declare variables, which as the name suggests, allow you to change the value at any point in the expression.

You can also create what's called a constant, which behaves much like a variable except that you cannot reassign it's value once it has been initialized. It's a read only variable.

We do this by using the keyword const instead of let.

js
const myText = "Hello world";
myText;

If we tried to reassign the value of myText, we would get the error 'Assignment to constant variable'.

js
const myText = "Hello world";
myText = "Hello globe"; // Returns error
js
Error: Assignment to constant variable

It's important to note that while you can't change which value a constant references (points to), that underlying value can still be modifed.

For example if you had a constant that pointed to a 'person', you couldn't change which person it referenced, but you could change that persons characteristics such as their height or weight.

Why use a constant

It may be tempting to use let instead of const throughout your expressions since it's more flexible. However it might be easier to understand what's happening in an expression when you know a variable hasn't been reassigned.

For example, if you had this expression on a Source Text property:

js
let dialog = "Hello World";
if (time > 10) {
dialog = "Goodbye World";
}
dialog;

When reading this expression, you would need to go back and check where the last place the value of dialog had been changed was to know what your text would be. In larger expressions with more complex flows, this can be difficult.

If you use a constant instead you can be more confidant in the value of each variable without having to look through the entire expression.

js
const helloDialog = "Hello World";
const goodbyeDialog = "Goodbye World";
if (time > 10) {
goodbyeDialog;
} else {
helloDialog;
}

This might seem trivial in this example, but it's a good habit to always use const where possible.

Wrapping up

Now you know how to use let and const to create and use variables, as well as best practices that will help you as you go on to write more complex expressions.

For enquiries contact us at hey@motiondeveloper.com