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

1. Uncaught SyntaxError: неожиданный токен

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

Например, рассмотрим следующий код:

let message = "Welcome to my website! <-- string is not properly closed.
console.log(message)

Этот код приведет к ошибке Uncaught SyntaxError: Unexpected token, потому что строка не закрыта должным образом.

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

2. Uncaught ReferenceError: x не определен

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

Например, рассмотрим следующий код:

let userName = "John"
console.log(userNme) <--- misspelled

Этот код приведет к ошибке Uncaught ReferenceError: userNme is not defined, поскольку переменная userNme написана неправильно.

3. Uncaught TypeError: x не является функцией

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

Например, рассмотрим следующий код:

let myArray = [1, 2, 3]
myArray()

Этот код приведет к ошибке Uncaught TypeError: myArray is not a function, потому что myArray — это массив, а не функция.

Чтобы исправить эту ошибку, начните с проверки строки кода, вызывающей ошибку. Убедитесь, что вы правильно ссылаетесь на функцию и не пытаетесь вызвать свойство, которое не является функцией. В приведенном выше примере мы можем исправить ошибку, вызвав функцию, доступную для массивов, например forEach, map, filter, reduce etc.

4. Uncaught RangeError: превышен максимальный размер стека вызовов

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

Дополнительный совет 1. Используйте журнал консоли

Одним из самых полезных инструментов для отладки ошибок JavaScript является функция console.log. Добавляя операторы console.log в свой код, вы можете распечатать значения переменных и выражений, чтобы увидеть, что происходит в разных точках вашей программы. Это может быть особенно полезно для отслеживания причины ошибки.

Например, рассмотрим следующий код:

let x = 10
let y = 20
let z = x + y

console.log(z)

Добавив оператор console.log, мы можем видеть значение z во время выполнения, что может помочь нам понять, что происходит в нашем коде, и выявить любые потенциальные проблемы.

Дополнительный совет 2: расширения VS Code

Для Visual Studio Code (VS Code) доступно множество расширений, которые могут помочь в отладке кода JavaScript. Некоторые популярные расширения включают в себя:

  • Линза ошибок: улучшенное выделение ошибок, предупреждений и других языковых средств диагностики.

https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

  • Фрагменты кода JavaScript (ES6): это расширение предоставляет фрагменты для часто используемых шаблонов кода JavaScript, таких как циклы for и операторы if, которые могут сэкономить время и снизить риск ошибок.

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

  • ESLint. Это расширение проверяет ваш код на наличие синтаксических и стилевых ошибок и предлагает способы устранения обнаруженных проблем.

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Заключение

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