Почему получается NaN в JavaScript — 3 причины и как найти, откуда он взялся

На странице товара вместо цены написано NaN ₽. Или средний рейтинг кафе — NaN. Или итог корзины, который только что был нормальным, вдруг превратился в три загадочные буквы.

NaN значит Not a Number — «не число». И тут первая странность: typeof NaN в JavaScript отвечает "number". Это число, которое говорит, что оно не число. Вторая странность ещё хуже: NaN === NaN — это false. Он не равен даже самому себе.

Разберём, откуда он берётся и как его поймать.

Почему NaN так трудно выследить

У NaN есть неприятное свойство: он заразный. Любая арифметика с ним тоже даёт NaN.

const price = NaN
price * 2        // NaN
price + 100      // NaN
Math.round(price) // NaN

Поэтому NaN всплывает не там, где родился. Ошибка случилась в одной строчке, а видишь ты её через пять шагов — в итоговой сумме. Ни красной ошибки в консоли, ни падения. Программа спокойно считает дальше, просто всё теперь NaN.

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

Причина 1. В расчёт попало undefined (самая частая)

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

const item = { price: 500, qty: 2 }
item.price * item.quantity   // NaN — поля quantity нет, там undefined

undefined плюс число — это NaN. Чаще всего так бывает, когда:

• в имени поля опечатка (quantity вместо qty) — у объекта такого поля нет;
• сервер прислал ответ другой формы, чем ждал код;
• данные ещё не загрузились, а расчёт уже запустился.

Как проверить. Перед подозрительной строчкой выведи каждую часть отдельно:

console.log("price:", item.price, "qty:", item.quantity)

Где увидишь undefined — там и корень.

Как починить. Исправь имя поля или подставь запасное значение: item.qty ?? 0. Разница между undefined и настоящей пустотой разобрана в статье что такое null.

Причина 2. Текст, который не читается как число

Значение пришло строкой, и перевести его не вышло.

Number("1 200")   // NaN — пробел
Number("12px")    // NaN — буквы
Number("3,5")     // NaN — запятая

Это классика форм и таблиц: люди пишут «1 200 ₽» и «3,5», а код ждёт чистое 1200 и 3.5.

Как проверить. Выведи значение вместе с типом: console.log(typeof value, JSON.stringify(value)). JSON.stringify покажет кавычки и спрятанные пробелы.

Как починить. Почисти строку перед переводом: убери пробелы, замени запятую на точку, пустую строку обработай отдельно. Пошаговый рецепт — в статье как превратить строку в число.

Причина 3. Ноль разделили на ноль

Самая коварная, потому что код выглядит идеально.

function average(ratings) {
  const sum = ratings.reduce((a, b) => a + b, 0)
  return sum / ratings.length
}

average([])   // 0 / 0 = NaN

Пока отзывов нет, сумма — ноль, количество — ноль. А 0 / 0 в JavaScript — это NaN. У нового кафе без отзывов рейтинг показывает «NaN».

Как проверить. Если NaN появляется только у «новых» или «пустых» записей — это почти наверняка деление на пустой список.

Как починить. Проверяй длину до деления:

if (ratings.length === 0) return null   // «пока нет оценок»

А на экране вместо числа покажи честное «Пока нет отзывов».

Как правильно проверять на NaN

Раз NaN не равен сам себе, проверка if (value === NaN) никогда не сработает. ИИ иногда пишет именно так — и проверка молча ничего не ловит.

Правильно:

Number.isNaN(value)   // true только для настоящего NaN

Есть и старый isNaN(value) без Number. — но он сначала пытается перевести значение в число. Поэтому isNaN("привет") даёт true, хотя это строка. Number.isNaN честнее.

Если не получается найти источник самому, скопируй функцию и попроси ИИ: «найди, где в этом расчёте может появиться NaN — проверь undefined, строки и деление на ноль». Больше приёмов — в статье как отлаживать код с ИИ.

Быстрый чеклист

• Выведи в консоль каждую часть расчёта, а не только результат.
• Ищи undefined — опечатки в именах полей и незагруженные данные.
• Проверь тип: строка или число.
• Посмотри, не делишь ли на длину пустого списка.
• Проверяй результат через Number.isNaN, а не через === NaN.

NaN — это ошибка в коде?

Не всегда. Это сигнал, что в математику попало что-то нечисловое. Сам JavaScript не падает, поэтому NaN легко пропустить — ловить его нужно проверкой.

Почему null + 1 даёт 1, а undefined + 1 даёт NaN?

JavaScript переводит null в ноль, а undefined — в NaN. Поэтому пустое значение из базы иногда молча становится нулём. Это отдельный тихий баг, за ним тоже стоит следить.

Как не показывать пользователю «NaN ₽»?

Проверяй число перед выводом и показывай понятную замену: «цена уточняется» или прочерк. Пользователю не нужно знать, что такое NaN.