Type Coercion

JavaScriptJunior~2 хв читання

Type coercion (примусове або неявне перетворення типів) - це процес, за якого JavaScript автоматично перетворює значення з одного типу в інший, щоб можна було виконати операцію.

JS - динамічно і слабко типізована мова. Тому він сам «здогадується», як привести типи, якщо ти їх змішуєш.

Види перетворення типів

Неявне (implicit)

JS робить це автоматично, без твоєї участі.

javascript

'5' + 2      // "52"  → число перетворено на рядок
'5' - 2      // 3     → рядок перетворено на число
true + 1     // 2     → true → 1
false + 10   // 10    → false → 0

Явне (explicit)

Ти робиш це свідомо за допомогою функцій-конструкторів.

javascript

Number('5');     // 5
String(123);     // "123"
Boolean(0);      // false

Правила неявного перетворення

1. Перетворення на рядок

Відбувається під час конкатенації (+), якщо один з операндів - рядок:

javascript

'Hello' + 5       // "Hello5"
true + '!'        // "true!"
null + 'test'     // "nulltest"

Якщо хоча б один операнд - string, обидва приводяться до рядка.

2. Перетворення на число

Відбувається під час арифметичних операцій (-, *, /, %, **) або порівняння.

javascript

'5' - 1           // 4
'10' * 2          // 20
'4' / '2'         // 2
'abc' - 2         // NaN
true + true       // 2
false * 5         // 0
null + 1          // 1
undefined + 1     // NaN

Виняток - оператор +, який може викликати рядкову конкатенацію.

3. Перетворення на boolean

Відбувається в логічних контекстах: if (...), while (...), !, ||, && тощо.

falsy (хибні) значення:

javascript

false
0
-0
0n   (BigInt 0)
''
null
undefined
NaN

Усі інші - truthy.

javascript

Boolean(0);         // false
Boolean('');        // false
Boolean('hello');   // true
Boolean([]);        // true
Boolean({});        // true

Особливості порівняння

`==` - виконує type coercion

`===` - не виконує

javascript

0 == false        // true   (0 → false)
'5' == 5          // true   ('5' → 5)
'' == false       // true   ('' → 0 → false)
null == undefined // true   (спеціальне правило)
[] == false       // true   ([] → 0 → false)
[] == ![]         // true   (розберемо нижче)

javascript

0 === false       // false
'5' === 5         // false

Приклад «магії» JS: `[] == ![]`

Покроково:

javascript

[] == ![]

![] → false (порожній масив truthy → інвертується)
[] == false
[] → 0 під час порівняння
false → 0

Результат: 0 == 0 → true

Приклади неочевидних перетворень

Вираз	Результат	Чому
`'5' + 1`	`'51'`	рядок + число → рядок
`'5' - 1`	`4`	рядок → число
`true + false`	`1`	1 + 0
`10 + null`	`10`	null → 0
`10 + undefined`	`NaN`	undefined → NaN
`'2' * '3'`	`6`	обидва рядки → числа
`'2' + '3'`	`'23'`	конкатенація
`[] + []`	`""`	обидва масиви → `""`
`[] + {}`	`"[object Object]"`	масив → "", об'єкт → "[object Object]"

Підсумок

Тип перетворення	Що спричиняє	Приклад	Результат
До рядка	`+` (якщо рядок)	`'5' + 2`	`'52'`
До числа	`- * / % < > ==`	`'5' - 2`	`3`
До boolean	логічні контексти	`!!'js'`	`true`

Порада

Щоб уникнути несподіваних перетворень:

завжди використовуй строге порівняння (===)
виконуй явне приведення типів (Number(), String(), Boolean())
не покладайся на «автоматичну магію» JS

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.