Поиск по сайту:

Как устранить ошибки «ReferenceError», «SyntaxError» и «TypeError» в JavaScript

Введение

JavaScript — это язык программирования, используемый во фронтенд- и бэкенд-разработке. При работе с JavaScript расшифровка сообщений об ошибках может показаться немного сложной. Понимание того, на что ссылается сообщение об ошибке, важно при устранении неполадок в приложении. К счастью, современные браузеры поставляются со встроенными инструментами отладки, которые помогают в этом. Каждый браузер обрабатывает сообщения об ошибках по-разному, когда дело доходит до визуального представления. Тем не менее, сообщения об ошибках подскажут вам, что происходит с вашим кодом JavaScript.

В этом руководстве вы узнаете о трех распространенных типах ошибок JavaScript, которые появляются в среде браузера: ReferenceError, SyntaxError и TypeError. Чтобы продолжить, вы должны иметь представление о JavaScript и консоли разработчика.

Вы можете узнать больше о JavaScript из нашего учебника «Как использовать консоль разработчика JavaScript».

Следующие примеры не являются исчерпывающими и служат в качестве основы для распространенных сообщений об ошибках, с которыми вы можете столкнуться. Кроме того, сообщения об ошибках в примерах исходят от веб-браузера Chrome. Сообщения об ошибках, которые вы получаете от Firefox или Edge, могут содержать немного разные сообщения, но типы ошибок одинаковы.

Понимание типов ошибок JavaScript

Ошибки в JavaScript основаны на объекте Error. Это встроенный объект, заполненный информацией о типе возникшей ошибки, за которым следует сообщение с подробным описанием возможной причины. Например, вы можете столкнуться с ошибкой следующего содержания:

VM170:1 Uncaught ReferenceError: shark is not defined
    at <anonymous>:1:1

Если вы разберете это сообщение об ошибке, вы узнаете, что ReferenceError — это обнаруженный тип ошибки. После точки с запятой следует сообщение об ошибке, описывающее ошибку: акула не определена. В последней строке этого сообщения указано, где возникает ошибка в вашем коде 1:1.

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

Понимание ReferenceError

ReferenceError возникает, когда вы пытаетесь получить доступ к переменной, которую вы еще не создали. Это также происходит, когда вы вызываете переменную перед ее инициализацией.

Встреча с неопределенными переменными

Например, если вы неправильно написали имя переменной при выполнении console.log(), вы получите ReferenceError:

let sammy = 'A Shark dreaming of the cloud.';

console.log(sammmy);

Output
Uncaught ReferenceError: sammmy is not defined
    at <anonymous>:1:13

Переменная sammmy с тремя ms не существует и не определена. Чтобы исправить эту ошибку, вы можете обновить переменную до правильного написания и снова запустить команду. В случае успеха вы не получите сообщение об ошибке. В целом, проверка вашего кода на наличие орфографических ошибок может помочь предотвратить ошибки с неопределенными переменными.

Доступ к переменной до ее объявления

Точно так же вы можете столкнуться со следующей ошибкой, когда пытаетесь получить доступ к переменной до того, как она объявлена в вашем коде:

function sharkName() {
    console.log(shark);

    let shark = 'sammy';
}

Output
VM223:2 Uncaught ReferenceError: Cannot access 'shark' before initialization
    at sharkName (<anonymous>:2:17)
    at <anonymous>:1:1

В этом примере console.log(shark) выполняется до объявления переменной shark, что приводит к ошибке. В общем, рекомендуется сначала объявить свои переменные, прежде чем пытаться получить к ним доступ.

Примечание. Из-за того, как работают объявления let и const, они поднимаются, но недоступны в предыдущем примере. В подобных случаях переменные let и const входят в так называемую «временную мертвую зону». Чтобы избежать этого, объявите переменные let и const в начале области видимости.

Чтобы исправить пример кода, объявите переменную shark перед выполнением команды console.log():

function sharkName() {
    let shark = 'sammy';

    console.log(shark);
}

Ошибка ReferenceError часто связана с вашими переменными и областью видимости. Хотя это выходит за рамки данного руководства, вы можете узнать больше об области действия, различных типах переменных и подъеме в нашем руководстве «Понимание переменных, области действия и подъема в JavaScript».

Понимание синтаксической ошибки

Когда интерпретатор JavaScript просматривает ваш код, он может выдать SyntaxError, если наткнется на код, который не соответствует спецификациям языка. Если это произойдет, ваш код прекратит выполнение, и вы получите сообщение о вашем синтаксисе.

Отсутствует корпус кода

Например, когда вы пишете функцию и забыли круглую скобку ), чтобы заключить свой код, вы получите SyntaxError с очень конкретным сообщением о том, что вы отсутствуют:

function sammy(animal) {
    if(animal == 'shark'){
        return `I'm cool`;
    } else {
        return `You're cool`;
    }
}

sammy('shark';

Output
Uncaught SyntaxError: missing ) after argument list

К счастью, в сообщении об ошибке указывается недостающий элемент в коде. В этом примере в вызове функции sammy отсутствует закрывающая скобка ):

. . .

sammy('shark');

Эта ошибка также возникает при пропуске закрывающей фигурной скобки } в конце функции или скобки ] в массиве. Убедитесь, что вы правильно закрываете свои функции, массивы и объекты.

Объявление одинаковых имен переменных

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

function sammy(animal) {
    let animal = 'shark';
}

Output
VM132:2 Uncaught SyntaxError: Identifier 'animal' has already been declared

Чтобы исправить ошибку, обязательно создайте уникальные и специфические имена переменных в теле функции. Объявляя новое имя переменной, например, animalType, вы устраняете конфликт между параметром функции и переменной let внутри тела:

function sammy(animal) {
    let animalType = 'shark';
}

Если вы собираетесь изменить или использовать параметр в теле функции, не используйте объявление переменной с тем же именем переменной. Например, вы можете удалить объявление let в теле:

function sammy(animal) {
    animal = 'shark';
}

При работе с переменными внутри и снаружи тела функции убедитесь, что вы называете ее уникальным образом. При доступе к параметрам функции вы можете использовать их в теле функции без объявления переменной, например let.

Выявление неожиданных токенов

Подобно отсутствию скобки ] или фигурной скобки }, иногда вам может понадобиться небольшое, но важное дополнение к вашему коду. Например:

let sharkCount = 0;

function sammy() {
    sharkCount+;
    console.log(sharkCount);
}

Output
Uncaught SyntaxError: Unexpected token ';'

Дополнительным элементом в этом примере является знак плюса + после sharkCount внутри тела функции:

. . .
function sammy() {
    sharkCount++;
    console.log(sharkCount);
}

Если вы столкнулись с ошибкой SyntaxError: Unexpected token, дважды проверьте свой код на наличие отсутствующих или дополнительных операторов, таких как знак плюс (+).

Понимание ошибки типа

TypeError возникает, когда значение функции или переменной имеет непредвиденный тип. Вы можете узнать больше о различных типах данных JavaScript, ознакомившись с нашим учебником «Понимание типов данных в JavaScript».

Использование методов массива для объектов

Распространенной ошибкой является использование метода массива для перебора объекта. Например, вы не можете перебрать объект с помощью метода .map(), потому что это метод, специфичный для массива:

const sharks = {
    shark1: 'sammy',
    shark2: 'shelly',
    shark3: 'sheldon'
}

sharks.map((shark) => `Hello there ${shark}!`);

Output
Uncaught TypeError: sharks.map is not a function
    at <anonymous>:1:8

Одним из вариантов исправления предыдущего примера является использование цикла for...in, который работает для типа данных объекта, в объекте sharks для извлечения значений:

const sharks = {
    shark1: 'sammy',
    shark2: 'shelly',
    shark3: 'sheldon'
}

for (let key in sharks) {
    console.log(`Hello there ${sharks[key]}!`);
}

Кроме того, вы можете превратить объект sharks в массив, чтобы использовать метод .map():

const sharks = ['sammy', 'shelly', 'sheldon'];

sharks.map((shark) => `Hello there ${shark}!`);

Когда вы работаете с разными массивами и объектами, легко перепутать разные методы. Дважды проверьте, подходит ли ваш метод для типа данных, с которыми вы работаете.

Использование правильных методов деструктуризации

Аналогично, попытка перебора объекта с деструктурированием массива вызовет TypeError:

const shark = {
    name: 'sammy',
    age: 12,
    cloudPlatform: 'DigitalOcean'
}

const [name, age, cloudPlatform] = sharks;

Output
VM23:7 Uncaught TypeError: sharks is not iterable
    at <anonymous>:7:26

Один из способов решить эту проблему — использовать деструктурирование объекта для создания новых переменных на основе ключей объекта:

const shark = {
    name: 'sammy',
    age: 12,
    cloudPlatform: 'DigitalOcean'
}

const {name, age, cloudPlatform} = shark;

console.log(name);

Output
sammy

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

Заключение

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

Вы можете узнать больше о том, как использовать методы массива JavaScript, чтобы лучше понять, как применять эти методы.

Вы также можете узнать больше об отладке с помощью инструментов Chrome Dev в нашем руководстве по отладке JavaScript с помощью Google Chrome DevTools и Visual Studio Code.