Відлагодження іменованих та анонімних функцій у JavaScript: детальний погляд на стек-траси

Відлагодження JavaScript може часто виглядати як спроба розплутати клубок стек-трас і загадкових повідомлень про помилки. Добре організована кодова база з осмисленими назвами функцій та чіткими практиками відлагодження може значно полегшити цей процес.

Відлагодження JavaScript часто нагадує спробу розплутати клубок стек-трас і незрозумілих повідомлень про помилки. Однак є один часто недооцінюваний аспект відлагодження, який може заощадити вам години розчарувань: розуміння того, як назви функцій (або їх відсутність) впливають на стек-траси помилок.

Давайте розглянемо практичний приклад, який демонструє, як писати читабельний та відлагоджуваний код JavaScript, з акцентом на різницю між іменованими та анонімними функціями в стек-трасах.

Код

Ось фрагмент коду, що показує різні стилі функцій і те, як вони поводяться у стек-трасах помилок:

// Приклад іменованої функції  
function addTwoNumbersNamed(x, y) {  
 console.log("В середині іменованої функції: addTwoNumbersNamed");   
 throw new Error("Помилка в іменованій функції: addTwoNumbersNamed");  
 return x + y;  
}  

// Анонімна функція, присвоєна змінній  
const addTwoNumbersAnonymous = function (x, y) {  
 console.log("В середині анонімної функції: addTwoNumbersAnonymous");   
 throw new Error("Помилка в анонімній функції: addTwoNumbersAnonymous");  
 return x + y;  
};  

// Стрілочна функція  
const addTwoNumbersArrow = (x, y) => {  
 console.log("В середині стрілочної функції: addTwoNumbersArrow");   
 throw new Error("Помилка в стрілочній функції: addTwoNumbersArrow");  
 return x + y;  
};  

// Анонімна функція в колбеку (наприклад, setTimeout)  
setTimeout(function () {  
 console.log("В середині анонімної функції в setTimeout");   
 throw new Error("Помилка в колбек-функції setTimeout");  
}, 1000);  

// Симулюємо помилки для тестування стек-трас  
function simulateError(func) {  
 try {  
 console.log("Симулюємо помилку для наданої функції...");  
 console.log(func(10, 5)); // Викликаємо функцію і виводимо результат  
 } catch (error) {  
 console.error("Зловлена помилка:");  
 // Це виведе стек-трасу з назвами функцій  
 console.error(error.stack);   
 }  
}  

// Викликаємо simulateError з різними типами функцій  
// simulateError(addTwoNumbersNamed); // Іменована функція  
// simulateError(addTwoNumbersAnonymous); // Анонімна функція  
// simulateError(addTwoNumbersArrow); // Стрілочна функція  

simulateError(function (x, y) {  
 console.log("В середині вбудованої анонімної функції, переданої в simulateError");  
 throw new Error("Помилка у вбудованій анонімній функції");  
 return x / 0;  
});

Іменовані vs Анонімні функції: У чому різниця у стек-трасах?

Іменовані функції

• Коли помилка трапляється в середині іменованої функції, її назва з’являється в стек-трасі.
• Це полегшує визначення того, де сталася помилка.

Приклад стек-траси:

Error: Помилка в іменованій функції: addTwoNumbersNamed  
 at addTwoNumbersNamed (:3:11)  
 at simulateError (:20:13)  
 at :32:1

Основна думка: Іменовані функції забезпечують чіткий контекст в стек-трасі, вказуючи точну функцію, де сталася помилка.

Анонімні функції, присвоєні змінним

• Коли анонімна функція присвоєна змінній (наприклад, const addTwoNumbersAnonymous), в стек-трасі буде використано ім’я змінної як назву функції.
• Це все одно корисно, адже дає певну підказку про призначення функції.

Приклад стек-траси:

Error: Помилка в анонімній функції: addTwoNumbersAnonymous  
 at addTwoNumbersAnonymous (:9:11)  
 at simulateError (:20:13)  
 at :32:1

Основна думка: Присвоєння анонімних функцій змінним забезпечує кращу відстежуваність в стек-трасах.

Чисті анонімні функції

• Якщо анонімна функція не присвоєна змінній (наприклад, інлайн-функції або колбеки), в стек-трасі не буде корисної назви функції.
• Натомість, траса може просто вказувати ``, що ускладнює знаходження точного джерела помилки.

Приклад стек-траси:

Error: Помилка в інлайн анонімній функції  
 at  (:29:11)  
 at simulateError (:20:13)  
 at :32:1

Основна думка: Чисті анонімні функції не надають **жодного контексту** в стек-трасі, що ускладнює відлагодження.

## Чому ці зміни важливі

## Легкість відлагодження

**Іменовані функції в стек-трасах**:

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

Приклад: `at addTwoNumbersNamed (:3:11)`.

**Анонімні функції та відстежуваність**:

- Коли анонімні функції присвоюються змінним, в стек-трасі використовується ім’я змінної.
Це краще, ніж `` але все ж менш чітко, ніж іменовані функції.

## Чисті анонімні функції:

- Функції, які не мають імені і не присвоєні змінним, призводять до неоднозначних стек-трас з записами ``. Це ускладнює відлагодження.

## Читабельність

- Організація коду з використанням змістовних імен і ранніми повідомленнями в консолі полегшує розуміння ходу виконання для розробників.

## Підтримуваність

- Чіткі імена функцій і явні повідомлення про помилки знижують неоднозначність і полегшують повернення до коду через кілька місяців (або для нових членів команди).

## Коли використовувати цей підхід

**Відлагодження складних систем**:

- В асинхронних операціях, зворотних викликах або розподілених системах чіткі стек-траси є необхідністю.

**Огляди коду**:

Явні імена функцій та логи допомагають рецензентам швидко зрозуміти намір коду.

**Великі команди**:

- Узгодженість у іменуванні функцій і обробці помилок забезпечує ефективне відлагодження для всіх.

## Висновок

Відлагодження JavaScript — це не лише виправлення помилок, а й проектування вашого коду для **підготовки до помилок**. Називаючи функції змістовно, присвоюючи анонімні функції змінним і додаючи ранні логи, ви можете перетворити відлагодження з неприємної справи на гладкий процес.

## Основні висновки:

1. Завжди використовуйте **іменовані функції**, де це можливо.
2. Якщо ви використовуєте анонімні функції, присвоюйте їх змінним для покращення читабельності стек-трас.
3. Уникайте чистих анонімних функцій, якщо це не є абсолютно необхідним.

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

**Є поради чи хитрощі для відлагодження JavaScript? Поділіться ними в коментарях нижче! 🚀**



Перекладено з: [Debugging Named and Anonymous Functions in JavaScript: A Closer Look at Stack Traces](https://aditya003-ay.medium.com/debugging-named-and-anonymous-functions-in-javascript-a-closer-look-at-stack-traces-188a96e2606b)