Comparison of Ternary operator, Elvis operator, safe Navigation Operator and logical OR operators

Question

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?

Answer 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

Answer 2

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.

Answer 3

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

Answer 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?