Comparison of Ternary operator, Elvis operator, safe Navigation Operator and logical OR operators
update
With TypeScript 3.7 they've implemented Optional Chaining, which is like the safe navigation operator, but then better. Also the Nullish Coalescing has found its way to the scene.
If you are using this version, the below answer is obsolete
Maybe I've missed a couple versions, but to my knowledge, TypeScript does not have an elvis operator or a safe navigation operator. The only extra thing they have is a non-null assertion operator !., but this is only for the compiler, and in the compiled js the ! will be removed. Angular however, does have the safe navigation operator inside their templates, but under the hood this will resolve into a logical or ||. The benefit here is increased readability and smaller templates.
Besides that, TypeScript does have the ?: notation, but this is used in interfaces or method parameters to indicate that the value is optional
Which leaves us with the ternary operator vs logical or. You would use the first one if there are 3 values. The question, the answer yes result, and the answer no result to said question.
And the latter when there are 2 values. Where the first one, if resolved to truthy will be the answer, and otherwise the second one, regardless of its value.
Benefit wise, I can't really say much. I would expect them to be equally fast, with a marginal difference. Perhaps readability is increased with the ternary option, which you obviously can always use instead of the logical or ||, but personally I like to use the ||, because it keeps the code compact.
TLDR;
- Ternary Operator
Simplified if else, available everywhere
- Elvis operator
?:
Not available in typescript/javascript/angular and essentially the same as ||
- Safe navigation operator
?.
Only available in angular templating, used to prevent null pointers in object parameter navigation
- Logical or
||
If not left hand, then right hand. Even more simplified if else. Available in typescript/javascript/angular
Safe Navigation Operator (?.) which is also wrongly called Elvis operator in Angular2 only
this is an Angular2 template binding thing, it's not available in javascript.
Ternary Operator(statement ? obj : obj)
This when you want to check for a condition and if that condition is truthy, return a value or if it's falsy return another value.
Logical or operators
This when you want to return a value based on it's own existence or truthiness (so there is no other rule involved), it's very different from Ternery.
let displayName = user.name || "";
In above example, you're saying if either of those expression are truthy, return it, where is in bellow :
let gender = user.male ? "male" : "female";
What you're saying is : if my condition is truthy , return "male" otherwise return "female"
Elvis Operator (?: )
This is NOT available in javascript and you could find it in other languages like PHP and it's basiacly the same as Ternery operator, but simplified , in a case where the left side of the comparison ( the truth side ) can be used as the returned value :
so :
let m = something ?: somethingElse // if in case of truthiness of `something` you want to return `something` , you can do this
is equal to :
let m = something ? something : somethingElse
EDIt : It doesn't make sense to compare them, they're not doing the same thing at all.
let gender = user.male ? "male" : "female";
can Used in javascript(Typescript) as well as in HTML tag binding ,
Basically when you use this operator in javascript code it means if first statment is true than execute first otherwise execute second option
In angular2 Terms Ternary Operatoris known as Safe Navigation Operator (?.) or you can use the term Elvis Operator (?: ) which is used at the time of fetching asynchronous data from the backend or some kind of databse.
alternate :- you can also use Elvis Operator (?: ) in angular2 template like this (we can say this is shorthand property)
let gender = user.gender || "";
Have a look here too
- Replacement of Elvis Operator of Angular2 in Typescript