Докладніше про типи даних

Тут не всі існуючі типи, а лише ті, з якими ми зіткнемося при розв'язанні задач.

Якщо елементи цього розділу будуть вам не до кінця зрозумілі - це ОК, просто йдіть далі. Частина цієї інформації може виявитись не дуже практичною для вас.

Булевий тип даних

Він же Boolean. В числових виразах зазвичай і результат числовий, наприклад 1+1 обчислюється в число 2, а от в логічних виразах результат - булевий. Булеве значення може бути або true (вираз "істинний") або false (вираз "хибний"), інших варіантів нема. Приклад: 2 > 1 — цей вираз обчислюється в true, 1 > 1+1 — цей вираз false. 2 > 2 — цей теж false.

Отже компʼютер, окрім роботи із числами, може "обчислювати" логічні вирази типу 2 > 1 && 3 > 2 (де && читається як "і також") в якесь конкретне одне значення (для даного прикладу це true). Розуміння цього дозволяє бачити менше магії в коді, а також писати елегантніші програми. Проте зараз вам це знання навряд чи дуже допоможе.

Undefined

Якщо створити змінну та не присвоїти їй жодного значення, вона матиме тип даних undefined. Тобто там не лежатиме 0 чи пустий шмат тексту. Там реально знаходитиметься undefined, що перекладається як "не визначено", чи по-простому "пустота".

let message;
console.log(message); 
// на нашому сайті js.ide.shpp.me, якщо ви запустите цей код
// то ви побачите червоний знак питання замість слова undefined
// ...та це ми просто виразніше візуалізуємо значення undefined

Числа

У С++, Java та інших мовах є окремі типи даних для цілих чисел (1, 42, 100500 і т.п ) та чисел з рухомою комою (1.234, 3.14, 5.0, 0.5 і т.п.). Але у JavaScript і для цілих, і для дробних чисел — один тип (він так і називається: number).

Крім того, є кілька символічних значень: +Infinity (додатна нескінченність), -Infinity (від'ємна нескінченність), і NaN (не число). Через низку причин вони теж мають тип number

Яка практична користь цього знання? Ну, можливо скоро ви випадково стикнетесь із NaN...

console.log("зараз поділимо нуль на нуль... ");
console.log("результат на наступній строчці: ");
console.log(0 / 0);
// на нашому сайті js.ide.shpp.me, якщо ви запустите цей код
// то ви побачите червоний символ замість слова NaN
// ...та це ми просто виразніше візуалізуємо значення NaN

Рядки

В JavaScript для подання текстових даних служить тип String. Тобто якийся текст у кавичках і має тип String. Будь-яка строчка тексту являє собою ланцюжок «елементів» — символів. Кожен такий елемент займає свою позицію в рядку. Перший елемент має індекс (позицію) 0, наступний — 1, і так далі. В житті нумеруємо все з 1, а от у програмуванні часто позиція починається з 0.

Довжина рядка - це кількість елементів в ньому. Рядки описують в коді між 'одинарними' або "подвійними" лапками. На відміну від мов, подібних C, рядки в JavaScript є незмінні (ще кажуть "іммутабельні"). Це означає, що після того, як значення створено, його не можна модифікувати. Залишається лише створити новий рядок шляхом здійснення якоїсь операції над вихідним рядком.

Яке практичне знання цього? Пізніше, на етапі вивчення масивів та рядків, ви навчитесь детально працювати, посимвольно, з рядками. Поки вже зараз круто знати, що ви можете склеювати разом шматки тексту звичайним плюсиком:

console.log("hello" + " " + "javascript")

Як дізнатись тип даних

Щоб дізнатись тип даних чого завгодно, треба викликати команду typeof

let a = 5;
console.log("a " + typeof a);

let b = "5";
console.log("b " +  typeof b);

let d;
console.log("d " +  typeof d);

// це працює не лише зі змінними, а й з літералами, тобто "голими" значеннями
console.log("3 > 2 " +  typeof (3 > 2));

// і т.д і т.п.

Яке практичне використання цього? Якщо сумніватиметесь щодо того, що саме лежить у ваших змінних, то зможете перевірити це за допомогою typeof.

"Привéдення" типів

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

console.log(1 + 2); // 3 (тут все ок)
console.log(1 + "2"); // 12 (число та текст несумісні, довелось привести 1 в текст)

Зміна типу відбувається, якщо результат виконання операції зі змінною вихідного типу неясний. Наприклад, не можна точно сказати, що вийде в результаті складання рядка з числом, але операція додавання двох чисел очевидна, і в цьому випадку логічно привести число до тексту. У другому прикладі після перетворення числа до текстового рядка сталася операція додавання двох рядків (конкатенація)

Перетворення рядка на число

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

let a = "1";
++a;
console.log(typeof a); // number, хоча ж була стрінгом!

let b = "1";
--b;
console.log(typeof b); // number, хоча ж була стрінгом!

Якщо значення, що міститься в рядку не може бути визначене як число, то результатом виконання інкремента або декремента над таким текстовим рядком буде спеціальне значення NaN типу number.

let c = "not-a-number";
++c;
console.log(typeof c); // хоч значення змінної - NaN, проте тип все одно number))

Варто зауважити, що не потрібно вдаватися до такого способу приведення рядка до числа через його погану читабельність і неочевидність. Для цього завдання в js існують вбудовані функції parseInt і parseFloat (є ще один елегантний спосіб, ми теж його вчимо). Як перший аргумент, ці функції приймають рядок, яку необхідно привести до числа.

Функція parseInt використовується для перетворення рядка в ціле число, а функція parseFloat для перетворення в дробове.

let a = parseInt("10");

console.log("a = " + a)
console.log("typeof a: " + typeof a); 
// a = 10
// typeof a: number

let pi = parseInt("3.1415");
console.log("parseInt, pi = " + pi); // pi = 3

pi = parseFloat("3.1415");
console.log("parseFloat, pi = " + pi); // pi = 3.1415

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

let a = parseInt("010");
console.log("a = " + a); // a = 10

a = parseInt("0xAA");
console.log("a = " + a); // a = 170

a = parseFloat("1e-10");
console.log("a = " + a); // a = 1e-10 (1e-10 = 1 * 10 ^ -10 = 0.0000000001)

Якщо parseInt() і parseFloat() приймають першим параметром щось, що не можна привести до числа, то результатом завжди буде NaN.

let a = parseInt("not a number");
console.log("a = " + a); // a = NaN

a = parseFloat("not a number");
console.log("a = " + a); // a = NaN

Але, звісно, найпростіший спосіб — це унарний плюс,

let a = "5";
console.log(typeof a);

a = +"5";
console.log(typeof a);

// знову ж, це працює і з літералами
console.log(typeof +"123")
console.log(typeof +"4.567")

Яка користь від цього знання? Якщо від користувача прийде число в текстовому вигляді, то додавання одиниці до даних користувача не обчислюватиметься по правилам математики. Наприклад, користувач дав вам одиницю, і ви поклали її в змінну А. Якщо зробити console.log(A+1) то ви побачите 11 замість 2 (і ви вже розумієте чому, а якщо ні - то перечитайте останні абзаци). Тому вам доведеться спочатку перетворити дані користувача у реальне число, а потім вже робити +1.

Рядкове перетворення

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

// йой! ми тут використовуємо "масиви", "функції" та "обʼєкти"
// і ми їх ще не вчили... то може треба поки пропустити цей шмат коду?

// ...і ще одне!! якщо ви запускатимете цей приклад
// на нашому сайті js.ide.shpp.me 
// ...то побачите інший результат ;) і попередження від нашої команди 

let str = "Object: " + {};
console.log(str) // напише: Object: [object Object]

str = "Array: " + [1, 2, 3];
console.log(str) // напише: Array: 1,2,3

function sum(a, b) {
    return a + b;
}

str = "Function: " + sum;
console.log(str) /* напише: Function: function sum(a, b) {
    return a + b;
} */

Фактично, при приведенні об'єкта до рядка, неявним чином викликається метод (команда) toString, який так само можна викликати явно.

// якщо ви запускатимете цей приклад
// на нашому сайті js.ide.shpp.me 
// ...то побачите інший результат ;) і попередження від нашої команди

let p = {x: 2, y: 4}, str;
str = p.toString();
console.log(typeof str); // виведе: string
console.log(str); // виведе: [object Object]

str = [1, 2, 3].toString();
console.log(typeof str); // виведе: string
console.log(str); // виведе: 1,2,3

Яка вам користь з цього зараз? Головне зрозуміти, що якщо ви пхаєте в console.log щось неправильне, то на екрані зʼявиться щось неправильне, і треба все ж уважніше подивитись що ж ви пхаєте в console.log :)

Числове перетворення

Перетворення в число відбувається при виконанні математичних операцій і при виконанні операції порівняння з приведенням типу (==,! =), При цьому значення false і порожній масив перетворюються в значення 0 типу number.

console.log (false == 0); // true
console.log([] == 0); // true

Логічне значення true при використанні в арифметичних виразах приводиться до одиниці.

let a = true + true + true; // 1 + 1 + 1
console.log(a); // 3

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

let arr = [1, 2, 3];
console.log(arr + 4); // 1,2,34

function sum(a, b){
    return a + b;
}

console.log(sum + 5); // function sum(a, b){return a + b}5

Як видно, неявне перетворення типів у JS далеко не завжди очевидне, тому варто його уникати, використовуючи функції для явного приведення типів, такі як parseInt, parseFloat і toString.

Додаткові матеріали

Про типи даних (uk.javascript.info)

Про приведення (перетворення) типів (Ш++)