admin管理员组

文章数量:1192353

In JavaScript, what is the difference between using

true ? 'Hello' : 'Goodbye' //Evaluates to "Hello"

false ? 'Hello' : 'Goodbye' //Evaluates to "Goodbye"

and

true && 'Hello' || 'Goodbye' //Evaluates to "Hello"

false && 'Hello' || 'Goodbye' //Evaluates to "Goodbye"

In JavaScript, what is the difference between using

true ? 'Hello' : 'Goodbye' //Evaluates to "Hello"

false ? 'Hello' : 'Goodbye' //Evaluates to "Goodbye"

and

true && 'Hello' || 'Goodbye' //Evaluates to "Hello"

false && 'Hello' || 'Goodbye' //Evaluates to "Goodbye"

• javascript
• conditional-statements
• conditional-operator

Share Improve this question Follow edited Jun 26, 2018 at 21:57 Ry-♦ 225k5656 gold badges489489 silver badges497497 bronze badges asked Jun 26, 2018 at 21:25 JackJack 1,07611 gold badge1313 silver badges3636 bronze badges 2

• 17 The latter is dependent on the value at "Hello" being truthy. Consider true && false || true vs true ? false : true – Hamms Commented Jun 26, 2018 at 21:29
• The first is much more readable IMO. – Cᴏʀʏ Commented Jun 26, 2018 at 21:29

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 13

These are two different concepts that happen to give you the same answer.

---

The first example uses the ternary operator and its result depends only on the first operand (in your example true/false):

true ? 'Hello' : 'Goodbye' //Evaluates to "Hello"
false ? 'Hello' : 'Goodbye' //Evaluates to "Goodbye"

It is a shorthand form of an if/else. If the first operand is truthy, return the second operand (Hello). If the first operand is falsy, return the third operand (Goodbye).

The first expression of your first example can be rewritten as:

if (true)
    return 'Hello';
else
    return 'Goodbye';

---

The second example makes use of logical operators and its result depends on both the first and the second operand.

true && 'Hello' || 'Goodbye' //Evaluates to "Hello"
false && 'Hello' || 'Goodbye' //Evaluates to "Goodbye"

If firstOperand && secondOperand evaluates to a truthy value, return secondOperand. If they evaluate to something falsy, return thirdOperand (Goodbye).

In your examples, since a non-empty string is truthy, true && 'Hello' evaluates to Hello, and false && 'Hello' evaluates to false.

So your second example turns into:

'Hello' || 'Goodbye'
false || 'Goodbye'

Because of how || works, that happens to output what your first example outputs, but they're different concepts.

Notice how in the first example, we know what to return after evaluating the first operand. In the second example, we have to evaluate the first two operands before we know what to return.

Ternary operator

This is a short hand of if else.

true ? 'Hello' : 'Goodbye'

is equivalent to

if (true) {
    'Hello'
} else {
    'Goodbye'
}

Logical predicates

whereas true && 'Hello' || 'Goodbye' is not an if else condition

true && 'Hello' || 'Goodbye'

is equivalent to

(true && 'Hello') || 'Goodbye'

This results in Hello but it's based on precedence. Consider the case of

'Goodbye' || (true && 'Hello')

This will result in Goodbye. Changing the order changes the output but that doesn't happen with a ternary operator.

Seems like there is no difference in outcome. BUT i had a guess on how they get processed. ()?: is actually a tiny bit faster than &&|| (See demonstration below).

(A)B?C: basically is a IF-Shorthand, so the (A) part gets evaluated and either the B then or C else stack is picked.

(A)&&B||C gets evaluated entirely. First the (A) gets evaluated. After that some implicit conversion(Boolean conversion) happens - which takes a bit of time

false - thx to "Gust van de Wal"

Still a difference: fiddle

var max = 1e7;

var start1 = (new Date()).getTime();
for( var i = 0; i < max; i++) {
  let a = (i%2) ? max-i : max+1;
  let b = (i%3) ? max-i : max+i;
}
var stop1 = (new Date()).getTime();

var start2 = (new Date()).getTime();
for( var i = 0; i < max; i++) {
  let a = (i%2) && max-i || max+i;
  let b = (i%3) && max-i || max+i;
}
var stop2 = (new Date()).getTime();

console.log( (new Date()).getTime() );

console.log( stop1 -start1 );
console.log( stop2 -start2 );

Your first case is an example of inline if statements, while your second is an example of logical predicates.

本文标签：