4 секрета читаемого и производительного кода JavaScript

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

1. Пишите код в стиле строго типизированного языка 

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

Конкретизируйте тип данных при определении переменной 

Плохой код: 

В данном примере переменные не содержат информацию о типе, что усложняет понимание кода или его оптимизацию интерпретатором JavaScript. 

Хороший код: 

Не меняйте тип переменной произвольно

Плохой код: 

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

В то же время в движках типа V8 код JavaScript выполняется после того, как преобразуется в байт-код, в котором тип данных определен. В случае изменения типа переменной компилятору придется заняться дополнительной обработкой, что замедлит выполнение программы. 

Хороший код: 

Если вам необходимо изменить тип значения, используйте новую переменную. 

Возвращаемый тип функции должен быть фиксированным 

Плохой код: 

Данная функция может вернуть целое число или строку. Это не противоречит синтаксису JavaScript, но затрудняет вызов функции для выполнения арифметических действий непосредственно с результатом getPrice().

Хороший код: 

В комментарии к функции мы можем условиться, что в случае возврата -1 аргумент является некорректным. Это позволит вызывающему компоненту обработать результат стандартным способом. 

2. Сокращайте число необязательных просмотров областей видимости 

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

Не раскрывайте код для глобальной области видимости без необходимости

Плохой код:

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

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

Хороший код:

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

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

Не злоупотребляйте замыканиями 

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

Плохой код:

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

В то же время, если область углублена на несколько уровней, а между process иcount располагаются десятки строк кода, то при считывании функции process переменную count легко перепутать. 

Вот поэтому будет лучше передать count в качестве параметра process.

Хороший код: 

3. Используйте возможности ES6 для упрощения кода 

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

Реализуйте обратные вызовы стрелочными функциями, а не обычными

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

Плохой код:

Хороший код:

Класс 

Традиционный синтаксис прототипа отделит код конструктора от кода метода прототипа, препятствуя эффективной организации кода. 

Плохой код:

Благодаря применению класса упрощается как понимание кода, так и реализация наследуемых статических функций-членов. 

Хороший код:

Шаблонные строки 

Шаблонные строки заключены в обратные кавычки (` `) вместо двойных или одинарных. 

Плохой код:

В шаблонных строках допустимы любые символы вместо escape-символов, таких как \n. 

В то же время мы можем напрямую использовать выражение ${} для вставки переменных вместо разделения строк и конкатенации с помощью +. 

Хороший код:

Очевидно, что данный код читается легче. 

Параметры по умолчанию 

Когда нужно присвоить аргументам функции значение по умолчанию, в ES5 можно написать следующий код:

В ES6 используется уже более понятный и читаемый способ. 

Переменные с блочной областью видимости 

Для последовательного вывода в консоль чисел 0, 1, 2, …10 с интервалом в 100 мс возможен следующий вариант кода: 

for(var index = 0; index <= 10; index++){
  setTimeout(() => console.log(index), 100)
}

К сожалению, этот код не соответствует требованиям. Так как объявленные с помощью var переменные находятся в глобальной области видимости, значение index меняется на 11 при выполнении функции обратного вызова setTimeout.

В ES5 предлагается решение в виде замыканий: 

for(var index = 0; index <= 10; index++){
  (function(archivedIndex){
    setTimeout(() => console.log(archivedIndex), 100)
  })(index)
}

В данном примере мы сохраняем значение indexс помощью замыкания, чтобы при выполнении setTimeout обнаруживалось верное значение index.

Но этот вариант трудоёмкий и сложный для понимания. Намного лучше с помощью let объявить переменную с блочной областью видимости. 

for(let index = 0; index <= 10; index++){
  setTimeout(() => console.log(index), 100)
}

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

4. Грамматический стиль 

Замените простую условную конструкцию if-else на тернарный оператор 

В целом синтаксис тернарного оператора выглядит так: 

condition ? expression_1 : expression_2;

condition  —  это выражение, которое вычисляется в логическое значение true или false. Если его условие равно true, то тернарный оператор возвращает expression_1, в противном случае  —  expression_2.

Плохой код:

Хороший код:

Избегайте == 

Оператор == подразумевает множество механизмов, поэтому чрезмерное его применение усложнит понимание кода, который можно сделать понятнее путем явного преобразования типов данных.  

Плохой код:

Хороший код:

Читайте также:

• Три точки (…) в Javascript
• Паттерн проектирования «Наблюдатель»: объект под прицелом
• 5 основных рекурсивных задач на собеседованиях по программированию

Читайте нас в Telegram, VK и Яндекс.Дзен

---

Перевод статьи bitfish: 4 Key Principles to Writing Readable and Efficient JavaScript Code