I'm trying to leanr some javascript, however I can't quite answer why:
var a = 'xyz';
console.log('Example: ' + (a === 'xyz') ? 'A' : 'B');
Gives me back 'A' rather than Example: A. However when I put the whole if like that:
var a = 'xyz';
console.log('Example: ' + ((a === 'xyz') ? 'A' : 'B'));
It works flawlessly. Does that mean the first one puts the 'Example: ' string in a logical + with this if?
It's not an if statement, it's a ternary operator.
But fundamentally, yes, what's happening is that first this part is evaluted:
(a === 'xyz')
...and becomes true or false. Then this is done (let's assume true):
'Example: ' + true
...resulting in:
'Example: true'
...then this is done:
'Example: true' ? 'A' : 'B'
...which gives us 'A' because the string isn't blank, and so it's truthy.
This is because + has a higher precedence than the ternary (? :).
(a === true) or (a === false). in this case, a == should be used.
== just adds type coercion. In the OP's example, there's no difference whatsoever between using == and === as both a and 'xyz' are strings. "Therefore, its looking for (a === true) or (a === false)" No, that comparison is never being done.
=== is the correct comparison. However, it doesn't really matter, because both String + true and String + false are true as long as String is not an empty string.Exactly, as you can see + has higher precedence than ?
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence
So in your first expression string concatenation with the boolean value (a === 'xyz') gets executed first, the non empty string is then evaluated as a boolean true and 'A' is the final output.
In the second expression parenthesis force the ? operator to be executed before +.
If you don't set off (a === 'xyz') ? 'A' : 'B' with parentheses, the JS engine gives precedence to the + operator and interprets your truthy test as 'Example: ' + (a === 'xyz'), thus returning A.
It would return A even if the equality test were false, because a string concatenated with either true or false is still true.
