Базовое использование тернарного оператора уже является очень удобным сокращением, которое вы будете использовать ежедневно. Оно короткое и приятное и является отличной заменой утверждению «если еще». Тернарный оператор принимает 3 операнда. Требуется условие, за которым следует вопросительный знак «?» за которым следует выражение, которое следует выполнить, если условие истинно. Затем за этим выражением следует двоеточие «:» и выражение для выполнения, если условие ложно.

В следующих примерах мы будем предполагать, что пользователи системы, являющиеся «сотрудниками», могут только читать информацию о других сотрудниках. «Менеджер» сможет читать И обновлять информацию, но НЕ создавать новых сотрудников в системе. «Администратор» сможет выполнять все операции.

const user1 = {
  firstName: 'Antonio',
  lastName: 'Chavez',
  username: 'achavez',
  authorization: {
    role: 'employee',
    create: false,
    read: true,
    update: false
  } 
}


const feedbackMessage = user1.authorization.update ? 'Select a field to start editing.' : 'You do not have permission to edit.'

console.log(feedbackMessage);
// You do not have permission to edit.

Выше мы видим основное использование тернара. Если свойство обновления пользователей равно true, они получат сообщение обратной связи, сообщающее им, как редактировать, в противном случае они получат сообщение о том, что у них нет разрешения.

Тернарии также можно использовать, объединяя их в цепочки для охвата нескольких условий. Связанный тернар будет продолжать оценку до тех пор, пока не встретит истинное условие, в противном случае он вернет последнее значение в цепочке по умолчанию.

const user2 = {
  firstName: 'Sherry',
  lastName: 'Harrington',
  username: 'sharrington',
  authorization: {
    role: 'manager',
    create: false,
    read: true,
    update: true
  } 
}

const determineFeedbackMessage = (createAuth, updateAuth) => (
  createAuth
    ? 'You can create a user by clicking the add button.' 
    : updateAuth
    ? 'Select a field to start editing.' 
    : 'You do not have permission to edit.'
)

const feedbackMessage = determineFeedbackMessage(user2.authorization.create, user2.authorization.update);

console.log(feedbackMessage);
// Select a field to start editing.

Внутри функции defineFeedbackMessage мы связываем тройку, сначала проверяя, есть ли у пользователя разрешение на создание, чего у него нет, поэтому мы берем значение после первого двоеточия, что является еще одним условием, проверяющим, есть ли у пользователя разрешение на обновление, которое они делают, и возвращается значение после второго вопросительного знака.

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

const determineFeedbackMessage = (createAccess, updateAccess) => {
  if (!createAccess) {
    // Logic performing side effects
    if (!updateAccess) {
      'You do not have permission to edit.'
      // More logic performing side effects
    }
    return 'Select a field to start editing.'
    // Even more logic performing side effects
  }
  return 'You can create a user by clicking the add button.'
}

В приведенном выше примере мы видим, как оператор if может стать очень подробным и трудным для понимания, поскольку логика в каждом вложенном блоке может изменить другую информацию в нашем приложении. Избежать этих побочных эффектов и мутаций может быть более идеально с использованием цепочечных троичных элементов, и это позволит сфокусировать и очистить поток управления. Связанные тернарии могут быть очень хорошими и приятными в использовании. Если вы держались подальше от троек или связывали их цепочками, попробуйте сначала дотянуться до них на некоторое время. Вы можете просто заметить, что ваш код на самом деле становится немного чище и легче рассуждать, чем, возможно, вы думали.

Посмотрите, сможете ли вы определить, какими будут следующие два сообщения отзывов пользователей.

const user1 = {
  firstName: 'Antonio',
  lastName: 'Chavez',
  username: 'achavez',
  authorization: {
    role: 'employee',
    create: false,
    read: true,
    update: false
  } 
}

const user3 = {
  firstName: 'Michelle',
  lastName: 'Getzinger',
  username: 'mgetzinger',
  authorization: {
    role: 'admin',
    create: true,
    read: true,
    update: true
  } 
}

// 1.
const firstUserFeedbackMsg = determineFeedbackMessage(user1.authorization.create, user1.authorization.update);

// 2.
const thirdUserFeedbackMsg = determineFeedbackMessage(user3.authorization.create, user3.authorization.update);

Меня зовут Кэм Ремеш, я разработчик Angular/Typescript. Я самоучка в области фронтенд-разработки и выпускник буткемпа. Я пишу о JavaScript и стараюсь сделать технический контент более удобоваримым. Вы можете подписаться на меня или связаться со мной в LinkedIn здесь!