Simon Ugorji
Execute Multiple Actions in A Ternary Block

Execute Multiple Actions in A Ternary Block

Simon Ugorji's photo
Simon Ugorji
·

3 min read

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.

image.png

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.

image.png

image.png

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

image.png

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!

JavaScriptPHP