How is the ternary operator evaluated in JavaScript?

Question

Regarding the ternary (? :) operator in JavaScript, I would like to know how it is evaluated by a typical browser's JavaScript interpreter:

Alternative A:

Evaluate the first operand.
If the result of the first operand is true, then evaluate and return the second operand.
Else, evaluate and return the third operand.

Alternative B:

All three operands are evaluated.
If the result of the first operand is true, return the result of the second operand.
Else, return the result of the third operand.

Alternative C:

Of course, if neither alternative A nor alternative B accurately describe how the ternary operator works, please explain me how it works.

The "alternative A": (1)? functionOne(): functionTwo(), if you put a simple alert message on both functions, only functionOne will display its message. — JCOC611
– JCOC611, Commented Feb 23, 2011 at 21:27

JCOC611 · Accepted Answer · 2011-02-23 21:29:58Z

11

The "alternative A":

(1)? functionOne(): functionTwo()

If you put a simple alert message on both functions, only functionOne will display its message.

function functionOne(){ 
   alert("one");
}
function functionTwo(){ 
   alert("two");
}

answered Feb 23, 2011 at 21:29

JCOC611

19.8k15 gold badges72 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Felix Kling · Accepted Answer · 2011-02-23 21:29:06Z

11

According to the specification it works like in Alternative A:

The production ConditionalExpression : LogicalORExpression ? AssignmentExpression : AssignmentExpression is evaluated as follows:

Let lref be the result of evaluating LogicalORExpression.

If ToBoolean(GetValue(lref)) is true, then

Let trueRef be the result of evaluating the first AssignmentExpression.

Return GetValue(trueRef).

Else

Let falseRef be the result of evaluating the second AssignmentExpression.

Return GetValue(falseRef).

answered Feb 23, 2011 at 21:29

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Comments

Jesse Cohen · Accepted Answer · 2011-02-23 21:31:15Z

3

The ternary operator evaluates lazily for several reasons.

It's inefficient to evaluate all the operands when you are only going to return either the if or the else
Doing lazy evaluation allows you to do things like x != 0 ? 10 / x : 10; If it evaluated everything at the same time you would get a divide by zero error if x were zero

answered Feb 23, 2011 at 21:31

Jesse Cohen

4,07025 silver badges25 bronze badges

1 Comment

nrabinowitz Over a year ago

Sorry, random correction: No division by zero error in JS. 1/0 === Infinity

Kevin Dolan · Accepted Answer · 2011-02-23 21:30:24Z

2

Run this and find out:

function bool() {
    alert('bool');
    return false;
}

function a() {
    alert('a');
    return 'A';
}

function b() {
    alert('b');
    return 'B';
}

alert(bool() ? a() : b())

answered Feb 23, 2011 at 21:30

Kevin Dolan

5,1474 gold badges39 silver badges50 bronze badges

Collectives™ on Stack Overflow

How is the ternary operator evaluated in JavaScript?

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related