6 советов по JavaScript, которые мгновенно улучшат ваш код

Простые и эффективные советы по улучшению кода JavaScript

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

Вот почему я хочу поделиться с вами этими простыми, но действенными советами, которые мгновенно улучшат ваши навыки. Итак, давайте приступим!

Схема раннего возврата

Простой способ уменьшить количество операторов if-else в функции — использовать оператор return вместо нескольких условий.

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

Плохо

function isValidUser(user) {
  if (isValidEmail(user.email)) {
    const alreadyRegistered = findUserByEmail(user.email);

    if (!alreadyRegistered) {
      return true;
    } else {
      return false;
    }
  } else {
    return false;
  }
}

Хорошо

function isValidUser(user) {
  if (!isValidEmail(user.email)) return false;

  return findUserByEmail(user.email);
}

Используйте тернарные операторы

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

Мы хотим изменить message на основе errorCode. Обе реализации делают одно и то же, но подумайте, какая версия удобнее.

Плохо

const errorCode = 200;
let message = null;

if (errorCode > 299) {
  message = "Something went wrong";
} else {
  message = "Everything is alright";
}

Хорошо

const errorCode = 200;
const message = errorCode > 299
  ? "Something went wrong"
  : "Everything is alright";

Строки шаблона

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

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

Плохо

const name = "Pavel";
const job = "Frontend developer";
const age = 21;

const message = "My name is " + name + ". I am " + age + " years old and I work as a " + job;

Хорошо

const name = "Pavel";
const job = "Frontend developer";
const age = 21;

const message = `
  My name is ${name}.
  I am ${age} old and
  I work as ${job}
`;

Булево выражение && Func()

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

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

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

Плохо

const amenities = []

if (hasToilet) {
  amenities.push('Toilet')
}

if (hasKitchen) {
  amenities.push('Kitchen')
}

if (hasWifi) {
  amenities.push('Wi-Fi')
}

Хорошо

const amenities = [];

hasToilet && amenities.push("Toilet");
hasKitchen && amenities.push("Kitchen");
hasWifi && amenities.push("Wi-Fi");

Необязательная цепочка

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

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

Плохо

if (user.address && user.address.town && user.address.town === 'Tokyo') {
  console.log('Congratulations')
}

Хорошо

if (user?.address?.town === 'Tokyo') {
  console.log('Congratulations')
}

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

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

Если вам нужно сравнить переменные с приведением типов, просто сделайте это самостоятельно. Не стесняйтесь использовать такие функции и конструкторы, как String(), Number(), Boolean(), parseInt(), parseFloat(). Это будет легче понять и, следовательно, поддерживать!

Плохо

const userInput = "5";
const validInput = 5;

if (userInput == validInput) {
  console.log("Your Are Right!");
}

Хорошо

const userInput = "5";
const validInput = 5;

if (parseInt(userInput) === validInput) {
  console.log("Your Are Right!");
}

Спасибо, что прочитали!

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

Не забудь подписаться⭐️

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.

Повысьте узнаваемость и признание вашего технического стартапа с помощью Circuit.