Ternary Operators In JavaScript

David Okpare — Mon, 27 Aug 2018 17:06:29 +0000

Are you tired of repeating yourself while coding? Do you still use the traditional ‘if…else’ blocks? What if I told you, you could write 15 lines of code in 4 lines? Call 1–800-TERNARY-OPERATORS now.

In computer programming, ?: is a ternary operator that is part of the syntax for basic conditional expressions in several programming languages.

Ternary Operators are the shorthand version of if…else statements. It is the only conditional operator in JavaScript that takes three operands.

The basic syntax for ternary operators is condition ? expression1 : expression2

where the condition is the value to be tested/evaluated,
expression1 can be value(s) of any type to be executed if the condition is true
expression2 can be value(s) of any type to be executed if expression1 is false i.e fallback value commonly know as ‘else’
“ ? ” means “IF”, and “ : “ means “else”

Let’s look at an example

If we were to determine if one is allowed to drive by their ages, using the if…else statements — it looks something like this

var age = 18;

if (age >= 16) {
   alert("You're allowed to drive!");
}

else {
   alert("You should be 16 to drive!");
}

// "You're allowed to drive!"

Using ternary operators, the same code will look like this

var age = 18;

alert (age >= 16) ? "You're allowed to drive!" : "You should be 16 to drive!"

// You're allowed to drive!

Voila! This block of code will translate to IF variable ‘age’ is greater or equal to 16, the browser should alert ‘You’re allowed to drive!’, ELSE ‘You should be 16 to drive!’ should be alerted!

Another reason to adopt ternary, is it’s flexibility and miniature size which could fit anywhere in your code. For example, if you want to attach the the result of your string directly to a string, you can easily do that without having to declare your condition separately.

var isMember = true;
'The fee is ' + (isMember ? '$2.00' : '$10.00'); // The fee is $2.00

IF isMember is true , ‘The fee is $2.00’, ELSE ‘The fee is $10.00’.

Guess what?! You can also assign the results of the ternary operations to variables. Let’s use the same driving example we used earlier.

var age = 18;
var canDrive = (age >= 16) ? "You're allowed to drive!" : "You should be 16 to drive!";
console.log(canDrive); // "You're allowed to drive!"

In this example, we saved the result in a variable and later displayed it in the console.

There’s just as much possible in ternary operators as in the traditional if…else block. Multiple ternary operators can be chained together to form what we call ‘IF…ELSE IF…ELSE” block.

var year = prompt('Which year was the 2018 World Cup?', '');
alert(year < 2018) ? 'Too early' : (year > 2018) ? 'Too late' : 'Exactly!'; 

// Exactly!

The block of code above will translate if the year is less than 2018, the browser should alert ‘Too early’, or else, if the year is greater than 2018, ‘Too late’ will be displayed, else if it’s not greater or lesser than i.e equal to, then ‘Exactly’ will be displayed.

You can also have nested if statements:

var statement1 = true;
var statement2 = true;

var check = statement1 ? (statement2 ? "True, Yes!" : "True, False!") : 'False';

console.log(check); // True, Yes!

Our eyes scans codes vertically, which indentation and spaces play great parts in helping us read the codes easily. They are not excluded in ternary, and free spaces don’t affect your code.

var stop = false, age = 23;

age > 18 ? (
    alert('OK, you can go.')
) : (
    alert('Sorry, you are much too young!')
);

The code above will work just as well as any ternary evaluation or any if…else operation.

It is also possible to have multiple operations per case, and separate them with a comma.

var age = 16;

var auth = age > 18 ? (
    alert('OK, you can go.'), 
    // alert returns "undefined", but it will be ignored because
    // isn't the last comma-separated value of the parenthesis
    'APPROVED' // the value to be assigned if age > 18
) : (
    alert('You are much too young!'),
    alert('Sorry :-('),
    // etc. etc.
    'DISAPPROVE' // the value to be assigned if !(age > 18)
);

location.assign(auth); // "DISAPPROVE"

Last but not the least, ternary operations can be used to return values in functions. For example, if we were to write a function to return a value to determine if Chris Pratt is a member of the Marvel Universe or not;

var marvel = true;

function chrisPratt(marvel) {
  if (marvel === true){
return "I am Star-Lord!";
}
else {
return "Have you watched Guardians of the Galaxy?";
}

}
var output = chrisPratt(marvel);
console.log(output); // "I am Star-Lord!"

Notice we used return multiple times and had to write the if…else statement and embed their values in curly brackets etc, which is great. But it can be shortened using ternary operators. The same code above will be evaluated as such in ternary operation;

var marvel = true;

function chrisPratt(marvel) {
  return (marvel === true) ? "I am Star-Lord!" : "Have you watched Guardians of the Galaxy?";
}
var output = chrisPratt(marvel);
console.log(output); // "I am Star-Lord!"

Note: All variables used in a ternary operation should be defined before the operation is created.

One more thing, it is recommended not to nest ternary operators, because it may be difficult to understand.

Good programmers write code that humans can understand. So it will be great not to overuse these ternaries expressions, but use them in specific instances.

Ternary Operators may seem obscure or ambiguous for most developer and most people who don’t know, but it’s a great way to refactor your code. And with enough practice, you will be able to understand it whenever you see it in your code or other developer codes.

Explain CSS Positioning Like I'm Five

David Okpare — Mon, 18 Jun 2018 16:00:56 +0000

Please explain how to position elements in CSS like I'm Five

How do web developers/freelancers build websites in time?

David Okpare — Wed, 25 Apr 2018 10:47:16 +0000

How do web developers or freelancers build websites nowadays in time?

From scratch (Pure HTML,CSS, JS etc) or Website Templates or CMS or Website builders?

Please Mention the tools you use or how you build websites :)

How much do you need to know or learn before calling yourself a developer?

David Okpare — Tue, 24 Apr 2018 13:03:58 +0000

Can anyone tell me what I need to know or learn before I can call myself a front end developer or a back end developer, maybe even a full stack? And is it possible to become one of this developer in a year or two? Any path or resources to learn from will be great :) Thanks!

DEV Community: David Okpare

Ternary Operators In JavaScript

Explain CSS Positioning Like I'm Five

How do web developers/freelancers build websites in time?

How much do you need to know or learn before calling yourself a developer?