Понимание распространенных ошибок JavaScript: решения для улучшения сценариев

Распространенные ошибки JavaScript

Понимание распространенных ошибок JavaScript: решения для улучшения сценариев

Погрузитесь в мир самых распространенных ошибок JavaScript и раскройте их тайны.

Здравствуйте, разработчики 👋,
JavaScript — один из самых популярных языков программирования в веб-разработке.

Мощный и универсальный язык, который позволяет разработчикам создавать динамические и интерактивные веб-сайты. Однако, как и все языки программирования, JavaScript не без проблем.

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

1️⃣ SyntaxError: Unexpected Token
«SyntaxError: Unexpected Token» — это распространенная ошибка, возникающая, когда механизм JavaScript обнаруживает непредвиденный токен или токен, который недействителен в контексте, в котором он встречается. .

Например:

let message = "Hello World';

Решение:
В этом примере ошибка возникает из-за использования одинарной кавычки для открытия строки и обратной галочки для ее закрытия. Чтобы исправить это, мы должны использовать один и тот же тип кавычек для открытия и закрытия строки:

let message = 'Hello World';

2️⃣ TypeError: неопределенное или нулевое значение
«TypeError» возникает, когда переменная или свойство используется для объекта, который является нулем или не определен.

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

Например:

let name = null;
console.log(name.length);

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

let name = "John Doe";
console.log(name.length);

3️⃣ ReferenceError: переменная не определена
«Ошибка ссылки» возникает, когда мы пытаемся получить доступ к переменной, которая не была объявлена ​​или находится вне области действия.

Например:

function printMessage() {
  console.log(message);
}

printMessage();

Решение:
Чтобы исправить эту ошибку, объявите переменную в соответствующей области видимости или передайте ее в качестве параметра функции:

function printMessage() {
  let message = "Hello from the function!";
  console.log(message);
}

printMessage();
function printMessage(message) {
  console.log(message);
}

let message = "Hello from the function!";
printMessage(message);

4️⃣ RangeError: превышен максимальный размер стека вызовов
Когда функция многократно вызывает сама себя без условия выхода, она выдает ошибку «RangeError: превышен максимальный размер стека вызовов». Это приводит к бесконечному циклу кода.

Например:

function countdown(num) {
  if (num === 0) return;
  console.log(num);
  countdown(num - 1);
}
countdown(5);

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

function countdown(num) {
  if (num === 0) return;
  console.log(num);
  countdown(num - 1);
}
countdown(5);

5️⃣ Ошибка типа — функция не является функцией
«Ошибка типа: функция не является функцией» возникает, когда вы пытаетесь вызвать функцию, но переменная, содержащая ссылку на функцию, на самом деле не является функцией .

Например:

let result = "Hello";
result();

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

let result = () => {
  console.log("Hello");
};
result();

6️⃣ Ошибка типа — не удается прочитать свойство неопределенного
Ошибка «Ошибка типа: невозможно прочитать свойство «имя_свойства» неопределенного» возникает, когда вы пытаетесь получить доступ к неопределенному или нулевому свойству или пустому объекту объекта.

Например:

let person = null;
console.log(person.name);

Решение.
Чтобы устранить эту ошибку, убедитесь, что объект определен и имеет свойство, к которому вы пытаетесь получить доступ:

let person = { name: "John Doe" };
console.log(person.name);

7️⃣ SyntaxError — неожиданный конец ввода
«SyntaxError: неожиданный конец ввода» возникает, когда движок JavaScript достигает конца файла, блока или функции, но не находит ожидаемую закрывающую скобку.

Например:

function sayHello() {
  console.log("Hello, world!"

Решения.
Чтобы исправить эту ошибку, добавьте недостающую закрывающую скобку в функцию или блок:

function sayHello() {
  console.log("Hello, world!");
}

8️⃣ Ошибка типа — невозможно преобразовать неопределенное или пустое значение в объект
Когда мы пытаемся получить доступ к свойствам или методам для неопределенных или нулевых значений, возникает ошибка «Ошибка типа: невозможно преобразовать неопределенное или пустое значение в объект».

Например:

let data = undefined;
console.log(data.property);

Решение.
Перед доступом к свойствам или методам объекта убедитесь, что переменная действительно содержит объект, чтобы избежать этой ошибки:

let data = {};
console.log(data.property); // Assuming "property" is a valid property of the data object

9️⃣ ReferenceError — неправильное использование ключевого слова «this»
Когда мы пытаемся получить доступ к ключевому слову «this» вне контекста объекта, вы получаете ошибку «ReferenceError: это не определено».

Например:

function logMessage() {
  console.log(this.message);
}

logMessage();

Решение:
Чтобы устранить эту ошибку, убедитесь, что ключевое слово this используется в контексте объекта, чтобы устранить эту проблему:

let myObj = {
  message: "Hello, this is my object.",
  logMessage: function() {
    console.log(this.message);
  },
};

myObj.logMessage();

Заключение

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

Выявляя и решая такие проблемы, как SyntaxError, TypeError, ReferenceError, RangeError и отсутствующие квадратные или круглые скобки, мы можем значительно улучшить ваши навыки программирования и создавать более мощные приложения.

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

Удачного кодирования! 💻

Спасибо за прочтение 🙏😇

Свяжись со мной 👇

Дополнительные материалы на PlainEnglish.io.

Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .