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:<

Answer 1

According to the specification it works like in Alternative A:

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

1. Let lref be the result of evaluating LogicalORExpression.
2. If ToBoolean(GetValue(lref)) is true, then
   • Let trueRef be the result of evaluating the first AssignmentExpression.
   • Return GetValue(trueRef).
3. Else
   • Let falseRef be the result of evaluating the second AssignmentExpression.
   • Return GetValue(falseRef).

Answer 2

The ternary operator evaluates lazily for several reasons.

1. It's inefficient to evaluate all the operands when you are only going to return either the if or the else
2. 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

Answer 3

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())

Answer 4

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");
}