Новий оператор JavaScript, що повністю змінює правила гри

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

Привіт, мене звати Євген Русаков, я працюю в Сільпо на позиції техліда, і я радий поділитися з вами деякими новими можливостями, які з’явилися в JavaScript. У цій статті ми розглянемо потужний новий оператор, який спрощує обробку помилок та зменшує вкладеність коду. Ви дізнаєтеся, як він допомагає зберегти «незмінність змінних» і робить ваш код більш зрозумілим та легким для читання.

Ось ще один варіант:

Новий оператор безпечного присвоєння дозволяє уникнути написання коду таким способом:

// ❌ До:
// ❌ Глибоке вкладення try-catch для обробки різних помилок
async function loadUserProfile() {
  try {
    const response = await fetch('https://api.example.com/user');
    try {
      const userProfile = await response.json();
      return userProfile;
    } catch (jsonError) {
      console.error(jsonError);
    }
  } catch (fetchError) {
    console.error(fetchError);
  }
}

Тепер ви можете писати код у такий спосіб:

✅ Після:

async function loadUserProfile() {
  const [error, result] ?= await fetch('https://api.example.com/user');
  if (error) return console.error(error);
  const [jsonError, profileData] ?= await result.json();
  if (jsonError) return console.error(jsonError);
  return profileData;
}

Завдяки усуненню глибокого вкладення, наш код став значно чистішим та простішим для читання.

Замість того, щоб мати справу з помилками у блоці catch, тепер ми можемо обробляти їх усього в один рядок. Це спрощує код, робить його більш читабельним та зручним для роботи, дозволяючи зосередитися на основній логіці без зайвих деталей.

async function fetchData() {
  const [err, data] ?= await func('https://api.sample.com/resource');
}

Також є можливість просто скіпнути помилку:

async function fetchData() {
  const [, data] ?= await func('https://api.sample.com/resource');
}

Або обробити його, якщо це потрібно, і продовжити рухатися далі:

async function fetchData() {
  const [err, data] ?= await func('https://api.sample.com/resource');
  if (err) {
    console.error(err);
  }
}

У разі необхідності, можна зупинитися:

async function fetchData() {
  const [err, data] ?= await func('https://api.sample.com/resource');
  if (err) return;
}

Це робить оператор таким потужним інструментом для створення гвардів:

function analyzeBooks() {
  const filePath = 'books.txt';
  
  // Використання синтаксису для обробки помилок при читанні файлу
  const [fileError, fileContent] ?= fs.readFileSync(filePath, 'utf-8'); 
  
  // Перевірка на помилки при читанні файлу
  if (fileError) {
    console.error('Failed to read the file:', fileError);
    return;
  }
  // Обробка JSON та перевірка на помилки
  const [parseError, jsonData] ?= JSON.parse(fileContent);
  if (parseError) {
    console.error('Error parsing JSON:', parseError);
    return;
  }
  // Підрахунок кількості книг
  const totalBooks = jsonData.books.length;
  console.log(`📚 Total books: ${totalBooks}`);
}

І ось одна з найкращих рис цього нового оператора.

Існує кілька випадків, коли нам потрібно значення, що залежить від наявності чи відсутності виключення.

Зазвичай ви використовуєте змінну, що змінюється, поза межами області видимості для безпомилкового доступу:

function saveTransactionData(transactions) {
  // Початковий стан
  let status = 'pending';
  try {
    // Запис транзакцій у файл
    fs.writeFileSync('transactions_log.txt', transactions);
    // Змінюємо стан на успіх
    status = 'success';
  } catch (error) {
    // Змінюємо стан на помилку
    status = 'error';
    console.error('Error saving transaction data:', error.message);
  }
  // Виводимо статус запису
  console.log(`Transaction save status: ${status}`);
}

Але це може бути дивним, особливо коли ви намагаєтеся мати незмінний код, а змінна вже була оголошена як const до того, як прийшов час додати try-catch.

Вам доведеться обгорнути його в try, потім видалити const, потім оголосити let поза блоком try, а потім знову переприсвоїти в блоці catch...

Але тепер із використанням ?= це виглядає так:

function saveTransactionData(transactions) {
  const [fileError] ?= fs.writeFileSync(
    'transactions_log.txt',
    transactions
  );
  
  const status = fileError ? 'error' : 'success'; 
  // робимо щось із status...
}

Ми зберігаємо нашу незмінність, і код тепер значно інтуїтивніший. Плюс до цього ми позбулися всіх вкладень

ℹ️ Поточні обмеження:

Наразі оператор безпечного присвоєння ?= все ще є пропозицією, яка обговорюється в рамках ECMAScript, і на момент написання статті не є частиною стандарту.

Назва оператора: Оператор ще не має чіткої назви, і це може викликати плутанину.

Блоки finally: Незважаючи на введення оператора ?=, блоки finally все ще залишаються важливими для завершення коду, і їх потрібно використовувати в традиційний спосіб.

Більше інформації можна знайти у репозиторії на GitHub.

Джерела:

Medium, Dev.to