If в javascript: Условное ветвление: if, ‘?’

Содержание

Как создавать однострочные операторы If с помощью JavaScript | Азиз Букер

Почему вам следует использовать тернарный оператор JavaScript.

Фото Clément Hélardot на Unsplash

Как разработчики, мы, несомненно, сталкивались с операторами if-else на протяжении всей своей карьеры. Подобно чуме, операторы if-else — это то, чего нельзя избежать ни в одном известном проекте. Но что, если я скажу вам, что в JavaScript есть способ сжать ваши операторы if-else в одну строку? Позвольте представить вам тернарный оператор!

Тернарный оператор, также известный как условный оператор, — это оператор JavaScript, который обычно используется для сокращения операторов if-else. Тернарный оператор состоит из трех основных операндов: условия, которое должно быть истинным или ложным, выражения, если условие истинно, и другого выражения, если условие ложно. Этот синтаксис позволяет нам сжать многострочный оператор if-else в одну строку, что помогает вам писать код быстрее.

Использовать тернарный оператор в JavaScript относительно просто, и, на мой взгляд, его совсем несложно запомнить. При написании тернарного оператора вы должны сначала написать условие, за которым следует вопросительный знак. После этого вы пишете выражение, если условие истинно, за которым следует двоеточие ( : ), а затем выражение, если условие ложно. Синтаксис примерно такой:

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

Чтобы показать преимущества использования тернарных операторов, я собираюсь создать действительно небольшой проект. Этот проект будет состоять из одной функции, которая делает одну конкретную вещь: принимает два числа и проверяет, больше ли первое число, чем второе число.

Во-первых, я собираюсь создать этот проект, используя простой оператор if-else, чтобы создать своего рода базовую линию для сравнения нашего тернарного оператора.

Проект, использующий базовый оператор if-else, показан ниже:

В этом проекте функция compareNumbers() занимает 7 строк. Хотя это ни в коем случае не ошеломляющая сумма, с тернарными операторами мы можем добиться тех же результатов всего за 3 строки !

Вот точно такая же функция, но вместо оператора if-else в этой версии используются тернарные операторы:

Теперь, когда мы завершили наш небольшой проект, видите ли вы силу тернарных операторов? Хотя это сократило наш код всего на несколько строк или около того, представьте преимущества использования тернарных операторов в больших проектах, где у нас могут быть десятки или даже сотни операторов if-else!

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

Спасибо, что добрались до конца моей статьи «Как создать однострочный оператор If с помощью JavaScript» . Надеюсь у тебя хороший день. Вот еще несколько моих статей для вашего чтения:

7 библиотек Javascript, о которых вам нужно знать

Библиотеки Javascript, которые повысят вашу эффективность как веб-разработчика

medium. com

10 ярлыков кода VS Знайте

Простые ярлыки, которые могут значительно повысить вашу производительность

blog.devgenius.io

4 Структуры данных Каждый разработчик должен знать

Обзор структур данных Каждый разработчик должен знать

Bookeraziz.medium.com

Еще .

5 способов рефакторинга операторов If/Else в функциях JavaScript | Сильвия Варгас

Сделайте свой код быстрее и чище

Фото Тима Чоу на Unsplash.
В этой статье я представлю пять способов навести порядок в коде, избавившись от ненужных операторов if-else . Я расскажу о параметрах по умолчанию, операторе OR ( || ), нулевом объединении, необязательных цепочках, no-else-returns и защитных предложениях.
Вам знакомо это чувство, когда вы работаете с несогласованным API и ваш код ломается из-за того, что некоторые значения не определены ?
let sumFunctionThatMayBreak = (a, b, inconsistentParameter) => a+b+inconsistentParametersumFunctionThatMayBreak(1,39,2) // => 42
sumFunctionThatMayBreak(2,40, undefined) // => NaN
Для многих людей инстинктивным решением этой проблемы будет добавление оператора if/else :
Вы могли бы, однако упростите приведенную выше функцию и избавьтесь от логики if/else , внедрив параметры по умолчанию: // => 42
упрощеннаяSumFunction(2, 40, undefined) // => 42
Вышеупомянутая проблема не всегда может быть решена с параметрами по умолчанию. Иногда вы можете оказаться в ситуации, когда вам нужно использовать логику if-else , особенно при попытке создать функцию условного рендеринга. В этом случае проблема обычно решается следующим образом:
или так:
Однако вы можете еще больше упростить ее, используя оператор ИЛИ ( || ). || Оператор работает следующим образом:
Он возвращает правую часть, когда левая часть равна 9.0075 ложное значение .
Возвращает левую часть, если она истинная .
Тогда решение может выглядеть следующим образом:
Иногда, однако, вы хотите сохранить 0 или '' в качестве действительных аргументов, и вы не можете сделать это с помощью || Оператор (как видно из примера выше). К счастью, начиная с этого года JavaScript дает нам доступ к ?? (нулевое объединение) оператор, который возвращает правую часть, только когда левая часть равна null или undefined . Это означает, что если ваш аргумент 0 или '' , он будет рассматриваться как таковой. Давайте посмотрим на это в действии:
Наконец, когда имеешь дело с непоследовательной структурой данных, трудно поверить, что все объекты будут иметь одинаковые ключи. См. здесь:
Это происходит потому, что object.name является undefined , поэтому мы не можем вызывать firstName на нем.
Многие люди поступают в такой ситуации следующим образом:
Однако вы можете упростить описанное выше с помощью новой функции JS, дополнительной цепочки. Необязательная цепочка проверяет на каждом шаге, является ли возвращаемое значение undefined , и если да, то возвращает именно это, а не выдает ошибку:
Последние решения неуклюжих операторов if/else , особенно вложенных, — . инструкции no-else-return и защитные оговорки. Итак, представьте, что у нас есть эта функция:
без возврата
Теперь мы можем упростить эту функцию с помощью оператор no-else-return , поскольку все, что мы возвращаем, это null в любом случае:
Преимущество оператора no-else-return заключается в том, что если условие не выполняется, функция завершает выполнение if-else и переходит на следующую строку.