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] : '');
}
1

3 Answers 3

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));
}

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

1 Comment

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
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.

Comments

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.