Conditions

Now that you have learned how to create and use variables, the next step is to make decisions based on their value.

You can make decisions in code with whats called a conditional statement.

This is a statement that executes different code based on a condition, such as whether one number is larger than another, or if a checkbox is enabled.

If/else statements

The most common conditional statement is an if statement. In basic terms, an if statement follows the format:

js
if (condition) {
  // Run when true
} else {
  // Run when false
}

And contains:

• The if keyword
• The condition expression in parenthesis, that will resolve to true or false
• A set of curly braces containing code that runs if the condition is true
• The else keyword
• A set of curly braces containing the code that runs if the condition is false

For example, if you apply the following expression on the Source Text property of a text layer:

js
if (true) {
  // This code is run
  ("Condition is true");
} else {
  ("Condition is false");
}

js
"Condition is true";

The layer will show the text 'Condition is true', while if we change it to false:

js
if (false) {
  ("Condition is true");
} else {
  // This code is run
  ("Condition is false");
}

js
"Condition is false";

You will see the text 'Condition is false'.

The else block is optional, in which case any code following the if statement will run as normal.

js
if (true) {
  ("Condition is true");
}
// Code here will always run

Condition statements

In the same way we've used the true or false keywords in the condition of our if statement, you can use any code that will resolve to be either true or false. Most of the time this will be a comparison between values, or a check if one value is equal to another.

Comparison operators

There's a variety of methods available in JavaScript to compare values called comparison operators. These operators form the basis of making choices in the condition statement.

The comparison operators test if two values are:

• === equal and the same type
• !== not equal and of the same type, or are of different types

Or test if one value is:

• < less than another
• > greater than another
• <= less than or equal to another
• >= greater than or equal to another

For example:

js
if (5 > 3) {
  // Evaluates to true
  ("Code will run");
}
if ("My String" === "Their String") {
  // Evaluates to false
  ("Code will not run");
}
if ("534" === 534) {
  // Evaluates to false
  ("Code will not run");
}

Certain values are considered falsy as they will always resolve to false, meaning you can test for them without a comparison operator. These are:

• The number zero 0
• Empty strings: "", ''
• The null object (absence of a value): null
• Undefined primitive: undefined

For example:

js
const myString = "";
if (myString) {
  // Evaluates to false
  ("Code will not run");
}

Else if

To select between more than two choices, you can write if statements back to back using else if. For example:

js
const jobTitle = "Animator";
if (jobTitle === "Animator") {
  ("Busy keyframing!");
} else if (jobTitle === "Developer") {
  ("Writing code!");
} else {
  // jobTitle isn't Animator or Developer
  ("Working hard!");
}

Logical operators (AND, OR and NOT)

You can test for a combination of conditions using what's called logical operators. They are:

• AND &&, to test if all expressions are true
• OR ||, to test if any expressions are true

With each side of the operator being a condition statement.

For example:

js
const software = "After Effects";
const version = 14;
if (version >= 16 && software === "After Effects") {
  // Doesn't run
  ("You can use JavaScript!");
} else {
  ("You can use ExtendScript");
}

js
"You can use ExtendScript";

Will show 'You can use ExtendScript' as version >= 16 evaluates to false, while:

js
const software = "After Effects";
if (software === "VS Code" || software === "After Effects") {
  // Runs
  ("Ready to code!");
} else {
  ("Busy working");
}

js
"Ready to code!";

Will show 'Ready to code!' as software === 'After Effects' evaluates to true.

You can use a third operator, the NOT ! operator, to negate an expression, such that:

js
!true === false;
!false === true;

For example:

js
const usingAfterEffects = false;
if (!usingAfterEffects) {
  // Will run
  ("Why not try AE?");
}

js
"Why not try AE?";

Wrapping up

Now you know how to use the if condition statement, as well as a variety of comparison and logical operators to make decisions in your expressions.