Урок 9. Создание понятного кода на JavaScript

Ошибки в программе достаточно сложно найти. И, чтобы упростить себе задачу, нужно писать код правильно и красиво (читаемо). Хороший код должен быть: удобочитаемым, непротиворечивым, предсказуемым, правильно оформленным, а также он должен иметь документацию.

Важные моменты по оформлению кода

Отступы

Если вы не делаете отступы, то код невозможно читать. Обычно отступы оформляют символом табуляции, но есть и те, кто отступ делает при помощи пробелов, в основном 3-4 пробела. Далее пример правильной и неправильной расстановки отступов:

/* Правильные отступы */
var answer, arr = [1, 2, 3, 4, 5, 6, 7], sum = 0;
for (var i = 0, max = arr.length; i < max; i++) {
    if (arr[i] % 2 === 0) {
        answer = {
            sum: sum += arr[i]
        };
    }
}

/* А тут все плохо */
var answer, arr = [1, 2, 3, 4, 5, 6, 7], sum = 0;
for (var i = 0, max = arr.length; i < max; i++) {
if (arr[i] % 2 === 0) {
answer = {
sum: sum += arr[i]
};
}
}

Фигурные скобки

Всегда используйте фигурные скобки, даже если они не нужны. С технической точки зрения, если тело конструкции if, while или for состоит из одной инструкции, то фигурные скобки можно не писать. Написанные фигурные скобки всегда упрощают последующее внесение изменений. Далее пример, как правильно, а как нет:

/* Правильная запись */
for (var i = 0; i < 5; i++) {
    alert(i);
}

/* А такая нет */
for (var i = 0; i < 5; i++)
    alert(i);

Местоположение открывающей скобки

Есть два типа программистов:

if (a > b) {
    ...
}

if (a > b)
{
    ...
}

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

return
{
    id: 1
};

И что сделает интерпретатор? Он подставит точку с запятой после return и получится, что функция вернет undefined. То есть интерпретатор видит этот кусок кода так:

return undefined;
{
    id: 1
};

Пробелы

Пробелы нужно использовать правильно. Вы когда пишите на бумаге, оставляете после запятой пустое пространство? Наверно да. И при перечислении чего-либо в JavaScript нужно делать пробел после запятой. Где нужно ставить пробел, чтобы код был понятным?

1. После точек с запятой в инструкции for

for (var i = 0; i < 100; i++) {...}

1. При объявлении нескольких переменных в инструкции for

for (var i = 0, max = arr.length; i < max; i++) {...}

1. После запятых, между элементами массива

var newArr = [1, 2, 3];

1. После запятых, между аргументами функций и перед фигурными скобками

function helloWorld(a, b, c, d) {...}

1. Так же ставить пробелы перед и после:

+ - * = / < > % <= >= == === !== != && || += -= *= /* и так далее */

1. Не нужно ставить пробелы перед первым аргументом функции и после последнего. Это относится и к объектам и массивам

function helloWorld( a, b ) {...} /* Перед a и после b пробел, который не нужен */
var arr = [ 1, 2, 3 ] /* Перед 1 и после 3 пробел, который не нужен */

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

Урок 10. Типы данных и значения в JavaScript