If... else или нет!

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

Это было, когда я начал серьезно заниматься React, и я понял, что в моем собственном коде слишком много if... if... else. Я сделал рефакторинг (переписал код) с целью убрать их большую часть. И, как результат, код стал гораздо более читабельнее и понятнее. Я думаю, что много условных операторов являются признаком того, что ваш код слишком громоздкий и плохоработащий.

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

• Действительно ли эта функция выполняет разные вещи или должна быть разделена на разные функции ?
• Это абсолютно необходимо для проверки этого условия в этой функции, или это должно быть где-то ещё?
• Можно ли это сделать код более читаемым способом? Существуют разные шаблоны, которые могут заменять условные обозначения, одним из моих фаворитов является шаблон ObjectMapping.
• Если мне пришлось использовать их, то я бы удалил else и только сохранил ifs и случай по умолчанию.

Итак, давайте посмотрим на некоторые альтернативные методы для работы с условными операторами.

Удаляем Else

Это довольно простой трюк, но он эффективен.

Стандартный вариант с if... else if...

  если (красный) { 
  return false; 
  } else if (синий) { 
  return false; 
  } else { 
  return true; 
  } 

Рефакторинг:

  if (красный || синий) { 
  return false; 
  } 
  return true; 

Есть несколько причин, по которым я предпочитаю второй. Прежде всего, он имеет случай по умолчанию, и более ясно, что утверждения if не являются нормальными условиями. Он делает то же самое, но читается лучше. Тот факт, что он короткий, хорош, но это не цель.Читаемость всегда выигрывает.

Композиция

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

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

import { flow } from 'lodash';
const femaleAnimalsWithFurAndClaws = flow(
  getFemales,
  getAnimalsWithFur,
  getAnimalsWithClaws,
)(animals);

Хорошо видно, как мы могли бы повторно использовать такую ​​функцию, как getFemales.

ObjectMapper

Один из моих любимых шаблонов. Фактически он может быть применён к множеству различных ситуаций, как в программном обеспечении, так и в интерфейсе. Самое замечательное в этом, что шаблон действительно прост и читабелен. Когда я пользуюсь им, я чувствую, что мой код превращается в спецификации, а не в код. Я думаю, что это действительно здорово, потому что так легко понять, что происходит.

Вот как это примерно выглядит:

const colors = {
  red: false,
  blue: false,
  'default': true,
 };
const colorMapper = color => colors[color] || colors['default'];
const color = colorMapper(item.color);

Он работает следующим образом:

1. Объект, определяющий результаты

2. Функция отображения

Удобно иметь дефолтный случай. Потому что, если мы будем называть функции отображения без аргумента, или если мы получим неожиданный ввод, функция все еще работает. Если мы назовем его новым цветом: colorMapper('green'), мы просто получим true по умолчанию. Но мы можем легко добавить новые случаи позже.

Мы могли бы использовать оператор switch здесь и получили более или менее тот же результат. Но лично я не настолько большой поклонник синтаксиса, и для меня это просто кажется более чистым и более элегантным для использования обычного объекта и функции mapper.

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

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

 age = 15; age = 18? alert("Okay"): alert("Sorry")

Если возраст равен 18, то выводится "Okay", если нет, то "Sorry". Так как 15 < 18, то выведется "Sorry". Я не знаю более простых вариантов, и советую вам использовать именно его.

UPD: Про тернарный оператор написал я сам

Заключение

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

Автор перевода - Паша Лосев, администратор канала JavaScript(t.me/we_use_js)

*- я добавил от себя, то есть этот параграф мой.

Оригинал: https://medium.com/dailyjs/if-else-or-not-d48dac62c67d