Как писать JavaScript как гуру

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

Рассмотрим следующий код

Ну, выглядит довольно ясно, не так ли? Всего пара операторов if-else, оптимизировать нечего. Ладно, пришло время выйти на новый уровень написания кода.

Избегайте магических чисел и строк

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

Итак, в нашем случае мы можем сделать следующее

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

Я настоятельно рекомендую использовать TypeScript для добавления строгой проверки типов, которая значительно уменьшит количество ошибок типов и позволит вам обнаруживать ошибки на ранних этапах вашего редактора. (Для нашего случая Enums подошёл бы очень хорошо)

Избегайте вложенных операторов if

Вложенные операторы if действительно трудно читать. Так что следующий трюк для нас — как-то разложить их. Ну это легко

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

Хм, но я все еще недостаточно удовлетворен. Эти утверждения else-if следует учитывать... И я думаю, что знаю, как это сделать.

Не избегайте операторов return.

Мы помним, что функция завершает свое выполнение, когда интерпретатор вызывает оператор return.

Теперь давайте упростим наш код, используя эти знания.

Круто, больше никаких операторов if-else. Выглядит круто. Я бы одобрил этот код без каких-либо проблем!

Бонус: использование console.log() с оператором return

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

Хорошо, что дальше? Хорошо, теперь мы можем немного упростить наш код.

Теперь в строках 9, 12, 15 и 18 у нас есть упрощенные и умные операторы возврата.

Но имеет ли смысл использовать несколько операторов console.log()? Определенно нет, давайте не будем повторяться.

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

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

Теперь вы готовы писать код как профессионал, так что идите и решайте задачи по решению проблем ✌🏻