Стиль кода JavaScript: best practices

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

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

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

Что такое стиль оформления кода

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

Заранее определенный стиль позволяет получить согласованный, понятный и простой в поддержке код.

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

Важность стилей

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

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

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

Стандарты написания кода

Стандарты — это определенные наборы правил оформления кода, которым вы можете следовать. Причем мы не можем сказать, что один стандарт чем-то лучше другого. У каждой компании свой собственный стиль, которого разработчики придерживаются при работе над проектами этой компании.

Крупные организации публикуют свои стандарты для общего пользования. Два самых известных стандарта написания JavaScript-кода — от Google и от AirBnb.

Стили, которых я придерживаюсь, очень напоминают стили AirBnb, поскольку именно к ним я привык в компаниях, в которых работал. Если вы предпочитаете другой стандарт, используйте его. Главное — придерживаться какого-то одного набора правил в рамках одного проекта.

Вы также можете использовать такие инструменты, как ESLint или Prettier. Они обнаруживают нарушения правил, определенных в настройках, и принудительно приводят код в соответствие со стандартом.

Стили написания имен методов, функций и переменных

Имена функций и переменных могут писаться в разных стилях. Наиболее известны следующие:

• camelCase («верблюжий регистр»). Слова, из которых состоит имя переменной, пишутся слитно, без пробелов, а каждое отдельное слово пишется с большой буквы. Самая первая буква имени остается строчной. Например, функцию для управления аккаунтом можно назвать accountManagement.
• PascalCase. Здесь тоже все слова объединяются и каждое новое пишется с заглавной буквы. Но, в отличие от camelCase, первая буква тоже заглавная. Имя той же функции для управления аккаунтом, написанное в PascalCase, будет AccountManagement.
• snake_case (змеиный регистр»). Все слова пишутся строчными буквами и разделяются символами подчеркивания. Имя нашей функции-примера в змеином регистре будет account_management.
• kebab-case. Этот стиль похож на змеиный регистр, только здесь слова разделяются не знаками подчеркивания, а дефисами. В kebab-case наша функция будет называться account-management.

Никакой из стилей не лучше других. Разве что kebab-case в JavaScript практически не используется. Обычно для имен классов применяется PascalCase, а почти для всего остального — camelCase. Но многие разработчики предпочитают писать имена переменных в snake_case.

Какие правила использовать? Ваши!

Тут главное быть последовательным. Ниже я изложу правила, которым следую сам. Они во многом сходны со стилем AirBnb, но не на 100%.

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

Пробелы. Я предпочитаю использовать побольше пробелов. Обычно ставлю их после закрывающей круглой скобки, если это не конец строки, а также до и после символов арифметических операций, таких как +, -, / или *, проверок или условий.

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

Отступ. Я использую 4 пробела вместо таба. Также часто используются два пробела.

Длина строки. Длина моих строк не превышает 120 символов. Многие разработчики ограничиваются 80 символами, но мне кажется, что это коротко. У меня есть плохая привычка использовать слишком длинные строки.

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

Объявление переменных. Я никогда не объявляю переменные с помощью var. Вместо этого использую const, когда значение или ссылка не будут меняться, и let — когда хочу объявить переменную.

От редакции Techrocks. Рекомендуем статью «Var, Let и Const: в чем разница?».

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

Структура функции. Я стараюсь использовать стрелочные функции. Иногда, как в случае с конструкторами, это невозможно. По мере возможности я определяю функции так:

const miFuncion = (a, b) => a * b;

Имена переменных. Я всегда использую camelCase, хотя до недавнего времени отдавал предпочтение snake_case.

Имена классов. Для них я использую PascalCase как в имени класса, так и в имени файла, который его включает.

Одинарные или двойные кавычки. По возможности я использую одинарные кавычки вместо двойных. Обычно я резервирую двойные кавычки для тегов атрибутов HTML. Таким образом, если мне нужно вставить в них JavaScript, я могу это сделать с помощью двойных кавычек. Этот подход я применяю и с другими языками, например PHP.

От редакции Techrocks. Рекомендуем статью «Одинарные, двойные и обратные кавычки в JavaScript».

Шаблонные литералы. Это выражения, в которых для определения строк используются обратные кавычки. Когда мне нужно вставить переменные в текстовые строки, я использую эти кавычки, вставляя переменную в середине. Пример: `Here I am inserting a ${variable}`.

Имена функций и методов. Как и в случае с переменными, я использую camelCase как для функций, так и для методов классов.

Операторы if. Тут я применяю два разных подхода, в зависимости от длины строк:

// If без дополнительных условий  
if (condition) {    
  // код 
}
    
// If с else  
if (condition) {    
  // код  
} else {    
  // код  
} 
   
// If с несколькими else  
if (condition) {    
   // код  
} else if (condition) 
{    
  // код 
} else {    
// код
 }

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

// If без дополнительных условий
if (statement) variable = true; 
   
// If с одним else  
if (statement) variable = true;  
else variable = false;

От редакции Techrocks. Рекомендуем статью «Тернарный оператор в JavaScript: за, против, подводные камни».

Операторы switch. При написании switch я всегда определяю условие по умолчанию и использую несколько строк:

switch (expression) {    
case expression:      
// код    
default:      
// код  
}

Циклы for. Циклы всегда пишу в несколько строк. Элемент для определения итераций цикла всегда инициализирую в его собственном определении. Я считаю, что это лучше, чем вставка в условие. Разные элементы определения цикла я разделяю точками с запятой.

for (initialization; condition; update) {    
// код 
}

Циклы while. Для них всегда использую несколько строк:

while (condition) {
  // код
  }

Циклы do while. Их я использую редко и пишу в несколько строк:

do {
  // код
  } while (condicion);

try/catch/finally

// try catch
  try {
  // код
  } catch (error) {
  // код
  }

// try catch finally
  try {
  // код
  } catch (error) {
  // код
  } finally {
  // код
  }

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

Перевод статьи «JavaScript Programming Styles: Best Practices».

[customscript]techrocks_custom_after_post_html[/customscript]

[customscript]techrocks_custom_script[/customscript]