$ sudo teach IT
МОДУЛЬ 2 · УРОК 5

Преобразование типов и truthy / falsy

JavaScript умеет автоматически конвертировать одни типы в другие — это одна из самых важных и часто путающих особенностей языка. Разберём явное и неявное преобразование, а также концепцию truthy/falsy, которая пронизывает весь JS-код.

⏱ ~25 минут 🎓 Для новичков ⚡ JavaScript

🔄 Явное преобразование типов

Явное преобразование — когда программист сам говорит JavaScript: «преобразуй это в такой-то тип». Это предсказуемо и понятно. Для явного преобразования есть специальные функции.

Number() — преобразовать в число

Попытается преобразовать значение в число. Если не получится — вернёт NaN.

console.log(Number("42"));      // 42  (строка → число)
console.log(Number("3.14"));    // 3.14
console.log(Number(""));        // 0   (пустая строка → 0)
console.log(Number("  "));      // 0   (строка из пробелов → 0)
console.log(Number("abc"));     // NaN (не число → NaN)
console.log(Number(true));      // 1   (true → 1)
console.log(Number(false));     // 0   (false → 0)
console.log(Number(null));      // 0   (null → 0)
console.log(Number(undefined)); // NaN (undefined → NaN)

parseInt() и parseFloat() — парсинг строк

parseInt читает строку слева направо и берёт целую часть числа, пока встречает цифры. parseFloat — то же, но берёт дробное число. Удобны когда строка содержит и число и текст.

console.log(parseInt("42px"));      // 42  (читает "42", останавливается на "p")
console.log(parseInt("100abc"));    // 100
console.log(parseInt("abc100"));    // NaN (начинается не с цифры!)
console.log(parseInt("3.7"));       // 3   (только целая часть)

console.log(parseFloat("3.14em"));  // 3.14
console.log(parseFloat("  5.5 ")); // 5.5 (пробелы игнорируются)

// parseInt принимает основание системы счисления вторым аргументом:
console.log(parseInt("FF", 16));    // 255 (шестнадцатеричное → десятичное)

String() — преобразовать в строку

Работает с любым значением и всегда возвращает строку. Эквивалентно вызову метода .toString().

console.log(String(42));         // "42"
console.log(String(3.14));       // "3.14"
console.log(String(true));       // "true"
console.log(String(false));      // "false"
console.log(String(null));       // "null"
console.log(String(undefined));  // "undefined"

// Альтернатива — метод .toString():
console.log((255).toString(16)); // "ff" (в шестнадцатеричном виде!)

Boolean() — преобразовать в булево

Преобразует значение в true или false. Это напрямую связано с концепцией truthy/falsy, которую разберём далее.

console.log(Boolean(0));          // false
console.log(Boolean(""));         // false
console.log(Boolean(null));       // false
console.log(Boolean(undefined));  // false
console.log(Boolean(NaN));        // false

console.log(Boolean(1));          // true
console.log(Boolean("hello"));    // true
console.log(Boolean([]));         // true (пустой массив — truthy!)
console.log(Boolean({}));         // true (пустой объект — truthy!)

🪄 Неявное преобразование (type coercion)

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

// Оператор + со строкой даёт строку:
console.log("5" + 3);    // "53" (не 8!) — число превращается в строку
console.log(3 + "5");    // "35"

// Другие операторы преобразуют строку в число:
console.log("5" - 3);    // 2  (строка "5" → число 5)
console.log("6" / 2);    // 3
console.log("4" * 2);    // 8

// Условия — любое значение преобразуется в boolean:
if ("hello") {
  console.log("Строка — это truthy!"); // выполнится
}
if (0) {
  console.log("Это не выполнится");    // 0 — falsy
}

// Двойное равенство == делает неявное преобразование:
console.log("5" == 5);   // true! (сравнивает по значению после конвертации)
console.log(null == undefined); // true!

// Тройное равенство === НЕ делает преобразование:
console.log("5" === 5);  // false (разные типы)
console.log(null === undefined); // false

🚨 Важное правило: всегда используйте === (тройное равенство)

Оператор == сравнивает с неявным преобразованием типов и ведёт себя непредсказуемо. Тройное === сравнивает и тип, и значение без конвертации — результат всегда ожидаемый. Большинство современных стайл-гайдов запрещают ==.

// Странности двойного равенства == (поэтому его и избегают!):
console.log(false == 0);    // true
console.log("" == 0);       // true
console.log("" == false);   // true
console.log(null == 0);     // false (вот это сюрприз!)
console.log(null == false); // false (ещё один сюрприз!)

// С тройным === всё предсказуемо:
console.log(false === 0);   // false
console.log("" === 0);      // false

⚖️ Truthy и Falsy: истина и ложь в JavaScript

Когда JavaScript проверяет условие (в if, в while, в логических операторах), он преобразует любое значение в true или false. Значения, которые превращаются в false, называются falsy. Всё остальное — truthy.

❌ 6 falsy-значений (выучите наизусть!):
false
0
"" (пустая строка)
null
undefined
NaN
✅ Truthy — всё остальное, включая:
  • Любое ненулевое число: 1, -1, 3.14, Infinity
  • Любая непустая строка: "hello", "0", "false" (строка "false" — truthy!)
  • Массивы и объекты, даже пустые: [], {}
  • Функции
// Truthy/falsy в условиях:
let username = "";           // пустая строка — falsy
if (username) {
  console.log("Привет, " + username); // не выполнится
} else {
  console.log("Имя не задано");       // выполнится
}

let count = 0;               // 0 — falsy
if (count) {
  console.log("Есть элементы");       // не выполнится
}

let items = [];              // пустой массив — TRUTHY!
if (items) {
  console.log("Массив существует");   // выполнится! (даже пустой)
}
// Чтобы проверить пустой массив, используйте:
if (items.length > 0) {
  console.log("В массиве есть элементы");
}

Truthy/falsy активно используется в коде для коротких проверок:

// Значение по умолчанию с оператором || (ИЛИ):
function greet(name) {
  let displayName = name || "Гость"; // если name — falsy (пустое, null, etc)
  console.log(`Привет, ${displayName}!`);
}
greet("Иван");   // Привет, Иван!
greet("");       // Привет, Гость!
greet(null);     // Привет, Гость!
greet();         // Привет, Гость!

// Современный способ — оператор ??(nullish coalescing):
// ?? выбирает правый операнд только если левый — null или undefined (не 0 или "")
let price = 0;
let display1 = price || "Бесплатно";   // "Бесплатно" (0 — falsy!)
let display2 = price ?? "Бесплатно";   // 0 (0 — не null/undefined)

🔑 Запомните: в JavaScript нет понятия «пустое значение», есть понятие «falsy». Пустая строка, ноль, null, undefined, NaN — всё это разные falsy-значения. Это не одно и то же, просто все они преобразуются в false в булевом контексте.

💼 Практические паттерны

Понимание truthy/falsy и преобразований открывает доступ к распространённым идиомам JavaScript-кода:

// 1. Проверка, что пользователь ввёл что-то:
const input = "  Иван  ".trim();
if (!input) {
  console.log("Поле не может быть пустым");
}

// 2. Двойное отрицание !! — преобразовать в boolean:
console.log(!!"hello");   // true
console.log(!!0);         // false
console.log(!!null);      // false
// Это эквивалент Boolean(), но короче.

// 3. Получить число из пользовательского ввода:
const userInput = "  42  ";
const number = Number(userInput.trim()); // 42
if (Number.isNaN(number)) {
  console.log("Введите корректное число");
}

// 4. Безопасное преобразование с проверкой:
function toNumber(value) {
  const n = Number(value);
  return Number.isNaN(n) ? 0 : n;  // если не число — возвращаем 0
}
console.log(toNumber("42"));   // 42
console.log(toNumber("abc"));  // 0

✅ Итоги урока

  • Явное преобразование: Number(), String(), Boolean(), parseInt(), parseFloat()
  • Неявное преобразование — JavaScript конвертирует автоматически в операциях (в + со строкой — получается строка, в - / * — число)
  • Всегда используйте === (не ==) — тройное равно не делает неявных преобразований
  • 6 falsy-значений: false, 0, "", null, undefined, NaN
  • Всё остальное — truthy, включая пустые массивы [] и объекты {}
  • Оператор || возвращает первый truthy или последний falsy — используется для значений по умолчанию
  • Оператор ?? — только для null/undefined, не трогает 0 и пустую строку
  • !! — двойное отрицание — короткий способ преобразовать в boolean

В следующем уроке разберём ошибки и отладку — как читать сообщения об ошибках и работать с консолью. 🚀

Тест: Преобразование типов и truthy/falsy

8 вопросов

Преобразование строки в число

Создайте переменную strNum со строкой "42.5". Преобразуйте её в число через Number() и сохраните результат в переменную num. Также создайте переменную parsed, извлекши целое число из строки "200px" через parseInt.

Truthy и falsy

Создайте переменную userInput со значением 0. Используя логическое ИЛИ, создайте переменную display так, чтобы она содержала "Значение не указано" если userInput falsy, иначе сохраняла бы значение userInput.