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

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