Тернарный оператор - это условный оператор, который позволяет сократить написание условных выражений в JavaScript. Вместо использования конструкции if...else можно использовать тернарный оператор.

Синтаксис тернарного оператора в JavaScript

Синтаксис тернарного оператора выглядит следующим образом:

условие ? выражение1 : выражение2

Если условие истинно, то возвращается выражение1, если ложно - выражение2.

Примеры использования тернарного оператора

Давайте рассмотрим пример использования тернарного оператора в ванильном JavaScript:

const age = 18;
const message = age >= 18 ? 'Вы совершеннолетний' : 'Вы несовершеннолетний';
console.log(message);

В этом примере мы проверяем, является ли значение переменной age больше или равным 18. Если это так, то мы выводим сообщение "Вы совершеннолетний", а если нет - "Вы несовершеннолетний".

Определение цвета в зависимости от значения переменной:

const color = value > 10 ? 'red' : 'green';

В данном примере, если значение переменной value больше 10, то переменная color будет иметь значение 'red', иначе - 'green'.

Вывод сообщения об ошибке, если значение переменной равно нулю:

const result = value !== 0 ? 100 / value : 'Error: division by zero';

В данном примере, если значение переменной value не равно нулю, то переменная result будет равна 100 / value, в противном случае - 'Error: division by zero'.

Также можно использовать тернарный оператор в составе других выражений, например:

return (value > 0 ? value : -value) * 2;

В данном примере, если значение переменной value больше нуля, то возвращается значение value * 2, иначе - -value * 2.

Тернарный оператор также может быть полезен при работе с React.js и Vue.js.

Например, если мы хотим отобразить компонент в зависимости от условия, мы можем использовать тернарный оператор:

Пример для React.js:

function Greeting(props) {
  return (
    <div>
      {props.isLoggedIn ? (
        <h1>Добро пожаловать!</h1>
      ) : (
        <h1>Пожалуйста, войдите в систему.</h1>
      )}
    </div>
  );
}

Пример для Vue.js:

<template>
  <div>
    {{ isLoggedIn ? 'Добро пожаловать!' : 'Пожалуйста, войдите в систему.' }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoggedIn: true
    };
  }
};
</script>

В этих примерах мы проверяем, залогинен ли пользователь, и в зависимости от этого выводим разные сообщения.

Тернарный оператор является мощным инструментом, который может значительно упростить написание условных выражений в JavaScript. Он может быть полезен как при написании ванильного JavaScript, так и при работе с фреймворками.