Skip to main content Accessibility Feedback

Ternary Operators

Ternary operators provide you with a way to write more concise if...else variables. For example, you might set a conditional variable like this:

var getSandwich = function (useMayo) {
    var sandwich;
    if (useMayo) {
        sandwich = 'turkey';
    } else {
        sandwich = 'peanut butter & jelly';
    }
    return sandwich;
};

The function above could be slightly improved like this:

var getSandwich = function (useMayo) {
    var sandwich = 'peanut butter & jelly';
    if (useMayo) {
        sandwich = 'turkey';
    }
    return sandwich;
};

But, with a ternary operator, we can reduce it to just two lines like this:

var getSandwich = function (useMayo) {
    var sandwich = useMayo ? 'turkey' : 'peanut butter & jelly';
    return sandwich;
};

Here’s how it works.

The part before the ? is a statement to evaluate. It works just like an if statement, and can include multiple conditions using && (and) and || (or).

The section between the ? and : is the value of the variable if the evaluated statement is true. The part after the : is the value if it’s false.

var someVariable = the thing to evaluate ? the value if it's `true` : the value if it's `false`;

If you’ve never seen them before, ternary operators can be a bit confusing. But once you start using them, they keep your code base smaller and can be easier to read.


🚀 I just relaunched my Vanilla JS Pocket Guides with new code examples and real projects to help tie everything you’ll learn together. Check it out.

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Daily Developer Tips