8 советов, которые сделают JavaScript-код чище

Чистый код - это концепция разработки программного обеспечения, в которой особое внимание уделяется написанию кода, который легко понять, поддерживать и тестировать. Она включает в себя такие принципы, как читабельность, простота, отсутствие избыточности, осмысленное именование, единая ответственность за функции или методы, эффективная обработка ошибок, четкая коммуникация через код и тестируемость. Цель чистого кода - сделать исходный код понятным как для нынешних, так и для будущих разработчиков, что способствует сотрудничеству и облегчает постоянное сопровождение и улучшение программного обеспечения. Принципы чистого кода изложены в таких книгах, как «Чистый код: A Handbook of Agile Software Craftsmanship» Роберта К. Мартина.

1. Всегда используйте осмысленные имена для переменных

//Плохо
const a = "Dafa Pramudya"
const b = "Male"

//Хорошо
const fullName = "Dafa Pramudya"
const gender = "Male"

const isActive = true;
const canEdit = false;
const hasPermission = true;

const cars = getCars()
const carById = getCar(id)
const updatedCar = updateCar(id)
const resultDeletedCar = deleteCar(id)

2. Избегайте создания функций с большим количеством параметров

//Плохо
function registerUser(fullName, email, phoneNumber, gender, address, hobbies) {
    //Логика регистрации пользователя 
}


//Хорошо
function registerUser(data) {
    const {
        fullName, email, phoneNumber,
        gender, address, hobbies
    } = data
    //Логика регистрации пользователя
}

3. Избегайте создания условий, содержащих сложные проверки

//Плохо
if(role === 'admin' && projectMember.length && projectStatus === 'confirmed') {
    //Логическая функция
}


//Хорошо
const isAdminCanApprove = checkAdminCanApprove(data);
if(isAdminCanApprove) {
    //Логика
}
//Или (альтернатива)
if(isAdminCanApprove(data)) {
    //Логика
}

function checkAdminCanApprove(data) {
    try {
        const {
            role,
            projectMember,
            projectStatus
        } = data;
        if(role === 'admin' && projectMember.length && projectStatus === 'confirmed') {
            return true;
        }
        return false;
    }catch(err) {
        //Обработка ошибки
    }

4. Следите за тем, чтобы функция выполняла только одну задачу

// Несоблюдение принципа единственной ответственности
function processUserDataAndGenerateReport(user) {
    // Обработка данных пользователя 
    // ...
    // Генерация отчета 
    // ...
}

// Соблюдение принципа единственной ответственности 
function processUserData(user) {
    // Обработка данных пользователя 
    // ...
}

function generateReport(user) {
    // Генерация отчета 
    // ...
}

5. Обязательно ведите журнал (лог)

function processMultiplyDataBy2(data) {
    console.log('Processing data started:', new Date());
  
    try {
      const processedData = data.map(item => item * 2);
  
      console.log('Data processing successful:', new Date());
  
      return processedData;
    } catch (error) {
      console.error('Error during data processing:', error, new Date());
  
      throw error;
    }
  }
  


  const dataNumbers = [1, 2, 3, 4, 5];
  
  try {
    const result = processMultiplyDataBy2(dataNumbers);
    console.log('Processed data:', result);
  } catch (error) {
    console.error('Error handling:', error);
  }

6. Всегда используйте try-catch при создании функций

function divide(a, b) {
  try {
    if (b === 0) {
      throw new Error('Division by zero is not allowed.');
    }
    return a / b;
  } catch (error) {
    console.error('Error:', error.message);
    // Обработайте ошибку или занесите ее в журнал (на выбор).
    // Можете также повторно выбросить ошибку при необходимости.
}

async function fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching data:', error.message);
    // При необходимости обработайте ошибку или запишите ее в журнал.
  }
}

7. Создавайте короткие комментарии к документации, связанные с объявленной функцией

/**
 * Получение haveCertificate от пользователя
 * @param {object} user - данные пользователя (значение по умолчанию = {}).
 * @returns {Boolean}
 */
const haveCertificate = async (user = {}) => {
    try {
        const {certificate = []} = user;
        if(certificate.length) {
            return true;
        }
        return false;
    }catch(err) {
        //Обработка ошибки
    }
};

8. Создавайте код, способный обрабатывать непредсказуемые объекты null

const user = {
    name: 'Dafa',
    gender: 'Male',
    age: 23
};

// Использование логического оператора OR
const city = ((user.address || {}).city || 'city not yet defined');
// Использование опциональной цепочки 
const postalCode = user?.address?.postalCode || 'postal code not yet defined';
// Использование оператора слияния с нулевым значением (??)
const hobbies = user.hobbies ?? 'users have no hobbies';


console.info(`${user.name} \n\n${city}\n${postalCode}\n${hobbies}\n`)

//Значением по умолчанию пользовательских параметров является object {}
const haveCertificate = async (user = {}) => {
    try {
        //переменная certificate имеет значение по умолчанию []
        const {certificate = []} = user;
        if(certificate.length) {
            return true;
        }
        return false;
    }catch(err) {
        //Обработка ошибки
    }
};