Що таке приведення (перетворення) типів у JS?

Повне пояснення

Що це і навіщо Приведення типів (type coercion) у JavaScript — механізм, що дозволяє виконувати арифметичні або логічні операції між значеннями різних типів, перетворюючи їх у спільний тип. Це корисно для швидкого написання коду, але може спричиняти непередбачувані результати.

Ключові принципи/терміни

• Implicit coercion – автоматичне перетворення, що відбувається під час виконання операцій.
• Explicit coercion – явне перетворення за допомогою Number(), String(), Boolean() або операторів типу +/-.
• Type conversion rules – правила, за якими визначається результат (наприклад, true + 1 === 2, "5" * "2" === 10).

Як це працює

1. При виконанні операції JavaScript визначає типи операндів.
2. Якщо типи різні, застосовуються правила coercion: число → рядок при +, число → число при *, /, % тощо.
3. Якщо потрібне явне перетворення, викликається відповідна функція.

Практика і реалізація (JS/TS)

// implicit coercion
console.log("5" + 1); // "51"
console.log("5" * 2); // 10

// explicit coercion
const num = Number("123");
const bool = Boolean(0); // false

In TypeScript, type assertions (as number) can be used to inform the compiler without runtime conversion.

Тестування

import { test, expect } from 'vitest';

test('coercion', () => {
  expect("5" + 1).toBe("51");
  expect(Number("10") * 2).toBe(20);
});

Особливості в контексті JS Core

• == виконує loose equality з implicit coercion; === — strict, без перетворення.
• Оператор + поводиться як конкатенація, якщо хоча б один операнд рядок.
• NaN виникає при невдалому перетворенні, що слід перевіряти через Number.isNaN.

Оптимізація, типові помилки та edge cases

• Не використовуйте == для порівняння, бо це може призвести до логічних помилок.
• Перевіряйте null і undefined, оскільки вони приводяться до false у Boolean.
• Уникайте непередбачуваних результатів при конкатенації великих рядків.

Часті помилки (8)

1. "0" == false → true
2. "false" == 0 → false, але Number("false") → NaN
3. [] + [] → ""
4. [1,2] + [3,4] → "1,23,4"
5. null == undefined → true
6. undefined + 0 → NaN
7. true + false → 1
8. "5" / "2" → 2.5 (implicit coercion to number)

Cheatsheet

• Number(value) – перетворює на число (NaN, якщо не можливо).
• String(value) – перетворює на рядок.
• Boolean(value) – true/false.
• +value – коротка форма Number.
• == – loose equality (coercion), === – strict.

Follow-up питання

1. Які ризики пов’язані з implicit coercion?
2. Як уникнути непередбачуваних результатів при порівнянні типів?