Давайте будем честными… писать чистый код JavaScript? Не всегда самый простой навык для понимания и, безусловно, навык, который требует времени и терпения для освоения. Любой программист, особенно программисты молодого толка (см. имя автора), в тот или иной момент пытался найти наиболее эффективный способ использования конкретной функции или блока кода.

Старая пословица: «Держи это СУХИМ», т.е. «Не повторяйся» звучит в принципе достаточно просто, но ее исполнение часто может привести неподготовленного программиста к образному туману. проселочная дорога с многочисленными развилками в два часа ночи в каком-то направлении во время проливного дождя. Что происходит, когда идет дождь? Наш неподготовленный программист может получить WET, т. е. «Нам нравится печатать».

Научиться программировать — это как научиться готовить. Конечно, вы можете следовать рецепту на Т и, вероятно, пожать, казалось бы, съедобный пирог из плодов своего труда. В конце концов, любой может научиться писать функцию, если сможет найти структуру и синтаксис онлайн, точно так же, как рецепты почти всего, что можно вообразить, можно найти одним щелчком мыши. Тем не менее, ваш пирог может быть съедобным, может быть даже вкусным, но все равно может показаться, что в конце чего-то не хватает. Как долго вы готовились? Сколько шагов было задействовано? Могли бы вы передать нарезку своему су-шефу, пока занимались приготовлением теста? Был ли лучший инструмент для более быстрого и эффективного измельчения? Все правильные вопросы с множеством разных ответов. Хотя у меня может не быть всех этих ответов, и этот пост в блоге, безусловно, не сделает вас чистым программистом к тому времени, когда вы дойдете до конца, моя цель сегодня состоит в том, чтобы попытаться помочь моим начинающим программистам избежать некоторого повторения и мокрого кода в их JavaScript.

Давайте посмотрим на оператор «if…else», если мы…

Определение оператора if…else

Если мы посмотрим на MDN Web Docs на оператор if…else, мы увидим, что он определен как таковой:

«оператор if выполняет оператор, если указанное условие истинно. Если условие ложно, может быть выполнено другое выражение».

Оператор if…else – это просто условный оператор, который выполняет одно действие, если выполняется условие (например, если наша подготовительная работа завершена, тогда запекается пирог) иначедругая вещь делается, если это не так (т. е. если пирог требует дополнительной подготовки, тогда не выпекайте пирог и продолжить приготовление теста, измельчение, перемешивание и т. д.).

Используя приведенный выше пример круговой диаграммы, оператор if…else можно записать так:

function isPrepped(prepWork) {
  if (prepWork === 'finished') {
    bakePie();
  } else {
    return 'The pie needs more prep work.';
  }
}

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

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

Давайте взглянем на мой фаворит — тернарный оператор. Еще раз обращаясь к ресурсам MDN, мы видим, что ternary operator определено как таковое:

«Условный (тернарный) оператор — это единственный оператор JavaScript, который принимает три операнда: условие, за которым следует вопросительный знак (?), затем выражение для выполнения, если условие верно, за которым следует двоеточие ( :) и, наконец, выражение для выполнения, если условие ложно. Этот оператор часто используется как сокращение для оператора if».

Используя пример, предоставленный MDN, мы видим ternary operator в чистом виде:

condition ? exprIfTrue : exprIfFalse

Теперь, если мы применим этот синтаксис к нашей функции isPrepped() выше, мы можем переписать код функции следующим образом:

prepWork === 'finished' ? bakePie() : 'the pie needs more prep work';

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

Давайте рассмотрим еще один пример, оператор switch…

Заявление о переключении

Что, если желаемый результат не такой черно-белый и имеет несколько условий? Что, если бы мы хотели увидеть указания для конкретной задачи (например, нарезать фрукты, приготовить тесто, смешать начинку и т. д.)? Мы могли определить такую ​​функцию:

function showDirections(task) {
  if (task === 'chop fruit') {
    return 'Dice two cups of desired fruit.';
  } else if (task === 'make dough') {
    return 'Mix flour, water, sugar and yeast in bowl.';
  } else if (task === 'stir filling') {
    return 'Stir chocolate and cream till whipped.';
  } else {
    return 'Please input a valid task.';
  }
}

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

Оператор switch предлагает более четкое решение для решения нескольких кейсов, чем традиционный оператор if…else.

Снова обратившись к MDN, мы видим оператор switch, определенный как таковой:

«Инструкция switch оценивает выражение, сопоставляя значение выражения с предложением case, и выполняет инструкции, связанные с этим case, а также инструкции в case, которые следуют за совпадающим case».

Используя пример, предоставленный MDN, мы можем увидеть синтаксис оператора switch, написанного следующим образом:

switch (expression) {
  case value1:
    //Statements executed when the
    //result of expression matches value1
    [break;]
  case value2:
    //Statements executed when the
    //result of expression matches value2
    [break;]
  ...
  case valueN:
    //Statements executed when the
    //result of expression matches valueN
    [break;]
  [default:
    //Statements executed when none of
    //the values match the value of the expression
    [break;]]
}

Если мы применим этот синтаксис к нашей showDirections()функции выше, мы можем переписать функцию, используя оператор switch, и добиться гораздо более чистого результата.

function showDirections(task) {
  switch (task) {
    case 'chop fruit':
      return 'Dice two cups of desired fruit.';
    case 'make dough':
      return 'Mix flour, water, sugar and yeast in bowl.';
    case 'stir filling':
      return 'Stir chocolate and cream till whipped.';
    default:
      return 'Please input a valid task.';
  }
}

Мы достигли того же результата, что и раньше, но на этот раз мы использовали менее повторяющийся код и теперь имеем гораздо более эффективную функцию. Оператор switch принимает наш параметр task и проверяет каждый случай, пока условие не будет выполнено, и возвращает оператор, вложенный в условие. Если ни один регистр не соответствует нашему параметру task, код выполняет сообщение ‘Please input a valid task.’

Заключение

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

Когда дело доходит до операторов if…then, ternary operator можно использовать для очистки вашего кода, когда желаемый результат удовлетворяет истинным или ложным условиям. Оператор switch можно использовать, чтобы избежать повторяющегося кода при проверке выполнения определенных условий в каждом конкретном случае.

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

Удачного кодирования!