Comparison of Ternary operator, Elvis operator, safe Navigation Operator and logical OR operators
Solution 1
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
Solution 2
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 Operator
is 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
Solution 3
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.
Solution 4
@Milad
RameshRajendran
you can use the term elvis instead of Safe Navigation Operator (?.) in angular2, according to me both are same don't confuse with name
I got something from this source:
Elvis Operator (?: )
The "Elvis operator" is a shortening of Java's ternary operator. One instance of where this is handy is for returning a 'sensible default' value if an expression resolves to false or null. A simple example might look like this:
def gender = user.male ? "male" : "female" //traditional ternary operator usage
def displayName = user.name ?: "Anonymous" //more compact Elvis operator
Safe Navigation Operator (?.)
The Safe Navigation operator is used to avoid a NullPointerException. Typically when you have a reference to an object you might need to verify that it is not null before accessing methods or properties of the object. To avoid this, the safe navigation operator will simply return null instead of throwing an exception, like so:
def user = User.find( "admin" ) //this might be null if 'admin' does not exist
def streetName = user?.address?.street //streetName will be null if user or user.address is null - no NPE thrown
But I want to know the above all operators are similarly doing the same process. What are the difference benefits and which one is best & worst?
Related videos on Youtube
Ramesh Rajendran
Technologies : HTML CSS Asp.Net MVC Web Api C# Angular 1-7 Unit Test (Front End & Back End) I am currently working in L&T . Read my blog C# DotNet Solutions.
Updated on September 14, 2022Comments
-
Ramesh Rajendran over 1 year
Comparison with Ternary operator vs Elvis operator vs safe Navigation Operator vs logical or operators in angular
Ternary Operator(statement ? obj : obj)
let gender = user.male ? "male" : "female";
Elvis Operator (?: )
let displayName = user.name ?: "";
Safe Navigation Operator (?.)
let displayName = user.name ?. "";
Logical or operators
let displayName = user.name || "";
The above all operators are similarly doing the same process. What are the difference benefits and which one is best & worst?
-
Ramesh Rajendran almost 7 yearsGood one. But I'll wait for more answers
-
Ramesh Rajendran almost 7 yearsyup. I don't know we can import the operator or not. But I have using only it in template tag
-
Ramesh Rajendran almost 7 yearsWhat about ELVIS?
-
Pardeep Jain almost 7 yearshey @RameshRajendran you can use the term
elvis
instead ofSafe Navigation Operator (?.)
in angular2, according to me both are same don't confuse with name. -
Ramesh Rajendran almost 7 years@Mildad But the syntax is different
elivs like (?:) and Safe Navigation Operator(?.)
-
Poul Kruijt almost 7 yearsAre you sure
?:
is supported in angular? As far as I know just the safe navigation is?.
-
Pardeep Jain almost 7 yearsi am not sure about using
?:
but yes while fetching asynchronous data we can use?
operator for safe navigation like thisabc?.def?.geh
this will prevent to throw any error. -
Poul Kruijt almost 7 yearsYes, that's the safe navigation operator :)
?.
-
Pardeep Jain almost 7 yearsbut i think safe navigation and elevis operators are same , difference is just in names, isn't it ? @PierreDuc
-
Ramesh Rajendran almost 7 years@PardeepJain . It's also same in my mind. Sounds mine
-
Poul Kruijt almost 7 years@PardeepJain They are very different. Elvis operator is the same as
||
.let foo = bar ?: nose
. This will result infoo
beingbar
ifbar
resolves to true, and will benose
otherwise.let foo = bar?.nose
, will beundefined
ifbar
has no property namednose
, and otherwise will be the value of thenose
property onbar
. You can't compare those two operators