Conditional Operator

The conditional (ternary) operator is the only JavaScript operator that takes three operands. This operator is frequently used as a shortcut for the if statement.

Syntax

condition ? expr1 : expr2 

Parameters

condition (or conditions)

An expression that evaluates to true or false.

expr1, expr2

Expressions with values of any type.

Description

If condition is true, the operator returns the value of expr1; otherwise, it returns the value of expr2. For example, to display a different message based on the value of the isMember variable, you could use this statement:

'The fee is ' + (isMember ? '$2.00' : '$10.00');

You can also assign variables depending on a ternary result:

var elvisLives = Math.PI > 4 ? 'Yep' : 'Nope';

Multiple ternary evaluations are also possible (note: the conditional operator is right associative):

var firstCheck = false,
    secondCheck = false,
    access = firstCheck ? 'Access denied' : secondCheck ? 'Access denied' : 'Access granted';
  
console.log(access); // logs "Access granted"

You can also use multiple conditions like in a multiple-conditions IF statement

var condition1 = true,
    condition2 = false,
    access = condition1 ? (condition2 ? "true true": "true false") : (condition2 ? "false true" : "false false");

console.log(access); // logs "true false"

Note: The parentheses are not required, and do not affect the functionality. They are there to help visualize how the outcome is processed.

You can also use ternary evaluations in free space in order to do different operations:

var stop = false, age = 16;

age > 18 ? location.assign('continue.html') : stop = true;

You can also do more than one single operation per case, separating them with a comma, and enclosing them in parenthesis:

var stop = false, age = 23;

age > 18 ? (
    alert('OK, you can go.'),
    location.assign('continue.html')
) : (
    stop = true,
    alert('Sorry, you are much too young!')
);

You can also do more than one operation during the assignation of a value. In this case, the last comma-separated value of the parenthesis will be the value to be assigned.

var age = 16;

var url = 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
    'continue.html' // the value to be assigned if age > 18
) : (
    alert('You are much too young!'),
    alert('Sorry :-('),
    // etc. etc.
    'stop.html' // the value to be assigned if !(age > 18)
);

location.assign(url); // "stop.html"

Returning Ternary Statements

The ternary operator lends itself well to function returns that would otherwise require an if/else statement.

var func1 = function( .. ) {
  if (condition1) { return value1 }
  else { return value2 }
}

var func2 = function( .. ) {
  return condition1 ? value1 : value2
}

A good way to spot that the ternary will be a suitable replacement for an if/else statement is when the return keyword is used multiple times and is the only expression inside of the if block.

By breaking the ternary onto multiple lines and making use of extra whitespace, the ternary operator can be used to very cleanly replace a lengthy series of if/else statements. This provides a syntactically light way of expressing the same logic:

var func1 = function( .. ) {
  if (condition1) { return value1 }
  else if (condition2) { return value2 }
  else if (condition3) { return value3 }
  else { return value4 }
}

var func2 = function( .. ) {
  return condition1 ? value1
       : condition2 ? value2
       : condition3 ? value3
       :              value4
}

Specifications

Browser compatibility

See also

• if statement