Пошук уроків, статей та іншого контенту
Познайомтеся з основними типами даних JavaScript та дізнайтеся, які значення може зберігати програма. Розберіть різницю між примітивними типами та об'єктами.
Тип даних визначає, яке значення зберігає змінна і які операції можна з ним виконувати.
У JavaScript змінні не мають фіксованого типу. Тип належить самому значенню, тому одна й та сама змінна може послідовно зберігати значення різних типів:
let value = 42;
console.log(value); // 42
value = "сорок два";
console.log(value); // сорок два
value = true;
console.log(value); // trueJavaScript називають мовою з динамічною типізацією. Тип значення визначається під час виконання програми.
У JavaScript є сім примітивних типів:
string — рядки;
number — числа;
bigint — дуже великі цілі числа;
boolean — логічні значення;
undefined — значення не визначене;
symbol — унікальні ідентифікатори;
null — відсутнє значення.
Примітивні значення є простими, неподільними значеннями. Вони не містять властивостей та методів, які можна змінювати безпосередньо.
stringРядок — це послідовність символів. Рядки можна записувати в одинарних або подвійних лапках, а також у зворотних лапках:
const firstName = "Олена";
const city = 'Львів';
const message = `Користувач: ${firstName}`;
console.log(firstName); // Олена
console.log(city); // Львів
console.log(message); // Користувач: ОленаЗворотні лапки дають змогу створювати шаблонні рядки. Вирази всередині ${...} обчислюються та вставляються в рядок.
const product = "книга";
const price = 350;
console.log(`Товар: ${product}, ціна: ${price} грн`);Рядки мають властивість length, яка повертає кількість символів:
const language = "JavaScript";
console.log(language.length); // 10numberТип number використовується для цілих і дробових чисел:
const count = 12;
const temperature = -4.5;
const result = 10 / 4;
console.log(count); // 12
console.log(temperature); // -4.5
console.log(result); // 2.5До цього типу також належать спеціальні числові значення:
Infinity — нескінченність;
-Infinity — від'ємна нескінченність;
NaN — результат операції, який не є коректним числом.
console.log(10 / 0); // Infinity
console.log("текст" * 2); // NaNПеревірити, чи є значення NaN, можна за допомогою Number.isNaN():
const result = Number("abc");
console.log(Number.isNaN(result)); // truebigintТип bigint призначений для цілих чисел, які можуть бути більшими за безпечний діапазон типу number.
Щоб створити bigint, після цілого числа додають n:
const largeNumber = 9007199254740993n;
console.log(largeNumber);
console.log(typeof largeNumber); // bigintНе можна безпосередньо виконувати арифметичні операції між number і bigint:
const regularNumber = 10;
const bigNumber = 20n;
// Така операція спричинить помилку:
// console.log(regularNumber + bigNumber);За потреби значення потрібно явно перетворити:
const regularNumber = 10;
const bigNumber = 20n;
console.log(BigInt(regularNumber) + bigNumber); // 30nДля більшості повсякденних обчислень достатньо типу number.
booleanТип boolean має лише два значення:
true — істина;
false — хиба.
Логічні значення часто використовують в умовах:
const isLoggedIn = true;
const hasPermission = false;
if (isLoggedIn && hasPermission) {
console.log("Доступ дозволено");
} else {
console.log("Доступ заборонено");
}Оператори порівняння також повертають boolean:
const age = 20;
console.log(age >= 18); // true
console.log(age === 16); // falseundefinedЗначення undefined означає, що значення не було визначене.
Якщо оголосити змінну без початкового значення, вона матиме значення undefined:
let username;
console.log(username); // undefined
console.log(typeof username); // undefinedТакож undefined може повернути функція, яка не має команди return:
function showMessage() {
console.log("Повідомлення");
}
const result = showMessage();
// У консоль спочатку буде виведено "Повідомлення",
// а значення result буде undefined.
console.log(result); // undefinednullЗначення null використовують, коли потрібно явно вказати, що значення відсутнє:
let selectedUser = null;
console.log(selectedUser); // nullРізниця між undefined і null:
undefined зазвичай означає, що значення ще не було задане;
null зазвичай встановлюють навмисно, щоб позначити відсутність значення.
let userName; // значення ще не визначене
let avatar = null; // аватар навмисно відсутнійsymbolsymbol створює унікальне значення. Символи використовують, зокрема, як унікальні ключі властивостей об'єктів.
const firstId = Symbol("id");
const secondId = Symbol("id");
console.log(firstId === secondId); // falseНавіть якщо символи мають однаковий опис, вони все одно різні.
На початковому етапі розробки символи використовуються нечасто. Важливо знати, що це окремий примітивний тип.
Об'єкт — це складне значення, яке може зберігати набір властивостей. Властивість складається з ключа та значення.
const user = {
name: "Марко",
age: 28,
isAdmin: false
};
console.log(user.name); // Марко
console.log(user.age); // 28Значеннями властивостей можуть бути дані будь-яких типів:
const article = {
title: "Типи даних",
views: 1200,
isPublished: true,
author: null
};
console.log(article.title);
console.log(article.views);Властивість можна змінити, додати або видалити:
const user = {
name: "Олена"
};
user.age = 25;
user.name = "Ольга";
delete user.age;
console.log(user); // { name: "Ольга" }Об'єкт оголошено через const, але його властивості можна змінювати. const забороняє переприсвоїти саму змінну, а не змінити вміст об'єкта.
const settings = {
theme: "light"
};
settings.theme = "dark"; // дозволено
// settings = {}; // помилка: переприсвоєння constЄ два основні способи доступу до властивостей об'єкта.
Через крапку:
const book = {
title: "Кобзар",
pages: 320
};
console.log(book.title);Через квадратні дужки:
const propertyName = "pages";
console.log(book[propertyName]); // 320Квадратні дужки зручні, коли назва властивості зберігається у змінній або містить символи, які не можна використати в записі через крапку.
Масив — це об'єкт для зберігання впорядкованого списку значень.
const colors = ["червоний", "зелений", "синій"];
console.log(colors[0]); // червоний
console.log(colors[1]); // зелений
console.log(colors.length); // 3Індекси масиву починаються з нуля. Тому перший елемент має індекс 0, другий — 1 і так далі.
Масив може містити значення різних типів:
const values = ["текст", 42, true, null];
console.log(values[0]); // текст
console.log(values[2]); // trueЕлементи масиву можна змінювати:
const fruits = ["яблуко", "груша"];
fruits.push("слива");
fruits[0] = "банан";
console.log(fruits); // [ "банан", "груша", "слива" ]Попри спеціальне призначення, масиви є об'єктами:
const numbers = [1, 2, 3];
console.log(typeof numbers); // object
console.log(Array.isArray(numbers)); // trueДля перевірки масиву використовуйте Array.isArray(), а не лише typeof.
Функція — це значення, яке можна викликати. Функції використовують для зберігання та повторного виконання коду.
function greet(name) {
return `Привіт, ${name}!`;
}
console.log(greet("Іване")); // Привіт, Іване!Функції в JavaScript також є об'єктами. Але typeof повертає для них окремий результат:
function add(a, b) {
return a + b;
}
console.log(typeof add); // functionФункцію можна зберігати у змінній або передавати як значення:
const operation = function (a, b) {
return a * b;
};
console.log(operation(3, 4)); // 12Для визначення типу часто використовують оператор typeof:
console.log(typeof "JavaScript"); // string
console.log(typeof 42); // number
console.log(typeof true); // boolean
console.log(typeof undefined); // undefined
console.log(typeof 10n); // bigint
console.log(typeof Symbol("id")); // symbol
console.log(typeof {}); // object
console.log(typeof []); // object
console.log(typeof function () {}); // functionЄ особливість:
console.log(typeof null); // objectЦе історична особливість JavaScript. Насправді null не є об'єктом, але typeof null повертає "object". Якщо потрібно перевірити саме null, використовуйте строге порівняння:
const value = null;
console.log(value === null); // trueПримітивні значення копіюються як самі значення:
let firstNumber = 10;
let secondNumber = firstNumber;
secondNumber = 20;
console.log(firstNumber); // 10
console.log(secondNumber); // 20Після копіювання firstNumber і secondNumber не залежать одне від одного.
Об'єкти копіюються як посилання на той самий об'єкт:
const firstUser = {
name: "Андрій"
};
const secondUser = firstUser;
secondUser.name = "Петро";
console.log(firstUser.name); // Петро
console.log(secondUser.name); // ПетроУ цьому прикладі обидві змінні посилаються на один об'єкт у пам'яті.
Щоб створити незалежну поверхневу копію об'єкта, можна використати оператор розгортання:
const original = {
name: "Андрій",
age: 30
};
const copy = {
...original
};
copy.name = "Петро";
console.log(original.name); // Андрій
console.log(copy.name); // ПетроJavaScript іноді автоматично перетворює типи. Наприклад, під час додавання рядка та числа число може перетворитися на рядок:
console.log("Вік: " + 25); // Вік: 25Інші арифметичні оператори можуть перетворювати рядок на число:
console.log("10" - 3); // 7
console.log("10" * 2); // 20Автоматичні перетворення можуть бути несподіваними, тому часто краще виконувати їх явно:
const text = "42";
const number = Number(text);
console.log(number); // 42
console.log(typeof number); // numberПоширені явні перетворення:
const number = 123;
const text = String(number);
const flag = Boolean(number);
console.log(text); // "123"
console.log(typeof text); // string
console.log(flag); // trueОператор === порівнює і значення, і їхні типи:
console.log(5 === 5); // true
console.log(5 === "5"); // falseОператор == може автоматично перетворювати типи перед порівнянням:
console.log(5 == "5"); // trueУ більшості випадків використовуйте === та !==, оскільки вони роблять поведінку програми передбачуванішою.
const input = "10";
if (input === 10) {
console.log("Це число 10");
} else {
console.log("Це не число 10");
}
// Буде виведено: Це не число 10Наступний приклад можна запустити в браузері або в Node.js:
const productName = "Ноутбук";
const price = 25000;
const inStock = true;
const tags = ["техніка", "комп'ютери"];
const productInfo = {
name: productName,
price,
inStock,
tags
};
console.log(`Назва: ${productInfo.name}`);
console.log(`Ціна: ${productInfo.price} грн`);
console.log(`Є в наявності: ${productInfo.inStock}`);
console.log(`Кількість тегів: ${productInfo.tags.length}`);
console.log(typeof productName); // string
console.log(typeof price); // number
console.log(typeof inStock); // boolean
console.log(typeof productInfo); // object
console.log(Array.isArray(tags)); // trueУ прикладі:
productName зберігає рядок;
price зберігає число;
inStock зберігає логічне значення;
tags зберігає масив;
productInfo зберігає об'єкт із властивостями різних типів.
typeof для перевірки масивуconst items = [1, 2, 3];
console.log(typeof items); // objectДля перевірки масиву використовуйте:
console.log(Array.isArray(items)); // truenull і undefinedlet value;
console.log(value === undefined); // true
console.log(value === null); // falseЯкщо потрібно перевірити відсутнє значення, уточнюйте, яке саме значення очікується: null чи undefined.
== замість ===console.log(0 == false); // true
console.log(0 === false); // falseНеявне перетворення типів може приховати помилку. Для звичайних перевірок надавайте перевагу ===.
constconst number = 10;
// number = 20; // помилкаconst не дає переприсвоїти змінну. Водночас властивості об'єкта, збереженого в const, можна змінювати:
const user = {
name: "Олена"
};
user.name = "Марія"; // дозволеноnumber і bigintconst number = 5;
const bigNumber = 10n;
// number + bigNumber; // помилкаПеред операцією потрібно явно привести значення до одного типу.
JavaScript має динамічну типізацію: тип визначається значенням під час виконання.
Примітивні типи — це string, number, bigint, boolean, undefined, symbol і null.
Об'єкти можуть містити властивості та значення різних типів.
Масиви є спеціальним видом об'єктів для зберігання списків.
Функції є значеннями, які можна викликати, і також належать до об'єктної моделі JavaScript.
Для перевірки типу використовують typeof, а для перевірки масиву — Array.isArray().
Для точного порівняння зазвичай використовують === і !==.
Примітиви копіюються як значення, а об'єкти — як посилання.