5 советов по написанию чистого кода на JavaScript

По мере приобретения опыта работы с JavaScript появляются советы и принципы написания чистого кода, которые вы должны знать.

Программная инженерия — относительно новое ремесло. Медицинское ремесло существует тысячи лет, в то время как программная инженерия появилась только в начале 1960-х годов. Мы все еще учимся писать чистый код. Однако существуют некоторые принципы, которые широко признаны сообществом в качестве лучших практик.

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

Почему чистый код важен

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

В этой статье я определяю чистый код как:

• Легко читаемый
• Легко понять

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

Написание чистого кода на JavaScript

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

Извлечение магических чисел в константы

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

Плохо:

const isOldEnough = (person) => {
  // What does 100 refer to? This is a so-called "magic number"
  return person.getAge() >= 100; 
}

Хорошо:

const AGE_REQUIREMENT = 100; // Now we know what 100 refers to

const isOldEnough = (person) => {
  return person.getAge() >= AGE_REQUIREMENT;
}

Избегайте аргументов булевых функций

Аргументы булевых функций — это типичный «запах кода» (нарушение фундаментальных стандартов программирования). Это происходит потому, что им не хватает смысла. И это указывает на то, что ваша функция делает более одной вещи, чего всегда следует избегать!

Плохо:

const validateCreature = (creature, isHuman) => {
  if (isHuman) {
    // ...
  } else {
    // ...
  }
}

Хорошо:

const validatePerson = (person) => {
  // ...
}

const validateCreature = (creature) => {
  // ...
}

Инкапсулируйте условные утверждения

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

Плохо:

if (
  person.getAge() > 30 &&
  person.getName() === "simon" &&
  person.getOrigin() === "sweden"
) {
  // ...
}

Хорошо:

const isSimon =
  person.getAge() > 30 &&
  person.getName() === "simon" &&
  person.getOrigin() === "sweden";

if (isSimon) {
  // ...
}

// OR use a function

const isSimon = (person) => {
  return (
    person.getAge() > 30 &&
    person.getName() === "simon" &&
    person.getOrigin() === "sweden"
  );
};

if (isSimon(person)) {
  // ...
}

Избегайте отрицательных условий

Отрицательные условия («двойное отрицание») добавляют дополнительное условие в ваш мозг, когда вы читаете код. Вы не скажете: «Я не хочу спать». Вы бы сказали «я хочу спать». Такая же практика применима и к коду!

Плохо:

const isCreatureNotHuman = (creature) => {
  // ...
}

if (!isCreatureNotHuman(creature)) {
  // ...
}

Хорошо:

const isCreatureHuman = (creature) => {
  // ...
}

if (isCreatureHuman(creature)) {
  // ...
}

Не используйте утверждения If

Это может показаться безумием, но послушайте меня! Операторы if просты для понимания, но не масштабируются. Как только в одной функции появляется более одного или двух операторов if, код становится трудно воспринимаемым.

Вместо этого используйте оператор switch или, если возможно, структуру данных, например, Array, Set или Map.

Плохо:

const isMammal = (creature) => {
  if (creature === "human") {
    return true;
  } else if (creature === "dog") {
    return true;
  } else if (creature === "cat") {
    return true;
  }
  // ...

  return false;
}

Хорошо:

const isMammal = (creature) => {
  switch (creature) {
    case "human":
    case "dog":
    case "cat":
    // ...
      return true;
    default:
      return false;
  }
}

// OR even better, use a data structure

const isMammal = (creature) => {
  const mammals = ["human", "dog", "cat", /* ... */];
  return mammals.includes(creature);
}

Заключение

Это пять моих самых важных принципов написания чистого кода на JavaScript. Практика делает совершенным, и то же самое относится к написанию кода. Если вы уже следуете этим принципам сегодня — продолжайте в том же духе! Я уверен, что вы уже много раз практиковались в написании кода. Если нет — не отчаивайтесь! Мы все с чего-то начинаем 🙂

Подведем итоги:

• Извлекайте магические числа в константы
• Избегайте аргументов булевых функций
• Инкапсулируйте условия
• Избегайте отрицательных условий
• Не используйте утверждения If

Свяжитесь со мной в Twitter, LinkedIn или GitHub.