7 лучших практик, чтобы писать чистый код на JavaScript

Богдан Мирченко

19.01.2022 14:30

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

1. Деструктуризация объектов

Деструктуризация объекта позволяет разбивать объект или массив на переменные при присвоении. Это уменьшает количество строк кода, необходимых для извлечения свойств объекта, и делает код понятнее.

Процесс позволяет сэкономить большое количество явных обновлений переменных, и полезен при:

использовании нескольких свойств объекта;
использовании одного и того же свойства несколько раз;

использовании свойства, глубоко вложенного в объект.

const employee = {name: ‘ANE01’, email: ‘Anna@example.com’, phone:’0112–345–6789'};

//with destucturing

const {name, email, phone} = employee;

//without destucturing

const name = employee.name;
const email = employee.email;
const phone = employee.phone;

Вывод двух приведенных выше примеров (с деструктуризацией и без нее) идентичен. Но использование деструктуризации объектов делает код намного проще и легче для понимания.

2. Используйте несколько параметров объекта вместо одного

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

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

//recommended

function CustomerDetail (CustomerName, CustomerType, Order){ 
   
  console.log('This is ${CustomerName} of ${CustomerType} and need ${Order}');

} 

//not-recommended

function CustomerDetail (User){  
  
  console.log('This is ${User.CustomerName} of ${User.CustomerType} and need ${User.Order}');

}

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

3. Используйте стрелочные функции

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

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

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

// Arrow function

const myOrder = order => console.log(`Customer need ${order}`);

// Regular Function

function(order){
   console.log(`Customer need ${order}`);
}

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

4. Используйте шаблонные литералы для конкатенации Объединение двух или более строк в одну большую строк

Шаблонные литералы — это строковые литералы, допускающие использование выражений внутри, обозначаемых знаком $ и фигурными скобками. (${выражение}). Они позволяют создавать многострочные строки (строка, содержащая в себе символы переноса строки) и выполнять строковые интерполяции.

//before
var name = 'Peter';
var message = 'Hi'+ name + ',';

//after
var name = 'Peter';
var message = `Hi ${name},`;

5. Используйте оператор расширения `(…)`

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

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

let x = [car, bus,van];
let y = [bike, truck, ..x, lorry]

console.log (y);

// bike, truck, car, bus, van, lorry

6. Избегайте callback-функции

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

Например, код ниже содержит четыре callback-функции, и чем больше будет кода, тем менее читаемым он будет.

function1(function (err, data) { 
  ...  
  function2(user, function (err, data) {
    ...
     function3(profile, function (err, data) {
      ...
      function4(account, function (err, data) {
        ....
      }); 
    }); 
  });
});

В качестве решения в ES6 и ES7 ввели Promises и Async/Await для обработки асинхронных функций. Они намного проще в использовании и делают код понятнее.

Вот как будет выглядеть код, если использовать Promises или Async/Await.

// Promises

function1() 
.then(function2) 
.then(function3) 
.then(function2) 
.catch((err) => console.error(err));

// Async/Await

async function myAsyncFunction() {  
try {    
  const data1= await function1();    
  const data2= await function2(data1);    
  const data3= await function3(data2);    
  return function4(data4);  
} 
catch (e) {    
  console.error(err);  
}}

7. Используйте сокращения

При работе с условными операторами сокращения позволят сэкономить время разработки и сократить объем программы.

Например, при написании условного оператора для проверки пустого, нулевого и неопределенного состояния переменной нужно написать два условия в операторе if.

if (x !== “” && x !== null && x !== undefined) { ... }

При использовании сокращения достаточно написать одно условие, как показано ниже.

if ( !!x ) { ... }

Примечание: некоторые разработчики не согласны с приведенном автором примером. Они считают, нельзя использовать предложенную замену, потому что исходное условие пропустит 0, а предложенная замена — нет. Это, по их словам, типичная ошибка новичка.

По ссылке найдете 10 лайфхаков для JavaScript-разработчика.