JavaScript Quick Tip: именованные функции для разумной отладки

Отладка – это не то, о чем вы думаете во время написания вашего кода, но это может драматически спасти вас от разочарования позже.

Один простой способ сделать это – использовать именованные функции по анонимным функциям. Если вы незнакомы, посмотрите на следующий блок кода:

// These two are anonymous functions
function() {}
() => {}

// These two are named functions
function doSomething() {}
const doSomething = () => {}

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

function Page() {
  window.addEventListener('load', function() {
    console.log('Page loaded!');
    Page.init();
  });
}

function App() {
  Page();
}

App();

Обратите внимание на ошибку в коде? Когда вы попытаетесь запустить его, вы получите следующее в консоли инструментов разработчика.

index.js:4 Uncaught TypeError: Page.init is not a function
    at index.js:4

(anonymous)   @ index.js:4
load (async)
Page          @ index.js:2
App           @ index.js:9

Это расширенное консольное сообщение и известно как стек трассировка Анкет Вы видите наши названные функции, такие как Страница и Приложение ? Как насчет функции обработчика событий от window.addeventListener ? Фу О, это “анонимный”. Представьте себе, если бы было несколько анонимных функций, вызывающих другие анонимные функции. Это не станет полезным трассировкой стека для отладки.

Давайте исправим это, добавив имя PageLoadhandler к нашей функции.

function Page() {
  window.addEventListener('load', function pageLoadHandler() {
    console.log('Page loaded!');
    Page.init();
  });
}

function App() {
  Page();
}

App();

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

Uncaught TypeError: Page.init is not a function
    at pageLoadHandler (index.js:4)

pageLoadHandler @ index.js:4
load (async)
Page            @ index.js:2
App             @ index.js:9

Теперь сообщение об ошибке полезно даже без расширенного трассировки стека, потому что мы видим, что оно происходит непосредственно из PageLoadhandler . Если бы мы назвали другую функцию отсюда, трассировка стека больше не показывала бы просто (анонимный) Анкет

Вы все равно можете создавать анонимные функции при выполнении простых обратных вызовов для массива, таких как .карта () или .filter () и до тех пор, пока у родительских функций есть имя, я не вижу проблемы с этим. Осознание того, как анонимные функции влияют на The Stack Trace, поможет вам впоследствии принимать эти решения для опыта отладки в здравом разумном.

Примечание : Эта статья была первоначально написана для Мой личный блог . Я переиздаю это здесь для удивительного сообщества разработчиков.

Оригинал: “https://dev.to/sunnysingh/javascript-quick-tip-named-functions-for-sane-debugging-35am”