0

I have an example similar to this where the first expression evaluates to false and the second is undefined but the overall expression returns undefined into valueResult, shouldn't the first false value terminate the check and return false?

valueResult = false && 10 === 5 ? 'match' : undefined

I have added console log statements and a debugger and this is what is happening, however when I do false && undefined on the browser console, it returns false.

j obe
  • 1,759
  • 4
  • 15
  • 23
  • 1
    honestly, how are we supposed to support you there? You are right - short circuit should definitely return false. Please provide your real data or anything – Igor Gonak May 31 '22 at 18:35
  • I've updated the code to match more closely to what I'm seeing. The actual code was on another machine so I'm giving an identical example – j obe May 31 '22 at 18:37
  • 2
    Your code basically works like `(false && 10 === 5) ? 'match' : undefined` – Ram May 31 '22 at 18:39
  • Thanks I've got it now, how do you know that implicit grouping is made with parentheses? – j obe May 31 '22 at 18:49
  • because of precedence... https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#table – Igor Gonak May 31 '22 at 19:07

2 Answers2

1

&&-operator has higher precedence then the ternary operator. That's why following is happening:

Basically you have a ternary operator (false && (10 === 5) ? : 'match' : undefined. 10 === 5 evaluates to false and false && false also results in false. Thats why undefined and not 'match' is returned.

To fix this, add parentheses after && like this:

 false && (10 === 5 ? 'match' : undefined)
Igor Gonak
  • 2,050
  • 2
  • 10
  • 17
  • Not sure if the question has been misread, I don't want 'match' returned, I'm wondering why undefined is returned when the first value before the && is false – j obe May 31 '22 at 18:44
  • No it's not missread. I just broke down the evaluation. Just add parentheses and it's fixed – Igor Gonak May 31 '22 at 18:45
  • Ok, maybe I have missed the bit with the answer, I'm not sure why undefined is being returned in my example based on what you've explained – j obe May 31 '22 at 18:47
  • Because of precedence. && Has higher precedence than ternary operator – Igor Gonak May 31 '22 at 18:48
  • I understand based on a comment someone else has made now, I think you're missing a parentheses in your answer which confused me with your explanation. – j obe May 31 '22 at 18:50
  • no I wrote in my first sentence "precedence is important. add parentheses" and corrected your expression, so it should work like you expect it to do. what is so missunderstanding to you? Edited my answer – Igor Gonak May 31 '22 at 18:52
  • If your whole point is about adding parentheses then you must ensure you use the correct number of parentheses in your answer, you are missing one, so it's confusing. – j obe May 31 '22 at 19:15
  • Dude, just add parentheses: false && (10 === 5 ? 'match' : undefined). Problem fixed. What's left? – Igor Gonak May 31 '22 at 19:17
1

In your updated example, the logical AND … && … has a higher order of precedence (5) than the evaluation of the ternary … ? … : … (3).

Check out the table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#table

Marco
  • 511
  • 6
  • 16
  • The ternary contains a === check which is higher priority than the && though. Either way, in theory the first value of false should be returned right? are there any scenarios where it wouldn't and undefined would come back? – j obe May 31 '22 at 18:46
  • yes, === has a higher precedence, but &&-operator is still higher than the ternary operator, that's the whole point! What you want is this: ```false && (10 === 5 ? 'match' : undefined)```. But what you get is this: ```(false && 10 === 5) ? 'match' : undefined```. Again: it has nothing to do with the === operator – Igor Gonak May 31 '22 at 19:05
  • Thanks, thats better, you have the right number of parentheses there so it makes more sense now. – j obe May 31 '22 at 19:17
  • Ah, I think I see the source of confusion here, @j-obe. The ternary operator has right-to-left associativity -- check out the 'conditional chains' example for it on [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator#examples) to see why it returns `undefined` in your example; the `&&` is basically short-circuited. – Marco May 31 '22 at 19:22