What is the exact difference between the ternary operator and && operator?

Question

I was just playing a code, and I found a little mysterious behavior with my code while turning the ternary operator into && and || operator:

let  a = 3;
a = a > 1 && 2 || a;
console.log(a);

let b = 3;
b = b > 1 ? 2 : b;
console.log(b);

// a and b both are same. It's fine.

const getAdjacentHighestProduct = (arr) => {
  let max = -Infinity;
  arr.reduce((a, c) => {
    let product = a * c;
    max = product > max ? product : max;
    return a = c;
  });
  return max;
};

const aProduct = getAdjacentHighestProduct([1, 0, 1, 0, 1000]);
console.log(aProduct);

const getAdjacentHighestProduct2 = (arr) => {
  let max = -Infinity;
  arr.reduce((a, c) => {
    let product = a * c;
    max = product > max && product || max;
    return a = c;
  });
  return max;
};

const aProduct2 = getAdjacentHighestProduct2([1, 0, 1, 0, 1000]);
console.log(aProduct2);

// aProduct, aProduct2 are not the same. It's not okay.

Also, here I can see the result is -Infinity for aProduct2. But while trying the same code in a test case, I am seeing the result is null, maybe it's due environment (browser vs node.js).

So, I am curious why both results are not the same and why is it returning -Infinity or null rather than 0?

So, what's exact difference between using a ternary operator and && || operator?

Here's the screenshot of the test result:

Have you checked one of countless JavaScript references on the Internet? You can read the complete spec if you like. — Pointy, Feb 15 '19 at 16:44
I'm getting 0 for aProduct and -Infinity for aProduct2. And in the test case I am getting `null` so why is it resulting different behavior? — Bhojendra Rauniyar, Feb 15 '19 at 16:44
Why not just `max = Math.max(product, max)` ? or `if(product > max) max = product` ? — Jonas Wilms, Feb 15 '19 at 16:46
@ııı yes sorry I started typing that before that comment :) — Pointy, Feb 15 '19 at 16:46
@JonasWilms I wanted to know the difference, so was playing code. — Bhojendra Rauniyar, Feb 15 '19 at 16:47
Maybe you can create a more basic example? I think you're being downvoted because your question seems a little odd since at first glance they seem to be apples and oranges. Or maybe this is more of an XY problem. What are you actually trying to accomplish and what's not working? — j08691, Feb 15 '19 at 16:48
@j08691 I wanted to know why aProduct2 is resulting `-Infinity` or `null` rather than 0? — Bhojendra Rauniyar, Feb 15 '19 at 16:49
I mean really. This question shows some medium complicated code and the question is then "I do change some operators and my code is returning different results?". — Mick, Feb 15 '19 at 17:02
@sjahan thanks for confirming that. But, it would be nice to know what they use for test cases. — Bhojendra Rauniyar, Feb 15 '19 at 17:13
@Pointy I would love to read the reference, can you please share the link if you know. Thanks. ( I didn't find anything interesting that would result `null` in my example case) — Bhojendra Rauniyar, Feb 15 '19 at 17:15
@BhojendraRauniyar well what exactly did your "test case" look like? The posted code cannot return `null`. — Pointy, Feb 15 '19 at 17:21
@Pointy for the same I am receiving the `null` in the test case. I'll post a screenshot in my post. — Bhojendra Rauniyar, Feb 15 '19 at 17:25
For what it's worth, `return a = c` has exactly the same effect as `return c` — Pointy, Feb 15 '19 at 17:33
Thanks @Pointy. Also, can you please share me the link you're trying to say me to follow on? I din't find anything like that. (I'm trying to develop my js skill better) — Bhojendra Rauniyar, Feb 15 '19 at 17:36
There's [the general "Expressions" stuff at MDN for starters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators). — Pointy, Feb 15 '19 at 18:00

score 4 · Answer 1 · answered Feb 15 '19 at 16:52

4

In case b is falsy, true ? b : c will be b whereas true && b || c will be c.

function ternary(a, b, c) {
  return a ? b : c;
}
function andOr(a, b, c) {
  return a && b || c;
}

console.log(ternary(1, 0, 3), andOr(1, 0, 3));

answered Feb 15 '19 at 16:52

P Varga

19,174
12
70
108

*hang on are you also being sarcastic?* – P Varga Feb 15 '19 at 16:57
@JonasWilms If not sarcastic, then are you sure it's `null` and not `NaN`? – P Varga Feb 15 '19 at 17:07
It's `null`, that's what amazed me to post the question. – Bhojendra Rauniyar Feb 15 '19 at 17:10
I can't see how it can be `null`. Can you post an example that reproduces that? Because you omit the initial value in `reduce()`, it will be `let product = undefined * 1`, which is `NaN`, but not null – P Varga Feb 15 '19 at 17:12
1

@ııı if the second argument to `reduce` is omitted, the first iteration will be for the *second* value in the array, and the reduce "accumulator" will start off as the first value in the array. Thus the first iteration would have `a` as 1 and `b` as 0. – Pointy Feb 15 '19 at 17:15
@Pointy Oh, true. – P Varga Feb 15 '19 at 17:16

score 1 · Accepted Answer · answered Feb 15 '19 at 17:23

1

Thanks everyone! I got the answer. Let's break them here:

(I hope, you understand, don't think to give explanation)

0 > -Infinity && 0 || -Infinity
false > -Infinity && false || -Infinity
false > -Infinity

The null value was my key point of curiosity. Ah, I just found the right answer:

var a = {b: Infinity, c: 10};
console.log(JSON.stringify(a));

So, I think they use JSON.stringify to satisfy the test result.

answered Feb 15 '19 at 17:23

Bhojendra Rauniyar

83,432
35
168
231

Your question made no mention of `JSON` though – P Varga Feb 15 '19 at 17:26
@ııı yeah, I'm not sure what they use in their test cases. I just inserted a screenshot in my post. – Bhojendra Rauniyar Feb 15 '19 at 17:29
1

Ah, thats why I couldn't find the `null` ... :) – Jonas Wilms Feb 15 '19 at 18:04

score -2 · Answer 3 · edited Feb 15 '19 at 16:55

-2

The difference is: they do different things. ;)

Ternary Operator

x = c ? a : b

if c then
  x = a;
else
  x = b;
end if

Logical AND

x = a && b

Logical OR

x = a || b

edited Feb 15 '19 at 16:55

Wai Ha Lee

8,598
83
57
92

answered Feb 15 '19 at 16:47

Mick

954
7
17

1

I know that, but in my particular example why results are different? – Bhojendra Rauniyar Feb 15 '19 at 16:48
1

Because you changed the operators? – Mick Feb 15 '19 at 16:50
What do you even intend to do with this line?? You know that you're mixing boolean and integer values? a = a > 1 && 2 || a; – Mick Feb 15 '19 at 16:51
1

JavaScript has short-circuiting. Please look that up before trying to be clever. Also there are no integers in js. – Jonas Wilms Feb 15 '19 at 16:51
@JonasWilms I will be waiting for your answer, really. – Bhojendra Rauniyar Feb 15 '19 at 16:52
not trying to be clever. I try to be dumb to clarify your question. Is your question about short circuiting? Why not make an easy example? – Mick Feb 15 '19 at 16:53

What is the exact difference between the ternary operator and && operator?

3 Answers3

Ternary Operator

Logical AND

Logical OR