Приведение типов: явное и неявное

Приведение типов (type coercion) — автоматическое или явное преобразование значения из одного типа данных в другой; JavaScript выполняет его неявно во многих операциях, что часто приводит к неожиданным результатам.

Зачем нужно

JavaScript — динамически типизированный язык. Операторы +, ==, условия if и другие конструкции автоматически приводят типы. Понимание правил приведения объясняет «странное» поведение JS ( + {}, false == 0) и позволяет избегать скрытых ошибок.

Где используется

  • Сравнение значений (== vs ===)
  • Арифметические операции с нечисловыми данными
  • Логические условия (truthy/falsy)
  • Конкатенация строк через +
  • DOM: значения полей форм всегда строки

Явное приведение (Explicit Coercion)

Разработчик намеренно конвертирует тип:

// К числу
Number('42');        // 42
Number('');          // 0
Number(null);        // 0
Number(undefined);   // NaN
Number(true);        // 1
Number(false);       // 0
Number('abc');       // NaN
parseInt('42px', 10); // 42 — только целое
parseFloat('3.14rem'); // 3.14

// Унарный плюс
+'42';   // 42
+true;   // 1
+null;   // 0

// К строке
String(42);         // '42'
String(null);       // 'null'
String(undefined);  // 'undefined'
(42).toString();    // '42'
(255).toString(16); // 'ff' — шестнадцатеричное

// К булевому
Boolean(0);         // false
Boolean('');        // false
Boolean(null);      // false
Boolean(undefined); // false
Boolean(NaN);       // false
Boolean();        // true (пустой массив — truthy!)
Boolean({});        // true
!!value;            // двойное отрицание — явная конвертация

Неявное приведение (Implicit Coercion)

JavaScript приводит типы автоматически:

// Оператор +: если один операнд строка — конкатенация
'5' + 3;    // '53' (число → строка)
5 + '3';    // '53'
1 + 2 + '3'; // '33' — сначала 1+2=3, потом 3+'3'

// Арифметика -*/: приводит к числу
'5' - 3;    // 2
'5' * '3';  // 15
'6' / '2';  // 3
'abc' - 1;  // NaN

// Условия: приводит к boolean (truthy/falsy)
if ('') console.log('не выведется'); // '' — falsy
if ('0') console.log('выведется');   // '0' — truthy (не 0!)
if () console.log('выведется');    //  — truthy

// Нестрогое равенство ==: приводит типы
'5' == 5;      // true — строка → число
null == undefined; // true (особый случай)
false == 0;    // true
'' == 0;       // true
 == false;   // true ( → '' → 0, false → 0)

Строгое vs нестрогое сравнение

// === не приводит типы — только если тип И значение совпадают
'5' === 5;  // false — разные типы
null === undefined; // false

// Правило: всегда используй === вместо ==
// Исключение: явная проверка null/undefined одновременно
if (value == null) { /* проверяет и null, и undefined */ }
// Эквивалентно: value === null || value === undefined

Объекты и приведение типов

// valueOf и toString вызываются при приведении
const money = {
  amount: 100,
  valueOf { return this.amount; },        // для числовых операций
  toString { return `${this.amount} RUB`; } // для строковых
};

console.log(money + 50);     // 150 — valueOf
console.log(`${money}`);     // '100 RUB' — toString (шаблонные литералы)
console.log(String(money));  // '100 RUB' — toString

// Массив → строка
 + ;    // '' ( → '' + '' → '')
 + {};    // '[object Object]'
{} + ;    // в консоли: 0 (первый {} — блок кода, не объект!)

Частые ошибки

1. Сравнение строки с числом через ==

const input = '5'; // из input.value
if (input == 5) {} // работает, но хрупко
if (+input === 5) {} // явное приведение + строгое сравнение — лучше

2. Falsy-значения в условиях

function process(count) {
  if (!count) return 'нет данных'; // count=0 — тоже вернёт 'нет данных'!
  // Правильно:
  if (count === undefined || count === null) return 'нет данных';
}

3. NaN не равен самому себе

NaN === NaN; // false — единственный случай в JS!
// Проверка:
Number.isNaN(NaN); // true — правильно
isNaN('abc');       // true — опасно, приводит к числу
Number.isNaN('abc'); // false — не число, но и не NaN

Связанные темы

Ресурсы

⚡ Источник: Существует ли приведение типа в JavaScript · AsForJS

  • 📅 2025-02-16 · YouTube
  • Тезисы:
    • С точки зрения спеки "приведение типа" неточный термин. Есть abstract operations ToString, ToNumber, ToPrimitive, ToBoolean
    • Эти операции не "меняют" значение, а возвращают новое значение нужного типа
    • Любая операция (+, ==, if) внутри спеки описана через эти abstract operations явно

⚡ Источник: ⎡sobes 03⎦ Разбираем задачу JavaScript собеседований о приведении типов · AsForJS

  • 📅 2023-08-01 · YouTube
  • Тезисы: разбор классической задачи + {} vs {} + . Алгоритм по шагам спеки: parser → ToPrimitive → ToString. Понимание убирает магию

⚡ Источник: Logical Expression в javascript · AsForJS

  • 📅 2023-05-10 · YouTube
  • Тезисы: && и || НЕ возвращают boolean — они возвращают одно из операндов согласно ToBoolean(left). Это и есть основа короткого замыкания

⚡ Источник: JavaScript expressions · AsForJS

  • 📅 2023-05-26 · YouTube
  • Тезисы: что такое expression vs statement по спеке. Expression всегда возвращает значение через Evaluation step