Ошибки и отладка (Debugging)

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

🧘 Ошибки — это нормально

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

На самом деле ошибки — это помощники. JavaScript не просто говорит «что-то не так» — он точно указывает, что именно пошло не так и где. Сообщение об ошибке — это не приговор, это подсказка.

Даже у Линуса Торвальдса (создатель Linux), у команды Google, у разработчиков вашего браузера — у всех бывают баги. Это часть профессии. Разница между новичком и профи — не в отсутствии ошибок, а в скорости их нахождения и исправления.

🗂️ Три главных типа ошибок JavaScript

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

// SyntaxError: Missing ) after argument list
console.log("Привет"    // забыли закрывающую скобку

// SyntaxError: Unexpected token
let x = ;               // нет значения после =

// SyntaxError: Unexpected end of input
function foo() {        // не закрыли фигурную скобку
  return 42;

// ReferenceError: userName is not defined
console.log(userName);  // переменная не объявлена!

// Частая причина — опечатка в имени:
let username = "Иван";
console.log(userName);  // u и U — разные! ReferenceError

// Использование переменной вне её области видимости:
function foo() {
  let secret = 42;
}
console.log(secret);  // ReferenceError — secret живёт только внутри foo

// TypeError: Cannot read properties of undefined (reading 'name')
let user = undefined;
console.log(user.name);   // нельзя читать свойство у undefined!

// TypeError: null is not iterable
let list = null;
for (let item of list) {} // нельзя итерировать null

// TypeError: sayHello is not a function
let sayHello = "Привет";
sayHello();               // строка — не функция!

// TypeError: Assignment to constant variable.
const PI = 3.14;
PI = 3;                   // нельзя изменить const

🔎 Как читать сообщение об ошибке

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

🖥️ Инструменты отладки: console

Объект console — ваш главный инструмент отладки. Это как разговор с программой: вы просите её рассказать, что в ней происходит.

let x = 42;
let name = "Иван";
let arr = [1, 2, 3];

console.log(x);              // 42
console.log("x =", x);      // x = 42 (удобно — видно имя)
console.log(name, x);       // Иван 42
console.log("массив:", arr); // массив: [1, 2, 3]

// Лайфхак — вывести переменную с именем через объект:
console.log({ x, name });   // {x: 42, name: "Иван"}

console.error("Что-то пошло не так!");   // красная надпись в консоли
console.warn("Это устаревший метод");    // оранжевая надпись

// Пример использования:
function divide(a, b) {
  if (b === 0) {
    console.error("Ошибка: деление на ноль!");
    return null;
  }
  return a / b;
}

const users = [
  { name: "Иван", age: 25 },
  { name: "Мария", age: 30 },
  { name: "Алекс", age: 22 },
];

console.table(users);
// Выведет аккуратную таблицу с колонками name и age

console.time("мой таймер");
// ... какой-то код ...
for (let i = 0; i < 1000000; i++) {}
console.timeEnd("мой таймер");
// мой таймер: 2.345ms

🕵️ Стратегия отладки: как искать баги

Когда программа работает не так, как ожидается — есть проверенный алгоритм поиска проблемы:

// Пример отладки с console.log:

function calculateTotal(items) {
  console.log("items:", items);  // проверяем что пришло

  let total = 0;
  for (let item of items) {
    console.log("item:", item);           // смотрим каждый элемент
    console.log("item.price:", item.price); // проверяем конкретное свойство
    total += item.price;
  }

  console.log("total:", total);  // итоговое значение
  return total;
}

// Если items вдруг null — TypeError появится на for..of
// Но перед этим console.log("items:", null) нам подскажет проблему!

💡 Практические советы начинающему

✅ Итоги урока

• Ошибки — нормальная часть программирования. Не бояться, а уметь читать и исправлять
• SyntaxError — нарушение синтаксиса (забытые скобки, кавычки, знаки)
• ReferenceError — обращение к несуществующей переменной или функции
• TypeError — операция над данными неправильного типа (самая частая ошибка)
• Сообщение об ошибке содержит: тип, описание и ссылку на файл/строку — читайте его полностью
• console.log() — вывести значение в консоль. Главный инструмент отладки
• console.error() / console.warn() — красные и оранжевые сообщения
• console.table() — вывести массив/объект таблицей
• Стратегия: прочитать ошибку → найти строку → добавить console.log → сузить проблему → погуглить