Как исправить распространенные ошибки 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/ru/docs/Web/JavaScript/Reference/Errors

Резюме

Надеюсь вы узнали что-то новое для себя. И сможете определять причину ошибок в JavaScript и способ их исправления. Эти ошибки могут возникать в рабочих проектах и лучше заранее иметь представление о них.

Спасибо, что прочитали. Буду вам очень признателен если поделитесь этой статьей!

Опубликовано 21 апреля 2021 г.