Functions

While you may not have seen functions used often in expressions, they are a fundamental component of the JavaScript language.

Understanding how to create and use functions will enable you to write more readable and reusable code throughout your projects.

Functions overview

Functions allow you to encapsulate sections of code, which you can then run at anytime throughout your expressions. The code within the function can be anything you can run in an expression, from calculating values to referencing layers and compositions.

Below is an example function to multiply two numbers together:

js
function multiply(numberA, numberB) {
  return numberA * numberB;
}
multiply(2, 12);

js
24;

Reasons for using functions

Using functions in your expressions allows you to encapsulate sections of your code in separate units, breaking down long expressions into simpler and easier to read chunks.

Built in functions

If you have some experience with expressions, you've probably been using functions in already. This is because there are functions built into After Effects, such as:

• framesToTime()
• random()
• linear()

Understanding the fundamentals of how to create and run your own functions will deepen your understanding of how to best use these built in functions.

Parts of a function

Function declarations contain :

• The function keyword at the start

js
function

• The name of the function

js
function functionName

You use this name when running (also known as calling) the function. It's best to give a descriptive name that reflects what the function does.

• Optionally the function parameters, enclosed in parenthesis (()) and separated by commas (,).

js
// A function with parameters
function functionName(parameterOne, parameterTwo);
// A function without parameters
function anotherFunction();

• The body of the function, enclosed in brackets ({}). The function body is the code that is run when calling the function.

js
function functionName(parameters) {
  functionBody;
}

The function body can optionally include a return statement. This is the keyword return followed by a value you wish to "send back" to where the function was called.

Function parameters

Function parameters (also known as the function arguments) create variables with that name, which are available to the function body. You then perform actions on these variables and return the desired output.

js
function multiply(numberA, numberB) {
  // numberA = 2
  // numberB = 12
  return numberA * numberB;
}
multiply(2, 12);

When calling the function, you pass in the values for these variables to take. The value of each variable depends on the order of the parameters, for example parameter one will be value one, and parameter two value two, and so on.

Default parameter values

You can also specify a default value for a function parameter.

You create a default value for a parameter by writing the equals sign (=) followed by the default value you wish to set.

For example:

js
function multiply(numberA, numberB = 12) {
  // numberA is 2
  // numberB is 12
  return numberA * numberB;
}
multiply(2);

js
24;

If you don't provide a value for that parameter in the function call, the default value will be used instead.

Scope

These variables are not accessible outside of the function, as they are scoped to the function. These means you don't need to worry about using conflicting variable names.

Any variables created inside the function are also not available outside the function.

For example:

js
function multiply(number) {
  const amount = 5;
  return number * amount;
}
amount * 2;

js
'amount' is missing or does not exist

Results in an error, as there is no amount variable available outside the function body.

Not using parameters

Since a function has access to variables defined outside of it's function body, it's possible to avoid using function parameters and always reference external variables.

js
const number = 2;
const amount = 5;
function multiply() {
  return number * amount;
}
multiply();

In this case, the function output becomes dependant on the code outside of the function.

This makes the function harder to understand and reuse, so it's recommended to always use function parameters rather than outside variables.

Return statements

You use the keyword return in a function to stop executing it's function body, and return a value to where the function was called.

js
function sayHi(name) {
  return "Hi " + name + "!";
}
sayHi("AE user");

js
"Hi AE user!";

You can place any code next to a return statement that produces a value, such as a variable, multiplication, string. For example:

js
return someValue;
return 12 * 3;
return aString + "a value";
return true;

Are all valid return statements.

You may break up a return statement into multiple lines, as long as you wrap the value in parenthesis (()). For example:

js
return aString + "a value";

You can place a return statement anywhere within the function body, such as nesting it within conditions.

js
function isUsingAfterEffects(user) {
  if (user.currentProgram === "After Effects") {
    return true;
  } else {
    return false;
  }
}

Functions without a return statement

If you omit the return statement from a function, it will return the JavaScript value undefined.

An empty return statement (a return keyword by itself) will also return undefined.

js
function emptyReturn(valueA, valueB) {
  // No return statement
  valueA * valueB;
}
emptyReturn(12, 8);

js
undefined;

Running functions

As you've seen throughout this article, you can run (or execute) functions by writing the function name, followed by parenthesis (()) and then it's parameters.

js
functionName(parameters);

This runs the code inside the function body and then "produces" the return value. This is known as calling the function.

Since calling a function produces a value, you can call a function in your expression wherever you could place a value. For example:

js
// In a variable assignment
const someValue = functionName(parameters);
// In conditions
if (functionName(parameters)) {
  // Some code
}
// In an expression statement
functionName(parameters) + 12;

Since function calls produce a statement completion value that's either undefined or the return value, you can use them to set the value of an expression. For example:

js
function sayHi() {
  return "Hello!";
}
sayHi();

js
"Hello!";

Sets the value of the property to "Hello!", the return value of the function.

Call/definition order

In this article you've seen the function definition above the function call.

You can also place the function definition below the function call, which in some cases can improve readability.

js
// Function call above the function definition
const message = sayHi();
function sayHi() {
  // function body
}
message;

Since the completion value for a function declaration is the function itself, ending your expression with a function declaration will result in either:

• Setting the property to the function code as a string, if it's on a text property
• An error

Wrapping up

Now that you have learnt the different parts of a function, as well as how to create and call your own, you can be confident using the functions built into After Effects.

Using your own functions in your expressions will also enable you to break up complex expressions into smaller, simpler parts, making them easier to read and reuse.

In the next article, you'll take a closer look at the functions built into After Effects objects such as compositions and layers, known as native methods.