JavaScript: Ternary operator

Look at the definition of a function that returns the absolute value of the passed number:

const abs = (number) => {
  if (number >= 0) {
    return number;
  }

  return -number;
};

abs(10); // 10
abs(-10); // 10

Can we write it more concisely? Something like return <answer depending on the condition>? For this, there must be an expression to the right of return, but if is a statement, not an expression.

In JavaScript there is a construct that behaves like the if-else construct but is itself an expression. It is called the ternary operator.

The ternary operator is the only operator of its kind that requires three operands:

const abs = (number) => {
  return number >= 0 ? number : -number;
};

The general pattern looks like this: <predicate> ? <expression on true> : <expression on false>.

The shortened version of the abs() function looks like this:

const abs = (number) => (number >= 0 ? number : -number);

Pay attention to the parentheses around the ternary. They are not required, but the linter strongly recommends using them to avoid ambiguities.

Let's rewrite the initial version of getTypeOfSentence() in the same way:

Before:

const getTypeOfSentence = (sentence) => {
  const lastChar = sentence.slice(-1);

  if (lastChar === '?') {
      return 'question';
  }

  return 'normal';
};

After:

const getTypeOfSentence = (sentence) => {
  const lastChar = sentence.slice(-1);

  return (lastChar === '?') ? 'question' : 'normal';
};

getTypeOfSentence('Hodor');  // normal
getTypeOfSentence('Hodor?'); // question

If you remember the power of expressions, you have probably already guessed that a ternary operator can be nested inside another ternary operator. Don't do this :) Such code is hard to both read and debug, and it is very bad practice.

Instructions

A button in the application works as a toggle: each press switches the state to the opposite one. Implement the function flipFlop(str): if the string equals 'flip', return 'flop'; otherwise return 'flip'.

flipFlop('flip'); // => 'flop'
flipFlop('flop'); // => 'flip'

Use the ternary operator.

Коммерческий опыт и Трудоустройство

Tips

More about the ternary operator

The exercise doesn't pass checking. What to do? 😶

If you've reached a deadlock it's time to ask your question in the «Discussions». How ask a question correctly:

Be sure to attach the test output, without it it's almost impossible to figure out what went wrong, even if you show your code. It's complicated for developers to execute code in their heads, but having a mistake before their eyes most probably will be helpful.

In my environment the code works, but not here 🤨

My code is different from the teacher's one 🤔

I've read the lessons but nothing is clear 🙄

Прочитал урок — ничего не понятно 🙄

Found a bug? Have something to add? Pull requests are welcome!

← PreviousNext →

Your exercise will be checked with these tests:

import { expect, test } from 'vitest';
import f from './index.js';

test('test', () => {
  expect(f('flip')).toBe('flop');
  expect(f('flop')).toBe('flip');
  expect(f('hello')).toBe('flip');
});

← PreviousNext →

Teacher's solution will be available in:

20:00

← PreviousNext →