The ternary operator offers a simpler way of writing if/else statements in Javascript.
When I first started learning Javascript for After Effects, it was staple to write if/else statements. If this, do that, otherwise, do something else. If this text is All Caps, make this Yellow, otherwise, keep this Black. This kind of statement is the rice and beans and bread and butter in the expressions world.
But it’s a clunky structure. Even after writing it so many times, I often get confused. Sometimes seeing the words If and Else can help me understand the logic of an expression, but overall I like shortcuts. I like simple. I like different ways of saying something.
Turns out you can use something called a ternary operator.
Ternary means composed of three parts. So the ternary operator is a way of writing if/else statements in three parts.
Syntax:
condition ? exprIfTrue : exprIfFalse
This translates to:
If this condition is true, do this expression. Otherwise, do this other expression.
The way I like to read this syntax as my eyes scans it from left to right is to ask: “Is this condition true or not?” The question mark frames the first part as a question.
After framing the question, I envision two columns. One column to the left of the colon, and the second column to the right of the colon. The colon itself acts as a vertical border. There’s a separation between True and False.
If the condition is True, I go with the expression that’s tied to True. And if the condition is False, I go with the expression that’s tied to False.
Let’s use the example from the beginning. We have a line of text. If I make it All Caps, then I want it to automatically turn Yellow. If it’s not All Caps, then I want it to be Brown.
Here’s how I would write that statement with a ternary operator:
Note: I would be applying this expression to the Source Text field of the text layer.
Condition: var capsOrNah = thisProperty.style.isAllCaps;
Here, I’m looking to see whether the text is set to All Caps.
exprIfTrue: style.setFillColor(hexToRgb("FDDA00"))
If true, set the fill color to this specific yellow.
exprIfFalse: style.setFillColor(hexToRgb ("4F2E43"))
If false, set the fill color to this specific brown.
Putting the three parts together:
var capsOrNah = thisProperty.style.isAllCaps;
capsOrNah ? style.setFillColor(hexToRgb("FDDA00")) : style.setFillColor(hexToRgb ("4F2E43"))
To wrap up, this is how I would write this as a traditional if/else statement:
var capsOrNah = thisProperty.style.isAllCaps;
If (capsOrNah) {
style.setFillColor(hexToRgb("FDDA00"))
} else {
style.setFillColor(hexToRgb ("4F2E43"))
}
The If/Else structure is also easy on the eyes for this example. You might find yourself preferring If/Else. There’s no right or wrong. But the ternary operator is here for you, if you’d like to go easy on the curly brackets and line breaks. Either way, it’s the construction of the logic itself that will make your mind do mental gymnastics. That’s the fun part.
For more on the text style expressions in this example, see Adobe.