decoding typescript ternary operator

Question

I came across some code in the typescript docs that is confusing for me.

function compare(a: string, b: string): -1 | 0 | 1 {
  return a === b ? 0 : a > b ? 1 : -1;
}

Can anybody explain what's going on in the return statement? Is that a ternary operator?

It's not typescript-specific, just developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… twice. — jonrsharpe
– jonrsharpe, Commented Sep 9, 2021 at 15:25
This is why I don't approve ternary operations in PRs at work. This is a nested ternary and they become very difficult to read very quickly. It's saying if a is equal to b, return 0, otherwise if a is greater than b, return 1, otherwise return -1. (note: a > b in strings is a sorting check) — Sterling Archer
– Sterling Archer, Commented Sep 9, 2021 at 15:25
WHile I do like ternary operations - I don't like them to be nested. YOu should avoid nested ternary as much as possible — captain-yossarian from Ukraine
– captain-yossarian from Ukraine, Commented Sep 9, 2021 at 15:39
From type system perspective compare function (I believe it is a callback for sort) returns -1 OR 0 OR 1 — captain-yossarian from Ukraine
– captain-yossarian from Ukraine, Commented Sep 9, 2021 at 15:40
There’s a shorter and more general way to write this: (b < a) - (a < b). Not sure if TypeScript allows subtracting booleans, but Number(b < a) - Number(a < b) should do. — Sebastian Simon
– Sebastian Simon, Commented Sep 9, 2021 at 20:00

Daniel Kaplan · Accepted Answer · 2021-09-10 16:14:31Z

1

Think of it like this:

function compare(a: string, b: string): -1 | 0 | 1 {
  return a === b ? 0 : (a > b ? 1 : -1);
}

If a === b, return 0. Otherwise, is a > b? If so, return 1. Otherwise, return -1. Might be easier to think of like this:

function compare(a: string, b: string): -1 | 0 | 1 {
  if (a === b) {
    return 0;
  } else {
    if (a > b) {
      return 1;
    } else {
      return -1;
    }
}

Although that's the way I think about it, this is the way I'd write the code with if statements (remember, all three of these are equivalent):

function compare(a: string, b: string): -1 | 0 | 1 {
  if (a === b) {
    return 0;
  } else if (a > b) {
    return 1;
  } else {
    return -1;
  }
}

edited Sep 10, 2021 at 16:14

answered Sep 9, 2021 at 16:28

Daniel Kaplan

68.5k60 gold badges274 silver badges414 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Asher G. · Accepted Answer · 2021-09-09 16:44:19Z

function compare(a: string, b: string): -1 | 0 | 1 {
  return a === b ? 0 : a > b ? 1 : -1;
}

First, analyze the declared return type -1 | 0 | 1:

This is a union of Literal types [see docs for reference]. This indicates that the return type of this function will be either:

the number -1,
the number 0,
or the number 1.

Now analyze the return statement in the function return a === b ? 0 : (a > b ? 1 : -1);:

This is a 'nested' JavaScript Ternary Operator [see docs for reference].

The expression before the ? is evaluated first; If it is evaluated to true then the expression before the : is evaluated, if false then the expression after the : is evaluated.

It is equivalent to the follow if statement:

if (a === b) {
  return 0;
} else {
  if (a > b) {
    return 1;
  } else {
    return -1;
  {
}

or put more simply:

if (a === b) {
  return 0;
} else if (a > b) {
  return 1;
} else {
  return -1;
{

Collectives™ on Stack Overflow

decoding typescript ternary operator

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related