Перетворення примітивів

Перетворення, або приведення типів — це процес перетворення значень з одного типу в інший (наприклад – рядки в число, тощо). Будь-який тип JavaScript, може бути перетворений на інший тип. Є два типи перетворення.

Визначення типу даних з typeof

Оператор typeof в JavaScript використовується для визначення типу даних змінної чи виразу. Він повертає рядок, який представляє тип даних. Це корисний інструмент для перевірки типу перед виконанням певних операцій або обробки даних.

Ось деякі типи даних, які можуть бути повернуті оператором typeof:

• 'undefined': Якщо змінна не має присвоєного значення.
• 'number': Для числових значень.
• 'string': Для рядкових значень.
• 'boolean': Для булевих значень.
• 'object': Для об’єктів та null.
• 'function': Для функцій.

Ось приклади коду, що демонструють використання оператора typeof:

const age = 30;
const name = "Alice";
const isActive = true;
const person = { firstName: "Bob", lastName: "Smith" };
const greet = function() { console.log("Hello!"); };
const numbers = [1, 2, 3, 4, 5];

console.log(typeof age); // Виведе: number
console.log(typeof name); // Виведе: string
console.log(typeof isActive); // Виведе: boolean
console.log(typeof person); // Виведе: object
console.log(typeof greet); // Виведе: function
console.log(typeof numbers); // Виведе: object

let unknownVariable;
console.log(typeof unknownVariable); // Виведе: undefined

const nullValue = null;
console.log(typeof nullValue); // Виведе: object

Зверніть увагу, що оператор typeof використовується для перевірки типу даних, а не для перевірки наявності змінної або її значення. Також важливо знати, що випадок з null як типом “object” є старою помилкою мови, яка збереглася для збільшення сумісності з попередніми версіями JavaScript.

Явне перетворення типів за допомогою вбудованих функцій

Boolean — явне перетворення виконується за допомогою виклику Boolean(value).

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

• Значення, які інтуїтивно «порожні», такі як 0, порожній рядок, null, undefined та NaN, стають false
• Інші значення стають true

console.log(Boolean(3)); // true
console.log(Boolean(0)); // false
console.log(Boolean("test")); // true
console.log(Boolean("")); // false

Number — явне перетворення виконується явно за допомогою виклику Number(value) для явного перетворення value на число. Явне перетворення потрібно, коли ми, наприклад, отримуємо рядок, але для подальших маніпуляцій зі змінною нам потрібно число.

let strNumber = "42";
console.log(typeof strNumber); // string

let num = Number(strNumber); // 42 стає числом 
console.log(typeof num); // number

Якщо рядок не є дійсним числом, результатом такого перетворення є NaN.

let str = Number("test");
console.log(str); // NaN, помилка перетворення

console.log(Number("238s")); // NaN (помилка на місці символу "s")
console.log(Number("   32   ")); // 32 - Пробіли на початку та з кінця видаляються
console.log(Number(true));  // 1
console.log(Number(false)); // 0

Числове перетворення за допомогою Number(value) є суворим, тож якщо значення не є гарантованим числом, то станеться помилка. Ось тут можуть стати в нагоді функції parseInt та parseFloat. Вони «читають» число з рядка, до поки можуть, у разі помилки зчитане число повертається. Функція parseInt повертає ціле число, тоді як parseFloat повертає число з плаваючою крапкою:

console.log(parseInt('100px')); // 100
console.log(parseFloat('10.5rem')); // 10.5
console.log(parseInt('15.6')); // 15, тільки частина цілого числа
console.log(parseFloat('48.5.4')); // 48.5, друга крапка зупиняє зчитування
console.log(parseFloat("2.5test")); //2.5
console.log( parseInt('a123') ); // NaN, перший символ зупиняє процес зчитування

Функція parseInt() має необов’язковий другий аргумент. Він вказує основу системи числення:

console.log( parseInt('0xff', 16)); // 255
console.log( parseInt('ff', 16)); // 255
console.log( parseInt('2n9c', 36)); // 123456

String — явне перетворення виконується за допомогою виклику String(value) для явного перетворення value на рядок:

let value = true;
console.log(typeof value); // boolean

value = String(value); // тепер value - це рядок "true"
console.log(typeof value); // string

let testNumber = 5;
testNumber = String(testNumber);
console.log(typeof testNumber); // string

Неявне перетворення

Також існують операції, які неявно перетворюють типи. Унарний + — оператор застосований до одного операнда, нічого не зробить, якщо операнд є числом. Але якщо операнд не є числом, унарний плюс перетворить його на число.

const a = -42;
console.log( +a ); // -42

// Перетворює нечислові значення
console.log(+true); // 1
console.log(+""); // 0
console.log(+"12"); // 12

Подвійний НЕ !! іноді використовується для перетворення значення на булевий тип.

console.log(!!"test"); // true
console.log(!!null); // false

Перше ! — перетворює значення на булеве і повертає зворотне, а друге ! — інвертує його знову.

Таблиця перетворення типів JavaScript

У наведеній нижче таблиці показано результат перетворення різних значень JavaScript на числа, рядки та логічні значення:

Original Value	Converted to Number	Converted to String	Converted to Boolean
false	0	“false”	false
true	1	“true”	true
0	0	“0”	false
1	1	“1”	true
“0”	0	“0”	true
“1”	1	“1”	true
NaN	NaN	“NaN”	false
Infinity	Infinity	“Infinity”	true
-Infinity	-Infinity	“-Infinity”	true
“”	0	“”	false
“20”	20	“20”	true
“twenty”	NaN	“twenty”	true
[ ]	0	“”	true
[20]	20	“20”	true
[10,20]	NaN	“10,20”	true
[“twenty”]	NaN	“twenty”	true
[“ten”,”twenty”]	NaN	“ten,twenty”	true
function(){}	NaN	“function(){}”	true
{ }	NaN	“[object Object]”	true
null	0	“null”	false
undefined	NaN	“undefined”	false

Примітка. Значення в лапках (“”) позначають рядкові значення. Значення, виділені червоним кольором , позначають значення (деякі), яких програмісти могли б не очікувати.

Також неявне приведення типів відбувається автоматично при виконанні операцій між значеннями різних типів. JavaScript намагається автоматично конвертувати один тип даних в інший, щоб виконати потрібну операцію. Це може бути корисним, але також може призводити до неочікуваного поведінки, якщо ви не розумієте як воно працює.

Приведення до буля (Boolean):

Неявне приведення до буля відбувається під час виконання логічних операцій, таких як if, while, &&, || тощо. Зазвичай значення розглядається як false, якщо воно є “неправдивим” (наприклад, false, 0, null, undefined, NaN, ""), і як true в іншому випадку.

Приведення до числа (Number):

Неявне приведення до числа відбувається під час математичних операцій або порівнянь, коли одне зі значень має числовий тип. Якщо значення не є числом, JavaScript намагається конвертувати його в числовий тип. Це може включати рядки, булеві значення та інші типи.

console.log(5 + '10'); // "510" (рядок)
console.log('15' - 5); // 10 (число)
console.log(null + 10); // 10 (null стає 0)
console.log(true + 1); // 2 (true стає 1)
console.log(false + 1); // 1 (false стає 0)

Приведення до рядка (String):

Неявне приведення до рядка відбувається під час конкатенації рядків або коли одне зі значень є рядком.

console.log(10 + '20'); // "1020" (рядок)
console.log('Hello, ' + 'world!'); // "Hello, world!" (рядок)
console.log(true + ''); // "true" (true перетворюється на "true")

Важливо розуміти, як відбувається неявне приведення типів, щоб уникнути непередбачених результатів та помилок у вашому коді. Деякі ситуації можуть бути неочевидними, тому рекомендується завжди перевіряти типи даних перед виконанням операцій, якщо ви маєте сумніви. Ось деякі приклади коли відбувається неявне приведення типів

console.log(5 + "10");  // "510"
console.log(5 - "10");  // -5
console.log(5 * "10");  // 50
console.log(5 / "10");  // 0.5
console.log(5 + null);  // 5
console.log(5 + undefined);  // NaN

console.log(5 + true);  // 6
console.log(5 - false);  // 5
console.log(5 * true);  // 5
console.log(5 / false);  // Infinity

console.log("5" + true);  // "5true"
console.log("5" - false);  // 5
console.log("5" * false);  // 0
console.log("5" / true);  // 5