5 поширених причин помилок JavaScript (і як їх уникнути)

Автор

Поширені помилки в JavaScript та як їх уникнути

JavaScript (JS) – це універсальна, динамічна і широко розповсюджена мова програмування. Проте вона не застрахована від помилок, які можуть викликати розчарування у розробників.

JS є основою інтерактивності на стороні клієнта для більшості веб-застосунків. Без JavaScript інтернет був би статичним і нудним. З іншого боку, специфіка мови іноді викликає у розробників суперечливі почуття.

Помилки JavaScript можуть призводити до непередбачуваних результатів та негативно впливати на взаємодію користувача. Дослідження, проведене Університетом Британської Колумбії (UBC), намагалося виявити головні причини та наслідки цих помилок. Результати виявили деякі закономірності, що погіршують продуктивність JS програм.

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

У цій статті ми розглянемо типові причини помилок JavaScript, виявлені в дослідженні (а також ті, з якими ми стикаємося щодня), і обговоримо, як зробити ваші програми стійкішими до збоїв.

Помилки, пов’язані з DOM

Об’єктна модель документа (DOM) відіграє ключову роль у інтерактивності веб-сайтів. DOM дозволяє маніпулювати контентом, стилем та структурою веб-сторінки. JavaScript був створений саме для того, щоб перетворити звичайні HTML-сторінки на інтерактивні та керувати DOM.

Навіть із появою серверних технологій JavaScript, таких як Node.js, робота з DOM залишається важливою частиною використання мови. Саме DOM часто стає причиною помилок у JavaScript програмах.

Не дивно, що дослідження виявило, що проблеми, пов’язані з DOM, є головною причиною помилок, складаючи 68% від їх загальної кількості.

Наприклад, деякі JavaScript програмісти помилково посилаються на DOM-елемент до його завантаження, що призводить до помилок коду.

    <!DOCTYPE html>
    <html>
    <body>
            <script>        
      document.getElementById("container").innerHTML = "Поширені помилки JS";
        </script>
        <div id="container"></div>
        </body>
    </html>

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

Ця помилка виникає, тому що JavaScript-код виконується в порядку його появи в документі. Таким чином, браузер ще не знає про елемент <div>, на який посилається код.

Існує декілька способів вирішення цієї проблеми. Найпростіший – розмістити <div id=”container”></div> перед тегом <script>. Також можна використовувати JavaScript бібліотеку, як-от jQuery, щоб переконатися, що DOM завантажується перед доступом до нього.

    <!DOCTYPE html>
    <html>
    <body>
          <div id="container"></div>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script>        
        document.getElementById("container").innerHTML = "Поширені помилки JS";
      </script>    
    </body>
    </html>

Синтаксичні помилки

Синтаксичні помилки виникають, коли JavaScript інтерпретатор не може виконати код через неправильний синтаксис. Якщо інтерпретатор виявляє невідповідність стандартному синтаксису мови, він генерує помилку. Згідно з дослідженням, такі помилки становлять 12% від усіх помилок у JavaScript.

Найчастішими причинами синтаксичних помилок є пропущені або невідповідні дужки.

Наприклад, при використанні умовних операторів можна випадково пропустити дужки, що призведе до синтаксичної помилки.

Розглянемо приклад:

    if((x > y) && (y < 77) {
        // код тут
    }

У наведеному умовному операторі пропущена остання закриваюча дужка. Ви помітили цю помилку?

Давайте її виправимо:

    if ((x > y) && (y < 77)) {
        // код тут
    }

Щоб уникнути таких помилок, важливо приділити час вивченню правил синтаксису JavaScript. Практикуючи кодування, можна легко виявляти та уникати синтаксичних помилок.

Неправильне використання невизначених/нульових ключових слів

Деякі розробники JavaScript не розуміють, як правильно використовувати ключові слова `undefined` та `null`. Згідно з дослідженням, неправильне використання цих ключових слів є причиною 5% усіх помилок JavaScript.

Ключове слово `null` є значенням присвоєння, яке зазвичай використовується для змінної, щоб показати відсутність значення. Цікаво, що `null` також є об’єктом JavaScript.

Ось приклад:

    var codeJS = null;

    console.log(codeJS);
          //виведе: null

    console.log(typeof codeJS);
         //виведе: object

`undefined`, з іншого боку, показує, що змінна або властивість була оголошена, але не має присвоєного значення. Також може означати, що нічого не було оголошено. `undefined` – це окремий тип.

Приклад:

    var codeJS;

    console.log(codeJS);
          //виведе: undefined

    console.log(typeof codeJS);
         //виведе: undefined

Цікаво, що якщо використовувати оператори рівності `==` та ідентичності `===` для порівняння `null` і `undefined`, останній не вважатиме їх рівними.

    console.log(null==undefined);
    //виведе: true

    console.log(null===undefined);
    //виведе: false

Отже, розуміння правильного використання `null` та `undefined` допоможе уникнути помилок у ваших JavaScript програмах.

Невизначені методи

Ще одна поширена причина помилок JavaScript – це виклик методу без його попереднього визначення. Дослідники UBC виявили, що ця помилка є причиною 4% усіх помилок JavaScript.

Ось приклад:

    var coder = {
          name: "Петро",
          age: 27,
          speak() {
          console.log(this.name);
      }
    };
    coder.speakNow();

Помилка, що з’являється в консолі розробника Chrome:

Ця помилка виникає, оскільки функція `speakNow()` не була визначена в коді JavaScript.

Неправильне використання оператора return

В JavaScript оператор `return` використовується для зупинки виконання функції та виведення її значення. Помилкове використання `return` може погіршити продуктивність програм. Згідно з дослідженням, неправильне використання `return` спричиняє 2% усіх помилок у JavaScript програмах.

Наприклад, деякі програмісти JavaScript часто роблять помилку, розриваючи оператор `return`.

Хоча можна розділити інструкцію JavaScript на два рядки, розрив інструкції `return` призведе до збою у вашій програмі.

Ось приклад:

    function number(n) {
        var add = 5;
        return;
        n + add;
         }
    console.log(number(10));

Виконання цього коду виведе помилку `undefined` в консолі розробника Chrome:

Тому слід уникати розриву операторів `return` у вашому JavaScript коді.

Висновок

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

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

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

Бажаємо вам успішного програмування на JavaScript без помилок!

Статтю написав Альфрік Опіді.