I've written quite a few tutorials on Ternary Operators about how you can initialize and use them, how you can nest more blocks, and in this tutorial, I will show you how you can execute multiple actions in a ternary block.

I will combine the lessons from the previous tutorials with this tutorial to create an advanced ternary block.

SYNTAX AND USAGE

(condition_to_check) ? (action_to_execute_if_condition_is_true) : (action_to_execute_if_condition_is_false)

Now we have a variable (x) with a value of 20 ;

var x = 20;
( x == 20 ) ? (console.log("x is 20")) : (console.log("x is not 20"))

If we run the code, we will get the output x is 20.

That's how you use a Ternary operator.

Nesting Ternary Blocks

We can nest a ternary block in order to use the **else if () ** statement.

By Nesting, I mean repeating your ternary block just after the **colon ( : ) ** mark.

Now the colon mark can serve 2 functions which include;

An else{} statement and
else if() statement

Let me show you what I mean, using our previous example.

var x = 20;
( x == 0 ) ? (console.log("x is 0")) :
( x == 10 ) ? (console.log("x is 10")) :
( x == 20 ) ? (console.log("x is 20")) :
(console.log("x is unknown"));

If we should rewrite the code above using the native if / else statements

var x = 20;
if( x == 0 ) {
(console.log("x is 0"));
}else if( x == 10 ) {
(console.log("x is 10"));
}else if( x == 20 ) {
(console.log("x is 20"));
}else {
(console.log("x is unknown"))
}

Whichever method you choose, the output will still be the same, just like the images below.

Execute Multiple Actions in a Ternary Block

Now, for today's tutorial, I will show you how to execute multiple codes/actions in a ternary block.

For us to be successful with this, we must group the actions together using a bracket, then we will separate the actions/codes using a comma.

Crazy right? Let us use the previous code to demonstrate this.

var x = 0; var y = 0; var z = 0;
(!x && !y && !z) ? (
console.log('reassigning the variables'),
x = 10,
y = 10,
z = 10,
console.log("x is now "+x),
console.log("y is now "+y),
console.log("z is now "+z),
console.log('variables have been reassigned')
) :
console.log('variables are not empty');

This is the output below

What's the Logic?

Seriously no much logic was added to the code above.

We started off by declaring variables (x, y, and z ) and assigning zeros (0) to them.

Now we use a ternary block to check if they are empty or contain 0 values.

Any variable with a zero value can as well be said to be empty.

If the condition is true, we start reassigning the variables by grouping the block with a bracket then executing the actions one after the other by separating them with a comma.

Note that the last action to be executed does not need a comma after it.

That been said, I hope you now understand what you can do with Ternary Operators

If I find another interesting feature with regards to ternary operators, I will keep you updated!

Thank You!