How to understand this example of a logical and ternary operator?

Question

I understand that ternary operators are essentially a shortcut for an if-else statement, and I also understand that && is a logical AND. However, I don't understand how the two are combined in the code below.

I tried playing around with the output as well, but it didn't help. How do I interpret the following?

function greetUser(customerName, sex)  {
  var salutation  = sex && sex === "Man" ? "Mr." : "Ms.";
  console.log("Hello, " + salutation + " " + customerName);
}

score 3 · Accepted Answer · edited May 23 '17 at 11:52

Generally, the ternary operator means:

condition ? (value returned if condition is true) : (value returned if condition is false)

In your example, the condition is sex && sex === 'Man', which means that the value contained in the variable sex is truthy and strictly equal to the string "Man".

Here's the breakdown:

var salutation;
if(sex && sex === 'Man') {  
    salutation = 'Mr';
} else {
    salutation = 'Ms';
}

Furthermore, in this particular example, since you are using strict equality (i.e. ===) comparison, there isn't any point to the truthfulness check for sex, it is unnecessary. Your condition can just be:

var salutation = sex === "Man" ? "Mr." : "Ms.";

Explanation: When using &&, both operands are coerced to booleans first so their "truthfulness" can be AND-ed. For example, let's say sex = 'Man', then your condition would essentially be:

if('Man' && 'Man' === 'Man')

Which coerced to booleans is:

if(true && true)

Which is clearly redundant. Read more about JavaScript type coercion.

This truthy check is a good safety check in other situations that happen when using a non-strict comparison operator such as ==, <, > ... instead of ===.

In simple terms, using == first coerces both items to the same type before comparing which can lead to bugs. Using === immediately returns false if the types differ, hence it is safer.

Here's a another useful resource for JavaScript comparisons.

But why is the first `sex` needed at all? Why not just have the ternary operator? I don't see what purpose the first `sex` provides. — TheRealFakeNews, Jan 13 '16 at 04:41

score 2 · Answer 2 · answered Jan 13 '16 at 04:23

&& is a logical and defined as,

(true && true) == true
(true && false) == false
(false && true) == false
(false && false) == false

So, a statement A && B is only true if both A and B are true

In your case, with the ternary operator, some brackets might help so you can see in which order these operators are evaluated.

(sex && (sex === "Man")) ? "Mr." : "Ms."

So, in English...

if sex exists AND sex is 'Man' then "Mr." else "Ms."

In general the ternary operator works like this:

(true OR false) ? (value if true) : (value if false)

So the first `sex` is just to check if the argument is nonempty? Why not `!sex` instead then? — TheRealFakeNews, Jan 13 '16 at 04:43

score 1 · Answer 3 · answered Jan 13 '16 at 04:18

1

is sex is not undefined and sex is Man then Mr. ; else Ms.. So in case sex is undefined; it will be Ms. too.

answered Jan 13 '16 at 04:18

Tuan Anh Tran

6,807
6
37
54

score 0 · Answer 4 · answered Jan 13 '16 at 04:23

You can change the line

var salutation  = sex && sex === "Man" ? "Mr." : "Ms.";

to

var salutation  = ((sex) && (sex === "Man" ? "Mr." : "Ms."));

Now sex === "Man" ? "Mr." : "Ms." tells you that if the value of sex variable is Man and the type of both the variables is same(that is String in this case), then it should return Mr else Ms.

How to understand this example of a logical and ternary operator?

4 Answers4