1. Объекты 1.1. Создание объекта 1.2. Зарезервированные слова 1.3. Ключевые слова 1.4. Создание обьекта на 3 и более элементов
  2. Переменные
  3. Функции 3.1. Именование функции 3.2. Передача функции в функцию
  4. Отступы 4.1. Горизонтальные отступы 4.2. Вертикальные отступы
  5. Пробелы
  6. Скобки
  7. Кавычки
  8. Точка с запятой
  9. Комментарии

1. Объекты

1.1 Создание объекта

Для создания объекта используйте фигурные скобки. Не создавайте объекты через конструктор new Object().

Хорошо

let item = {};

Плохо

let item = new Object();

1.2 Зарезервированные слова

Не используйте зарезервированные слова в качестве ключей объектов. Они не будут работать в IE 8.

Подробнее

Хорошо

let superman = {
  defaults: { clark: 'kent' },
  hidden: true
};

Плохо

let superman = {
  default: { clark: 'kent' },
  private: true
};

1.3 Ключевые слова

Не используйте ключевые слова, в том числе изменённые. Вместо них используйте синонимы.

Хорошо

let superman = {
  type: 'alien'
};

Плохо

let superman = {
  class: 'alien'
};

1.4 Создание объекта на 3 и более элементов

При создании объектов, равно как и массивов, содержащих большое количество свойств (элементов) и тем самым образующих строки длиной более 20 символов, нужно выполнять ряд условий:

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

Хорошо

let superman = {
  defaults: { clark: 'kent' },
  type: 'alien',
  hidden: true
};

Плохо

let superman = {
  defaults:{clark:'kent'},
  type:'alien',
  hidden:true
};

Плохо

let superman = {defaults: { clark: 'kent' }, type: 'alien', hidden: true};

2. Переменные

Для именования переменных используйте существительные на английском языке.

  • Не используйте транслит (слова на русском языке латинскими буквами).
  • Имя переменной должно быть осмысленным.
  • Имя переменной не должно состоять из одной буквы (кроме итераторов циклов i и j).
  • Для имён, состоящих из нескольких слов, используйте camelCase.

Имя может состоять из букв, цифр, символов $ и _, не должно начинаться с цифры.

Хорошо

let vegetables;
let hasPositiveSaldoAccount;

Плохо

let rrfgov;
let ovoschi;
let HasPositiveSaldoAccount;
let has_positive_saldo_account;
let a;

3. Функции

3.1 Именование функции

Имя функции должно быть глаголом (кроме функций-конструкторов) на английском языке или начинаться с него.

  • Не используйте транслит (слова на русском языке латинскими буквами).
  • Имя функции должно быть осмысленным.
  • Для имён, состоящих из нескольких слов, используйте camelCase. Исключение — функции конструкторы.

Хорошо

function editName() {
  // Тело функции
};

function Vehicle(name) {
  // Тело функции
}

Плохо

function pravkaspiska() {
  // Тело функции
};

function GetVehicle(name) {
  // Тело функции
}

3.2 Передача функции в функцию

Передавая функцию как аргумент в другую функцию, оформляйте код, как в примере ниже:

let arr = ['Яблоко', 'Апельсин', 'Груша'];
arr.forEach(function(item, i, arr){
  alert(i + ': ' + item + ' (массив:' + arr + ')');
});

arr.forEach((item, i, arr) => alert(i + ': ' + item + ' (массив:' + arr + ')'));

4. Отступы

4.1 Горизонтальные отступы

Отступ при вложенности — 2 пробела на каждый уровень вложенности.

  • Не используйте символы табуляции.
  • Отступы должны быть равномерными. Для каждого вложенного блока отступ должен увеличиваться ровно на 2 пробела. По одному отступу должно быть понятно, к какому блоку относится действие.
  • В редакторе кода символ табуляции можно заменить на 2 пробела.
  • Включите отображение невидимых символов.
  • Для корректности отступов желательно использовать расширение indent-rainbow, которое раскрашивает блоки отступов в разные цвета. С этим расширением не должно быть отступов, выделенных красным цветом.

Хорошо

if (age < 98) {
  let a = 15;
  for (let i = 0, iMax = items.length; i < iMax; ++i) {
    // Тело цикла
    if(i < 15) {
      // Тело условной конструкции
      let b = 30;
      let c = a + b;
      console.log(c * 2);
    }
  }
}

Плохо

if (age < 98) {
for (let i = 0, iMax = items.length; i < iMax; ++i) {
// Тело цикла
let a = 15;
if(i < 15) {
// Тело условной конструкции
let b = 30;
let c = a + b;
console.log(c * 2);
}
}
}

Плохо

if (age < 98) {
 for (let i = 0, iMax = items.length; i < iMax; ++i) {
 // Тело цикла
 let a = 15;
    if(i < 15) {
 // Тело условной конструкции
 let b = 30;
let c = a + b;
   console.log(c * 2);
 }
}
}

Плохо

// Присутствуют символы табуляции
if (age < 98) {
 for (let i = 0, iMax = items.length; i < iMax; ++i) {
  console.log(i);
 }
}

// Присутствуют как символы табуляции, так и символы пробелов
if (age < 98) {
    for (let i = 0, iMax = items.length; i < iMax; ++i) { // На этой строке отступ сделан табуляцией
    console.log(i); // На этой строке отступ сделан сначала пробелами, а затем табуляцией
  } // На этой строке отступ сделан пробелами
}

4.2 Вертикальные отступы

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

Хорошо

let iMax = items.length;
for (let i = 0; i < iMax, ++i) {
  // Тело цикла
}

function showName() {
  // Тело функции
}

Плохо

let iMax = items.length;

for (let i = 0; i < iMax, ++i) {
  // Тело цикла
}
function showName() {
  // Тело функции
}

Плохо

let a = 15;

let b = 30;

let c = a + b;

console.log(c * 2);

5. Пробелы

  • Используйте пробелы между параметрами и не используйте между именем функции и скобкой.

Хорошо

function edit(name, age) {
  // Тело функции
}

Плохо

function edit (name,age) {
  // Тело функции
}
  • При создании анонимной функции (функции без имени) ставьте пробел перед скобкой.

Хорошо

function (name, age) {
  // Тело функции
}

Плохо

function(name,age) {
  // Тело функции
}
  • Используйте пробелы вокруг операторов.

Хорошо

if (age < 100) {
  // Тело условной конструкции
}

Плохо

if (age<100) {
  // Тело условной конструкции
}

6. Скобки

  • Открывающая фигурная скобка располагается на той же строке.
  • Перед скобкой ставится пробел.
  • Закрывающая скобка располагается на новой строке.
  • Всегда добавляйте фигурные скобки для циклов и условных конструкций, даже когда блок состоит из одного действия.

Хорошо

function edit(name, age) {
  if (age < 100) {
    // Тело условной конструкции
  }
}

Плохо

function edit(name, age)
{
  if (age < 100) {/*Тело условной конструкции*/}
}

Плохо

function edit(name, age)
{
  if (age < 100) /*Тело условной конструкции*/
}

Плохо

function edit(name, age)
{
  if (age < 100) 
    /*Тело условной конструкции*/
}

7. Кавычки

В коде скрипта всегда используйте одинарные кавычки, если не требуется иного. Двойные кавычки допустимы, если в этой же строке используется апостроф ( ‘ ) или одинарные кавычки для других целей.

Хорошо

let string = 'строка';
let phrase = "you're next";

Плохо

let string = "строка";

8. Точка с запятой

В конце выражения обязательна точка с запятой.

Хорошо

alert('Привет');
alert('Мир');

Плохо

alert('Привет')
alert('Мир')

9. Комментарии

Для пояснения кода используются комментарии. Комментарии не исполняются интерпретатором JavaScript.

  • Однострочные комментарии начинаются с двойного слеша (//). За ним обязательно должен идти пробел.
  • Многострочные комментарии располагаются между /* и */. За символом начала комментария обязательно должен идти пробел. Символ конца комментария располагается на новой строке.
  • Никогда не оставляйте закомментированный код. Комментарии должны использоваться для пояснения программы, а не для скрытия другой реализации действий.

Хорошо

/* Пример комментария.
Многострочного комментария
*/

// Пример однострочного комментария

Плохо

/*Пример комментария.
Многострочного комментария*/

//Пример однострочного комментария