Обʼєкти
Вітаю знову.
У попередній лекції ти познайомився з масивами.
Масиви допомагають зберігати списки значень.
Дуже корисно.
Дуже потужно.
Дуже дружньо до квадратних дужок.
Але іноді простого списку недостатньо.
Наприклад, це нормально:
const user = "Viktor";
Але що робити, якщо нам потрібно більше інформації?
Імʼя.
Вік.
Email.
Роль.
Країна.
Улюблена мова програмування.
Рівень залежності від кави.
Один рядок — це замало.
Ось тут приходять обʼєкти.
Обʼєкти допомагають зберігати структуровані дані.
Замість того щоб тримати повʼязану інформацію в багатьох окремих змінних, ми можемо зберігати її в одному обʼєкті.
Чистіше.
Розумніше.
Менше хаосу.
JavaScript повільно стає організованим.
Підозріло організованим.
Що Ти Вивчиш
У цій лекції ти вивчиш:
- що таке обʼєкти;
- як створити обʼєкт;
- як працюють властивості та значення;
- як отримувати властивості обʼєкта;
- як змінювати значення в обʼєкті;
- як додавати нові властивості;
- як видаляти властивості;
- як обʼєкти працюють з функціями;
- що таке методи;
- як використовувати обʼєкти з DOM;
- як створити маленьку картку профілю.
Наприкінці цієї лекції ти зрозумієш, як JavaScript описує речі з реального світу.
Користувачів.
Товари.
Курси.
Завдання.
Автомобілі.
Котів.
Навіть розгублених розробників.
Обʼєкти всюди в JavaScript.
Всюди.
Як крапки з комою у старих туторіалах.
Що Таке Обʼєкт?
Обʼєкт — це набір повʼязаних даних.
Приклад:
const user = {
name: "Viktor",
age: 33,
role: "Developer"
};
Цей обʼєкт має три властивості:
name
age
role
Кожна властивість має значення:
Viktor
33
Developer
Структура така:
property: value
Обʼєкти використовують фігурні дужки:
{}
Дуже важливо.
Масиви використовують квадратні дужки:
[]
Обʼєкти використовують фігурні дужки:
{}
Різні дужки.
Різна робота.
JavaScript любить дужки.
Можливо, навіть занадто.
Створи Проєкт
Створи папку для цієї лекції:
mkdir javascript-lesson6
cd javascript-lesson6
touch index.html
touch script.js
Твій проєкт має виглядати так:
javascript-lesson6/
index.html
script.js
Відкрий папку в редакторі.
Ми почнемо з консолі.
Потім використаємо обʼєкти, щоб оновлювати вебсторінку.
Сьогодні без дракона-фреймворка.
Тільки JavaScript.
Все ще дивний.
Але корисний.
Напиши HTML
Відкрий index.html і додай:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Обʼєкти</title>
</head>
<body>
<h1>Обʼєкти</h1>
<p>Відкрий консоль браузера, щоб побачити результат JavaScript.</p>
<script src="script.js"></script>
</body>
</html>
Відкрий файл у браузері.
Відкрий консоль:
- натисни правою кнопкою на сторінці;
- вибери Inspect або Перевірити;
- відкрий вкладку Console.
Тепер JavaScript готовий.
Консоль дивиться.
Знову.
Вона, мабуть, уже знає занадто багато.
Твій Перший Обʼєкт
Відкрий script.js і додай:
const course = {
title: "JavaScript",
level: "Beginner",
lessons: 12
};
console.log(course);
Онови браузер.
Ти маєш побачити обʼєкт у консолі.
Цей обʼєкт представляє курс.
Він має:
title: "JavaScript"
level: "Beginner"
lessons: 12
Одна змінна.
Багато повʼязаних значень.
У цьому сила обʼєктів.
Замість трьох окремих змінних:
const title = "JavaScript";
const level = "Beginner";
const lessons = 12;
ми тримаємо все разом:
const course = {
title: "JavaScript",
level: "Beginner",
lessons: 12
};
Чистіше.
Організованіше.
Менше спагеті.
Більше лазаньї.
Шари.
Порядок.
Професіоналізм.
Дуже дружньо до коду.
І до шлунка.
Властивості та Значення
Обʼєкти містять властивості та значення.
Приклад:
const user = {
name: "Anna",
age: 25,
isStudent: true
};
Тут:
name
це властивість.
"Anna"
це значення.
age
це властивість.
25
це значення.
isStudent
це властивість.
true
це значення.
Схема завжди така:
property: value
Між властивостями використовуємо коми:
const product = {
name: "Laptop",
price: 900,
inStock: true
};
Після останньої властивості кома не обовʼязкова.
Але в сучасному JavaScript часто можна побачити і такий запис:
const product = {
name: "Laptop",
price: 900,
inStock: true,
};
Обидва варіанти правильні.
JavaScript виживе.
Ймовірно.
Отримання Властивостей Обʼєкта
Властивості обʼєкта можна отримувати через крапку.
Це називається dot notation.
Приклад:
const user = {
name: "Viktor",
age: 33,
role: "Developer"
};
console.log(user.name);
console.log(user.age);
console.log(user.role);
Результат:
Viktor
33
Developer
Dot notation означає:
user.name
“Дай мені властивість name з обʼєкта user.”
Дуже читабельно.
Дуже поширено.
Дуже корисно.
Ще один приклад:
const product = {
name: "Keyboard",
price: 49,
color: "black"
};
console.log(`Product: ${product.name}`);
console.log(`Price: €${product.price}`);
Результат:
Product: Keyboard
Price: €49
Обʼєкти допомагають тримати повʼязані дані разом.
Код стає легше розуміти.
А твоє майбутнє “я” стає трохи менш злим.
Bracket Notation
Є ще один спосіб отримувати властивості.
Bracket notation.
Приклад:
const user = {
name: "Viktor",
age: 33
};
console.log(user["name"]);
console.log(user["age"]);
Результат:
Viktor
33
Це теж працює.
Dot notation зазвичай простіша:
user.name
Bracket notation корисна, коли назва властивості збережена у змінній.
Приклад:
const propertyName = "name";
console.log(user[propertyName]);
Результат:
Viktor
Поки що використовуй dot notation більшість часу.
Вона чиста.
Вона проста.
І не виглядає так, ніби JavaScript намагається викликати демона.
Зміна Значень Обʼєкта
Ти можеш змінити значення властивості.
Приклад:
const user = {
name: "Anna",
age: 25
};
user.age = 26;
console.log(user);
Результат:
{name: "Anna", age: 26}
Вік змінився з 25 на 26.
Навіть якщо обʼєкт створений через const, ти все одно можеш змінювати його властивості.
Це важливо.
const означає, що ти не можеш замінити весь обʼєкт.
Але можеш змінювати те, що всередині.
Приклад:
const user = {
name: "Anna",
age: 25
};
user.age = 26;
Це дозволено.
Але це вже ні:
user = {
name: "Marco",
age: 30
};
Це намагається замінити весь обʼєкт.
JavaScript буде сваритися.
І чесно кажучи, цього разу JavaScript має рацію.
Додавання Нових Властивостей
Ти можеш додати нову властивість до обʼєкта.
Приклад:
const user = {
name: "Viktor",
age: 33
};
user.role = "Developer";
console.log(user);
Тепер обʼєкт має нову властивість:
role: "Developer"
Результат:
{name: "Viktor", age: 33, role: "Developer"}
Це корисно, коли пізніше зʼявляється більше інформації.
Приклад:
const product = {
name: "Mouse",
price: 25
};
product.inStock = true;
console.log(product);
Обʼєкти гнучкі.
Іноді навіть занадто гнучкі.
Як викладач йоги, який ще й backend знає.
Потужно.
Але трохи лякає.
Видалення Властивостей
Ти можеш видалити властивість за допомогою delete.
Приклад:
const user = {
name: "Anna",
age: 25,
password: "secret123"
};
delete user.password;
console.log(user);
Результат:
{name: "Anna", age: 25}
Властивість password була видалена.
Добре.
Ніколи не виводь паролі в реальних проєктах.
Ніколи не зберігай паролі так.
Ніколи не довіряй паролю з туторіалу.
Цей приклад тільки для навчання.
Безпека — це не декоративна рослина.
Вона має значення.
Обʼєкти та Функції
Обʼєкти дуже добре працюють з функціями.
Приклад:
function showUser(user) {
console.log(`Name: ${user.name}`);
console.log(`Age: ${user.age}`);
}
const user = {
name: "Viktor",
age: 33
};
showUser(user);
Результат:
Name: Viktor
Age: 33
Функція отримує обʼєкт.
Потім читає властивості з цього обʼєкта.
Це дуже часто зустрічається в реальному JavaScript.
Ще один приклад:
function createProductMessage(product) {
return `${product.name} costs €${product.price}.`;
}
const product = {
name: "Keyboard",
price: 49
};
console.log(createProductMessage(product));
Результат:
Keyboard costs €49.
Обʼєкт містить дані.
Функція використовує ці дані.
Чисто.
Просто.
Майже підозріло нормально.
Методи
Метод — це функція всередині обʼєкта.
Приклад:
const user = {
name: "Viktor",
sayHello: function () {
console.log("Hello!");
}
};
user.sayHello();
Результат:
Hello!
Тут:
sayHello
це метод.
Бо це функція, збережена всередині обʼєкта.
Також можна використовувати дані обʼєкта всередині методу через this.
Приклад:
const user = {
name: "Viktor",
sayHello: function () {
console.log(`Hello, my name is ${this.name}.`);
}
};
user.sayHello();
Результат:
Hello, my name is Viktor.
this.name означає:
“Використай властивість name з цього обʼєкта.”
this може заплутувати.
Дуже заплутувати.
Поки що запамʼятай базову ідею:
Всередині методу обʼєкта this може посилатися на цей обʼєкт.
Не хвилюйся, якщо це здається дивним.
JavaScript зробив this дивним спеціально.
Ймовірно, щоб ми залишалися скромними.
Обʼєкти Всередині Масивів
Обʼєкти та масиви часто працюють разом.
Приклад:
const products = [
{
name: "Laptop",
price: 900
},
{
name: "Mouse",
price: 25
},
{
name: "Keyboard",
price: 49
}
];
console.log(products[0].name);
Результат:
Laptop
Тут у нас масив обʼєктів.
Це надзвичайно поширено.
Дуже поширено.
Майже всюди поширено.
Список користувачів?
Масив обʼєктів.
Список товарів?
Масив обʼєктів.
Список постів блогу?
Масив обʼєктів.
Приклад:
for (const product of products) {
console.log(`${product.name}: €${product.price}`);
}
Результат:
Laptop: €900
Mouse: €25
Keyboard: €49
Це реальний JavaScript.
Дані дуже часто приходять як списки обʼєктів.
Не завжди.
Але дуже часто.
Звикай до цього шаблону.
Він буде ходити за тобою.
Як кеш браузера.
Створи Картку Профілю
Тепер створимо маленьку картку профілю за допомогою обʼєкта.
Онови index.html:
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Обʼєкти</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 700px;
margin: 60px auto;
padding: 0 24px;
background-color: #f3f4f6;
color: #111827;
}
.card {
background-color: white;
padding: 24px;
border: 2px solid #e5e7eb;
border-radius: 18px;
}
h1 {
font-size: 42px;
}
h2 {
font-size: 30px;
margin-bottom: 8px;
}
p {
font-size: 20px;
line-height: 1.6;
}
.badge {
display: inline-block;
padding: 8px 14px;
border-radius: 999px;
background-color: #2563eb;
color: white;
font-weight: 700;
}
</style>
</head>
<body>
<h1>Обʼєкти</h1>
<div class="card">
<h2 id="profileName"></h2>
<p id="profileRole"></p>
<p id="profileCountry"></p>
<span id="profileLevel" class="badge"></span>
</div>
<script src="script.js"></script>
</body>
</html>
Тепер онови script.js:
const profile = {
name: "Viktor",
role: "JavaScript Student",
country: "Italy",
level: "Beginner"
};
const profileNameElement = document.getElementById("profileName");
const profileRoleElement = document.getElementById("profileRole");
const profileCountryElement = document.getElementById("profileCountry");
const profileLevelElement = document.getElementById("profileLevel");
function showProfile(profile) {
profileNameElement.textContent = profile.name;
profileRoleElement.textContent = `Role: ${profile.role}`;
profileCountryElement.textContent = `Country: ${profile.country}`;
profileLevelElement.textContent = profile.level;
}
showProfile(profile);
Онови браузер.
Ти маєш побачити картку профілю.
JavaScript взяв дані з обʼєкта і показав їх на сторінці.
Це важливо.
Дуже важливо.
Бо багато сайтів працюють саме так:
- дані збережені в обʼєктах;
- JavaScript читає обʼєкт;
- JavaScript оновлює HTML;
- користувач бачить гарний інтерфейс.
Обʼєкт — це дані.
DOM — це сторінка.
JavaScript — це офіціант, який несе інформацію з кухні.
Головне, щоб не розлив суп.
Як Працює Цей Код
Цей обʼєкт зберігає дані профілю:
const profile = {
name: "Viktor",
role: "JavaScript Student",
country: "Italy",
level: "Beginner"
};
Ці рядки знаходять HTML-елементи:
const profileNameElement = document.getElementById("profileName");
const profileRoleElement = document.getElementById("profileRole");
const profileCountryElement = document.getElementById("profileCountry");
const profileLevelElement = document.getElementById("profileLevel");
Ця функція показує дані з обʼєкта:
function showProfile(profile) {
profileNameElement.textContent = profile.name;
profileRoleElement.textContent = `Role: ${profile.role}`;
profileCountryElement.textContent = `Country: ${profile.country}`;
profileLevelElement.textContent = profile.level;
}
Це запускає функцію:
showProfile(profile);
Зверни увагу на схему:
Дані живуть в обʼєкті.
Функція читає дані.
Сторінка показує дані.
Цей шаблон всюди.
Зараз простий.
Пізніше потужний.
Типові Помилки
Забути Коми Між Властивостями
Неправильно:
const user = {
name: "Anna"
age: 25
};
Правильно:
const user = {
name: "Anna",
age: 25
};
Використовуй коми між властивостями.
JavaScript вони потрібні.
Він не дуже вміє здогадуватися.
І не читає твою душу.
На щастя.
Використання = Замість :
Неправильно:
const user = {
name = "Anna"
};
Правильно:
const user = {
name: "Anna"
};
Всередині обʼєктів використовуй : між властивістю та значенням.
Не =.
Маленький символ.
Велика різниця.
Класична пастка JavaScript.
Отримання Властивості, Якої Не Існує
Приклад:
const user = {
name: "Anna"
};
console.log(user.email);
Результат:
undefined
Властивості email немає.
JavaScript повертає undefined.
Знову.
Дуже спокійно.
Дуже загадково.
Плутати Масиви та Обʼєкти
Масив:
const colors = ["red", "green", "blue"];
Обʼєкт:
const user = {
name: "Anna",
age: 25
};
Використовуй масиви для списків.
Використовуй обʼєкти для структурованих деталей.
Список імен?
Масив.
Один користувач з багатьма деталями?
Обʼєкт.
Список користувачів?
Масив обʼєктів.
Це шлях.
Практика
Створи обʼєкт з назвою book.
Він має містити:
title;author;pages;isFinished.
Приклад:
const book = {
title: "JavaScript Basics",
author: "InnoMarts",
pages: 120,
isFinished: false
};
Виведи кожну властивість у консоль:
console.log(book.title);
console.log(book.author);
console.log(book.pages);
console.log(book.isFinished);
Потім зміни isFinished на true.
book.isFinished = true;
Виведи обʼєкт ще раз.
Зламай його.
Полагодь його.
Це все ще найкращий учитель.
Окрім кави.
Кава теж учитель.
Суворий.
Мінічелендж
Створи маленьку картку товару.
Створи обʼєкт:
const product = {
name: "JavaScript Course",
price: 49,
category: "Programming",
available: true
};
Створи HTML з:
- назвою товару;
- ціною;
- категорією;
- статусом доступності.
Потім створи функцію:
function showProduct(product) {
// update the page here
}
Якщо available має значення true, покажи:
Available now
Інакше покажи:
Not available
Це дуже близько до реальної веброзробки.
Товари — це обʼєкти.
Користувачі — це обʼєкти.
Замовлення — це обʼєкти.
Курси — це обʼєкти.
Навіть баги іноді виглядають як обʼєкти.
Важкі.
Складні.
Повні властивостей, про які ніхто не просив.
Підсумок
Сьогодні ти вивчив:
- обʼєкти зберігають структуровані дані;
- обʼєкти використовують фігурні дужки;
- дані зберігаються як властивості та значення;
- властивості можна отримувати через dot notation;
- властивості також можна отримувати через bracket notation;
- значення в обʼєкті можна змінювати;
- нові властивості можна додавати;
- властивості можна видаляти;
- функції можуть отримувати обʼєкти;
- методи — це функції всередині обʼєктів;
- масиви можуть містити обʼєкти;
- обʼєкти можуть оновлювати DOM.
Це величезний крок.
Обʼєкти — одна з найважливіших частин JavaScript.
Якщо масиви — це списки, то обʼєкти — це деталі.
Разом вони дозволяють описувати дані з реального світу.
Користувача.
Товар.
Курс.
Завдання.
Повідомлення.
Дуже драматичний банан.
Усе може стати обʼєктом.
JavaScript стає серйозним.
Все ще дивним.
Але серйозним.
Наступна Лекція
У наступній лекції ми більше вивчимо DOM.
DOM дозволяє JavaScript говорити з вебсторінкою.
Змінювати текст.
Змінювати стилі.
Створювати елементи.
Реагувати на користувачів.
Коротко кажучи, DOM — це місце, де JavaScript перестає бути теорією і починає торкатися сторінки.
Обережно.
Зазвичай.