Як виправити поширені помилки JavaScript

Помилки в JavaScript досить складно відстежувати і виправляти. У кожної помилки є своя назва. Це допомагає з визначенням проблеми та її виправленням. Необроблені помилки відображаються у веб-консолі браузера або виводі Node.js додатка. Розглянемо типи поширених помилок у JavaScript, причини виникнення та як їх виправити. За кожним типом показано приклади, щоб покращити ваше розуміння помилки та дій для виправлення.

Немає єдиного стандарту іменувань помилок у різних браузерах. Для статті взято імена помилок із браузера Google Chrome.

TypeError: Cannot read property “x” of “y”

Ця помилка виникає, коли ми викликаємо метод або читаємо властивість на значеннях undefined або null.

У браузері Safari ці помилки названі по-іншому:

• ‘undefined’ is not an object
• ‘null’ is not an object

У браузері Mozilla Firefox:

• TypeError: "x" is undefined
• TypeError: "x" is null

Приклади помилок

• Виклик функції на undefined:

let foo;
foo.read(); // TypeError: Cannot read property 'read' of undefined

• Читання властивості на null:

foo = null;
foo.total; // TypeError: Cannot read property 'total of null

Виправлення помилки

Є кілька варіантів виправлення залежно від контексту проблеми.

• Задати значення змінній або властивості об'єкта перед його використанням.

let foo = {
  total: 5
};

let total = foo.total; // 5

• Перевіряти, що змінна визначена, перед її використанням.

if (typeof foo !== 'undefined' && typeof foo.total !== 'undefined') {
  let total = foo.total;
}

TypeError: “x” is not a function

Помилка відбувається, коли ми намагаємося викликати невизначену функцію.

Приклади помилок

Є кілька варіантів виправлення залежно від причин помилки:

• Функція не визначена.

let x = {};

x.read(); // TypeError: x.read is not a function

У цьому прикладі визначимо функцію read().

let x = {
    read: function() {
        return 2;
    }
};

x.read(); // 2

• У місці виклику або оголошенні функції є помилка в імені функції.

let a = {
  sam: function(a, b) {
    return a + b;
  }
}

a.sum(1, 1); // TypeError: a.sum is not a function

Після виправлення помилки в імені функції sum().

let a = {
  sum: function(a, b) {
    return a + b;
  }
}

a.sum(1, 1); // 2

TypeError: Cannot set property “x” of undefined

Ця помилка виникає, коли ми намагаємося записати у властивість undefined значення.

let test;

test.value = 0; // Uncaught TypeError: Cannot set property 'value' of undefined

Рішенням у цьому прикладі буде ініціалізація змінної test новим об'єктом так:

let test = {};

test.value = 0;

Або ось так:

let test = {
  value: 0
};

ReferenceError: “x” is not defined

Ця помилка виникає в кількох випадках.

Змінна не оголошена

text.trim(); // Uncaught ReferenceError: text is not defined

Змінна text не оголошена. Для використання строкового методу trim() змінну text потрібно оголосити та ініціалізувати строкою.

let text = " Test ";

text.trim(); // "Test"

Немає доступу до змінної в поточній області видимості

function test() {
  let a = 0;
}

console.log(a); // Uncaught ReferenceError: a is not defined

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

let a = 0;

function test() {
  a = 1;
}

console.log(a); // 0
test();
console.log(a); // 1

RangeError: Maximum call stack size exceeded

Ця помилка виникає в разі виклику нескінченної рекурсивної функції. Така функція не має виходу з неї або він не застосовується.

function countDown(fromNumber) {
    console.log(fromNumber);

    countDown(fromNumber - 1); // RangeError: Maximum call stack size exceeded
}

countDown(10);

Щоб виправити цю помилку в рекурсивну функцію countDown() нам потрібно додати умову для виходу з рекурсії.

function countDown(fromNumber) {
    console.log(fromNumber);

    let nextNumber = fromNumber - 1;

    if (nextNumber > 0) {
        countDown(nextNumber);
    }
}

countDown(10);

RangeError: precision is out of range

Помилка відбувається коли число, що виходить за межі допустимого діапазону, було передано до функцій toExponential(), toFixed(), або toPrecision().

let num = 4.777777;
num.toExponential(-2); // RangeError: toExponential() argument must be between 0 and 100

num = 4.8888;
num.toFixed(105);  // RangeError: toFixed() digits argument must be between 0 and 100

num = 4.1234;
num.toPrecision(0);  // RangeError: toPrecision() argument must be between 1 and 100

Щоб виправити, будемо використовувати допустимі значення.

let num = 4.777777;
num.toExponential(4); // 2.5556e+0

num = 4.8888;
num.toFixed(2); // 3.00

num = 4.1234;
num.toPrecision(1); // 4

RangeError: invalid array length

Ця помилка виникає, якщо ми задаємо масиву неприпустимий розмір: від'ємний або більший за 2³².

new Array(-10); // RangeError: Invalid array length

let a = [];
a.length = a.length - 5; // RangeError: Invalid array length

Для вирішення цієї помилки нам потрібно використовувати допустиму довжину масиву.

new Array(10); // [empty × 10]

Корисні посилання

JavaScript посилання на помилки

Нижче ви знайдете список помилок, які повертає JavaScript. Ці помилки можуть бути корисними під час налагодження, але неполадки не завжди відразу зрозумілі. Сторінки нижче пропонують додаткову інформацію про ці помилки. Кожна помилка це Об'єкт на підставі Error object, і має ім'я (name) та повідомлення (message).

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors

Резюме

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

Дякую, що прочитали. Буду вам дуже вдячний, якщо поділитесь цією статтею!

Опубліковано 21 квітня 2021 р.