JavaScript — Условный оператор


Что такое условный оператор?

Условный оператор иногда называют тернарным оператором или оператором «вопросительного знака». Это оператор, который позволяет нам писать утверждение if ... else в краткой и сжатой форме. Оператор используется с вопросительным знаком ?, отсюда и название «оператор вопросительного знака». Оператор имеет три операнда, отсюда название «тернарный» оператор.

Синтаксис и пример

Обычно оператор if ... else записывается следующим образом:

let value;

if (condition) {
  value = "true";
} else {
  value = "false";
}
Войти в полноэкранный режим Выйти из полноэкранного режима

С помощью оператора Conditional вы можете написать приведенный выше код следующим образом:

// syntax -> condition ? operand2: operand3; 
let value = condition ? "true" : "false";

Войти в полноэкранный режим Выйти из полноэкранного режима

Первый операнд — это условие, которое вы хотите оценить, за которым следует знак вопроса (?). Второй операнд — выражение, которое вы хотите выполнить, если условие «истинно», за которым следует двоеточие (:). И, наконец, третий операнд — это выражение, которое нужно выполнить, если условие «ложное».

Вы видите, что с помощью оператора Conditional можно аккуратно записать блок операторов if ... else в одну строку и присвоить его непосредственно переменной.

Вложенность/цепочка

Условный оператор часто используется как альтернатива блоку операторов if ... else, потому что он короче в написании, но иногда для читабельности кода все же лучше использовать операторы if ... else. Тем не менее, вы можете использовать условный оператор и для операторов if ... else if ... else.

Например:

function getAgeGroup(age) {
  if (age >= 18) {
    return "adult";
  } 
  else if (age >= 13) {
    return "adolescent";
  }
  else {
    return "child";
  }
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Здесь у нас есть функция, которая возвращает возрастную терминологию на основе параметра «age», функция оценивает входной аргумент с помощью оператора if ... else if ... else и возвращает соответствующий термин.
Если бы мы хотели использовать тернарный оператор, мы могли бы сделать это следующим образом:


function getAgeGroup(age) {
  return age >= 18 ? "adult" 
    : age >= 13 ? "adolescent" 
    : "child";
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Вы можете видеть, что это намного короче, а что касается того, будет ли это так же читабельно, я позволю вам судить об этом 😃.

(Пояснение: В примере, если первое условие «правдивое», то возвращается строка «взрослый», в противном случае переходим ко второму условию и снова проверяем на «правдивость» и возвращаем строку «подросток». Если второе условие будет «ложным», то будет возвращена строка «ребенок»).

Резюме

Условный оператор имеет три операнда и может использоваться как альтернатива блоку операторов if ... else. Он может быть сложным для чтения, поэтому его следует использовать для простых случаев. Примером моего использования может быть React, где вы не можете использовать условие if непосредственно внутри JSX, поэтому вы можете использовать этот условный оператор для условного рендеринга.

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

Оцените статью
Procodings.ru
Добавить комментарий