Типи даних в JS

Типи даних в JS - це одне з найбільш поширених питань на співбесідах. Не дивно, адже в JavaScript все будується навколо типів даних, оскільки саме з ними взаємодіє наша програма. У цій статті розглянемо всі доступні типи даних та їх відмінності.

Теорія добре описана у наступних джерелах:

• Ви не знаєте JS: Типи та граматика.
• ​​ECMAScript Data Types and Values.
• ECMAScript Overview.

Практичні завдання можна знайти тут:

• Надайте значення 7 змінній “a”.
• Надайте вміст “a” змінній “b”.
• Визначте змінну “a” за допомогою var та ініціалізуйте її значенням 9.
• Ініціалізуйте три змінні “a”, “b” та “c” значеннями 5, 10 та “I am a” відповідно, щоб вони не були невизначеними.
• Змініть існуючі оголошення та присвоєння так, щоб у їхніх іменах використовувався camelCase. Не створюйте нових змінних.

Типи даних в JS

На момент створення цього матеріалу мова EcmaScript налічує 8 типів даних.

Сім примітивних:

• Undefined;
• Null;
• Boolean;
• Два числових типи– Number та BigInt – для роботи з великими числами;
• String;
• Symbol.

І один складовий або, як ще називають, складний тип – Object.

Невелике зауваження: далі я використовуватиму термін «змінна». Цю тему ми розберемо трохи пізніше, а поки що я хочу, щоб ви дізналися про змінні наступне:

1. Змінні створюються для того, щоб зберігати в них дані. Створення змінної називають оголошенням змінної.
2. При оголошенні змінної ми даємо їй ім'я для того, щоб до цих даних можна було звернутись у майбутньому.

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

Ця поведінка спочатку може спантеличити, але не хвилюйтеся, ми розберемо її на прикладі трохи пізніше.

Визначити, з яким типом даних ми маємо справу, допоможе оператор typeof. Якщо ми передамо йому якесь значення чи змінну, у якій зберігається значення, він поверне нам назву типу даних. 

Ми передаємо цьому оператору значення різних типів, щоб переглянути значення, що повертається.

typeof undefined                  === "undefined"; // true
typeof true                       === "boolean";   // true
typeof "42"                       === "string";    // true
typeof 42                         === "number";    // true
// "were introduced in ES6 and are also primitives"
typeof BigInt("9007199254740991") === "bigint";    // true
typeof Symbol()                   === "symbol";    // true

Кілька слів про кожен з типів

• Undefined - говорить про те, що значення - невизначене. Ви отримаєте його, якщо передасте оператору typeof щойно оголошену порожню змінну.
• Boolean - булевий тип даних, що має два значення true і false, тобто правда чи неправда. Це може бути результатом порівняння двох чисел, наприклад, п'ять більше трьох? Так, твердження вірне, результатом порівняння буде true.
• String - представляє рядки.
• Number - числовий тип даних. Він охоплює як цілі числа, так і числа з плаваючою крапкою. Змінна типу Number може зберігати в собі 20-значне число, але якщо цього виявляється недостатньо, на допомогу прийде BigInt, який був створений для роботи з великими числами.
• Symbol – це унікальний та незмінний тип даних, який може бути використаний як ідентифікатор для властивостей об'єктів. Про нього ми поговоримо в іншій статті.

BigInt та Symbol були додані в мову у 2015 році. Зокрема, ви можете зустріти в інтернеті інформацію про меншу кількість типів даних у мові.

• Null – говорить про те, що значення відсутнє, проте визначено. Якщо ви хочете очистити якусь змінну від значення, ви надаєте їй значення null.

У null є одна особливість. Оператор typeof при його перевірці повертає object. Це помилка мови, і вона навряд чи буде колись виправлена, оскільки в інтернеті існує маса коду, підлаштованого під цю особливість.

Що стосується об'єктів та підтипів об'єкта, таких як: функції та масиви, ми розберемо кожен із них у наступних статтях. Зараз просто подивимося на їх синтаксис. Ви часто зустрічатимете їх на різних сайтах, так що буде краще, якщо ви дізнаєтеся трохи про них вже зараз.

Об'єкти

Сховища даних представлені у вигляді пар «ключ-значення». Ключі називають властивостями. Об'єктами зручно описувати сутності нашого світу. Наприклад, будь-якого користувача, який має ім'я, прізвище і телефон. У прикладі ми створили об'єкт з допомогою літералу об'єкта (фігурні дужки відразу після знака дорівнює). 

var user = {
  firstName: 'John',
  lastName: 'Dou',
  phone: '555-24-42',
}
typeof user === "object"; // true
user.firstName // John
user['firstName'] // John

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

Функції

Однією з ключових особливостей функцій є перевикористання коду. Ідея полягає в тому, що ми виносимо в них код, який необхідно виконати кілька разів у програмі, і викликаємо цю функцію там, де це необхідно.

Одним із способів створення функції є оголошення за допомогою ключового слова function, після якого йде ім'я функції. Тіло функції визначається у фігурних дужках. Викликати функцію можна за її ім'ям, після чого йдуть круглі дужки. Перевірка за допомогою оператора typeof поверне нам function, а це може навести на думку, що функції - це окремий тип даних. Насправді ж функції є підтипом об'єкта і називаються об'єктом, що викликається (callable object).

Познайомившись із функціями ближче, можна помітити, що з ними справді можна поводитися, як з об'єктами. Наприклад, у них є властивість «length», до якої можна звернутися через крапку після імені змінної, як ми робили це в об'єкті. Ця властивість говорить про кількість аргументів функції (передані дані). У нашому прикладі повернеться нуль.

function a() {
  // function code is defined here 
}
a();
typeof a === 'function' //true
a.length; // 0

Масиви

І, зрештою, масиви.

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

var a = [ 1, "2", [3] ];
typeof a === "object"; // true
// an array element can be retrieved using its index (number in order). The calculation starts from zero.
a[0] // 1

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

Як ви могли помітити, масиви – це впорядковані колекції. І найчастіше вони використовуються тоді, коли потрібно перебрати та обробити всі елементи якогось списку.

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

var userQueue = [
  {fullName: 'John Dou'},
  {fullName: 'Martha Stuart'},
  {fullName: 'Sam Sparks'}
];
let fisrtUserInQueue = userQueue[0];

Кожна людина тут представлена об'єктом із властивістю fullName (повне ім'я). Значення цієї властивості є рядок (примітивний тип). Для отримання першої людини у черзі ми використовуємо індекс 0.