0

I'm trying to understand this function that returns the ordinal numbers when we give it a number.

Unfortunately I couldn't figure out how this is working with the conditional operator, could someone explain it to me?

function getOrdinalNum(n) {
  return n + (n > 0 ? ['th', 'st', 'nd', 'rd'][(n > 3 && n < 21) || n % 10 > 3 ? 0 : n % 10] : '');
}
Adelin
  • 7,809
  • 5
  • 37
  • 65
LisaN
  • 165
  • 2
  • 2
  • 13
  • Possible duplicate of [How do you use the ? : (conditional) operator in JavaScript?](https://stackoverflow.com/questions/6259982/how-do-you-use-the-conditional-operator-in-javascript) – t3dodson Jul 23 '18 at 07:12

3 Answers3

3

The best way to explain this sort of thing is to break it down into a function with if statements. Take a look at the newFunction it does the same thing that the function getOrdinalNum does:

function getOrdinalNum(n) {
  return n + (n > 0 ? ['th', 'st', 'nd', 'rd'][(n > 3 && n < 21) || n % 10 > 3 ? 0 : n % 10] : '');
}

function newFunction(n) {
  if (n > 0) {
    if ((n > 3 && n < 21) || n % 10 > 3) {
      return n + 'th'; // essentially returning ['th', 'st', 'nd', 'rd'][0]; 
    } else {
      return n + ['th', 'st', 'nd', 'rd'][n % 10];
    }
  }
}

for(let i = 1; i < 9; i++) {
  console.log(getOrdinalNum(i));
  console.log(newFunction(i));
}
Nick Parsons
  • 45,728
  • 6
  • 46
  • 64
  • This is a good idea too. However, for an even easier understanding, I'd propose breaking down these operations (`return n + ['th', 'st', 'nd', 'rd'][n % 10];`) into different variables like: `theIndexToChoose`, `theChoices`, `theFinalResult` – Adelin Jul 23 '18 at 07:13
1

Break it down like this:

n + 
(
 n > 0 
 ? ['th', 'st', 'nd', 'rd']
     [
       (n > 3 && n < 21) || n % 10 > 3 
       ? 0 
       : n % 10
     ] 
 : ''
);

Here:

  1. JS checks if n > 0. If yes then:
    1. An array is created ['th', 'st', 'nd', 'rd']
    2. The next [] tells us a property accessor will follow
    3. Which property is determined by the ternary operation. Either 0 (which will mean (th) or the result of n & 10
    4. And the result of accessing that property is added whatever n was.
  2. If n is smaller or equal with 0 then whatever n was, an empty string is added to it.

It helps to know the operator precedence in JS. Give it a goooood read and practice some.

Adelin
  • 7,809
  • 5
  • 37
  • 65
0

Operators (unary, binary, ternary)

The ternary conditional operator is different than most other operators in that it takes 3 operands instead of one or two.

You are used to unary operators like the negative symbol in -5 which takes one operand and makes it a negative value.

There is also the binary concatenation operator + used like 'hello ' + 'world'. Here there are two operands which produce the value 'hello world'.

The ternary conditional operator has the form

/* conditional expression */ ? /* expression if truthy */ : /* expression if not truthy*/

Where the comments are the operands for you to fill in with the more complex code from your example. // if n > 0 then the complex expression, otherwise the empty string

Simple example.

Try to run the following statements in your browser.

console.log(true ? 'true value' : 'false value');

var x = 3 > 1 ? 'true value' : 'false value';
console.log(x);

prompt('try entering a blank space, or characters') ? 'a' : 'b';

The code flows much the same as the other answers describe. The first expression is emitted if the condition is truthy otherwise the second expression is emitted.

Here are some docs on what I mean by truthy

t3dodson
  • 3,949
  • 2
  • 29
  • 40