Прекратите ставить так много операторов If в вашем JavaScript

"Для человека с молотком, все выглядит как гвоздь" - Авраам Маслоу.

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

Наиболее популярным способом работы с условной логикой является оператор if. Оператор if универсален, гибок и прост в понимании, поэтому его популярность не вызывает удивления.

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

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

В этой статье рассматриваются четыре альтернативы классическому утверждению " if “.

Тернарные операторы

Тернарные операторы - это отличный способ справиться с основными условиями if-else. В примере ниже значение, присваиваемое сообщению, меняется в зависимости от того, является ли hasError правдивым или фальшивым.

С классическим утверждением If:

let message = "Thanks for contacting us! We'll be in touch shortly!"

if (hasError) {

message = "Oops, that's an error. Please try again later!"

};

Это решение сначала устанавливает message как безошибочную версию, а затем, при необходимости, перезаписывает ее.

Теперь с помощью тернарного оператора:

const message = hasError

? "Oops, that's an error. Please try again later!"

: "Thanks for contacting us! We'll be in touch!”;

Тернарный вариант имеет здесь некоторые заметные преимущества:

Тернарный оператор - явный победитель в этой ситуации, но не увлекайтесь им. Применяйте его только в случаях, требующих относительно простой логики и не объединяющих несколько тернарных операторов в одну строку. Ваши коллеги вас отблагодарят!

Switch

Наиболее очевидной заменой " if " являются высказывания-переключатели. Вместо того, чтобы определить, является ли условие правдивым или фальшивым, он смотрит на одно конкретное значение и выполняет соответствующий ему case блок.

Это делает операторы-переключатели немного менее гибкими, чем if, но при этом делает их немного лаконичнее. Рассмотрим пример:

Во-первых, с оператором if:

if (status === 200) {

handleSuccess()

} else if (status === 401) {

handleUnauthorized()

} else if (status === 404) {

handleNotFound()

} else {

handleUnknownError()

};

Далее с использованием switch:

switch (status) {

case 200:

handleSuccess()

break

case 401:

handleUnauthorized()

break

case 404:

handleNotFound()

break

default:

handleUnknownError()

break

};

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

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

Логические операторы (&& и ||)

Операторы && и || ("and" и "or") ведут себя в JavaScript по-разному, чем в других языках программирования. Такое особое поведение дает этим операторам уникальную возможность работать с условной логикой.

Вот как работает оператор && на JavaScript:

Ключевым моментом является то, что операторы && и || не обязательно должны возвращать булевые значения (true или false). Это может сбить с толку, но может быть и полезно.

Использование оператора && в действии

Часто вы хотите получить доступ к свойству внутри объекта, но не можете быть уверены, существует ли этот объект заранее.

Например, может быть, вы хотите использовать свойство name пользователя для построения приветственного сообщения:

const message = `Welcome, ${user.name}!`;

Но что если user имеет значения null, false, undefined?

const message = `Welcome, ${user.name}!`

// TypeError: Cannot read property 'name' of null;

Если user не является объектом, и мы пытаемся получить доступ к свойству name на нем, JavaScript выдаст ошибку.

Этого можно избежать, добавив в свой код оператор if:

let message = null

if (user && user.name) {

message = `Welcome, ${user.name}!`

};

Это является уловкой, но & & операторы могут сделать это немного лаконичнее:

const message = user && user.name && `Welcome, ${user.name}!`;

Такой подход позволяет задавать сообщение с помощью const, а не с помощью let и выполнять работу в одной строке кода. Намного лучше!

Использование оператора ||:

Оператор || отлично подходит для назначения отложенных значений.

В качестве примера скажем, что вы хотите создать переменную handle для текущего пользователя. Если у этого пользователя есть действительное имя пользователя, то его следует использовать, но если имя пользователя установлено в null, то вместо него следует использовать fallback-значение “Guest".

Сначала, с простым оператором if:

let handle = 'Guest'

if (username) {

handle = username

};

Теперь с использованием оператора ||:

const handle = username || ‘Guest';

Опять же - намного чище и только одна строчка кода. Отличное улучшение!

Lookup Maps

Lookup maps идеально подходят для получения одного значения, которое ассоциируется с другим.

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

Успех - зеленый

Предупреждение - желтого цвета

Информация - синего цвета

Ошибка - красного цвета

Давайте напишем функцию, которая делает это. Сначала, с утверждением " if”:

function getStatusColor (status) {

if (status === 'success') {

return 'green'

}

if (status === 'warning') {

return 'yellow'

}

if (status === 'info') {

return 'blue'

}

if (status === 'error') {

return 'red'

}

};

Это нормально, но lookup map может быть более подходящей. Буквальные обозначения объектов - один из способов реализации lookup map в JavaScript:

function getStatusColor (status) {

return {

success: 'green',

warning: 'yellow',

info: 'blue',

error: 'red'

}[status]

};

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

Краткое изложение:

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

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

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

В отличие от других языков программирования, операторы && и || не всегда возвращают булевое значение в JavaScript, и такое поведение может быть весьма полезным. Оператор && часто используется, чтобы избежать ошибок при попытке доступа к свойствам объекта, а оператор || часто используется для присвоения переменной резервного значения, когда первый вариант недоступен.

Lookup maps- отличный способ получить одно значение, связанное с другим, например, получить цвет, связанный со статусом сообщения (статус успеха может отображаться зеленым цветом).

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

Автор:Крис Гилхоэд

Перевод:Даниил Лебедев

Еще больше полезной информации вы можете найти в нашем Телеграм канале по ссылке: https://t.me/metsolution