Expression Basics

Statement Completion Values

When there's multiple statements in your expression, it's important to know what value After Effects will use for the property once the code is evaluated.

For example in the expression:

js
const myPosition = [960, 540];
myPosition * 2;
[0, 0];
const otherPosition = [500, 500];

js
0, 0;

The property will be set to [0, 0], but why?

What is a statement?

An expression is made up of a sequence of instructions to the JavaScript Engine which executes the code.

These instructions include tasks such as "assign this value to this variable", "return this value from the function", or "throw this error".

In JavaScript, these instructions are called statements.

A statement is an instruction to the JavaScript engine

Any piece of code is made up of a sequence of statements, and in JavaScript each statement is separated by a semi-colon (;).

JavaScript expressions

A unit of code that produces (or results in) a value, such as:

A value itself: "A string"
A mathematical operation: 12 * 5
A function call: wiggle(5, 12)

Is called an expression. To avoid confusion with After Effects expressions, JavaScript expressions will be italicized.

In the same way that an After Effects expression is code that produces the value for a property, a JavaScript expression is a piece of code that produces a value.

Expressions can be part of a statement, such as:

js
const aValue = 12 * 5;

Or as a statement itself:

js
12 * 5;

If a statement only contains a JavaScript expression, it is known as an expression statement.

Expression statements are statements that contain only an expression.

Completion values

In JavaScript, every statement has whats called a completion value.

Statements such as variable declarations (const myVariable = 2;) have a completion value of empty.

js
// Completion value: empty
const myVariable = 2;
// Completion value: empty
let someString = "hello";

While expression statements have a completion value that is the result of the expression.

js
[960, 540];
// Completion value: [960, 540]
Math.random();
// Completion value: 0.3
("Hello");
// Completion value: "Hello"

The result of an expression will be the last completion value that isn't empty.

This means that the value of a property will almost always be the result of the last expression statement.

Some other statements, such as if statements with falsy conditions, have a completion value of undefined

Wrapping up

So if we consider the completion values of each statement in our earlier expression:

js
const myPosition = [960, 540]; // empty
// Expression statement
myPosition * 2; // [1920, 1080]
// Expression statement
[0, 0]; // [0, 0]
const otherPosition = [500, 500]; // empty

js
0, 0;

You can see that [0, 0] will be used as it's the last statement with a non-empty completion value.

Knowing which statement will set the value for your expression becomes important as you write longer, more complex expressions.