JavaScript: об'єкти та JSON

Об'єкти: властивості та методи

📖 Теорія

Об'єкт — колекція пар ключ-значення.

const user = {
name: 'Олена',
age: 28,
city: 'Львів',
greet() {

JavaScript
1class="hl-keyword">return `Привіт, я ${this.name} з ${this.city}`;
2  }
3};
4
5class="hl-comment">// Доступ до властивостей
6user.name          class="hl-comment">// class="hl-string">'Олена' — крапкова нотація
7user[class="hl-string">'age']        class="hl-comment">// 28 — дужкова нотація (для динамічних ключів)
8user.greet()       class="hl-comment">// class="hl-string">'Привіт, я Олена з Львів'
9
10class="hl-comment">// Додавання та зміна
11user.email = class="hl-string">'olena@example.com';
12user.age = 29;
13
14class="hl-comment">// Видалення
15delete user.city;
16
17class="hl-comment">// Перевірка наявності

'name' in user // true
user.hasOwnProperty('email') // true

💡 Приклад коду
Вивід:

                            
📝 ЗАВДАННЯ (3)
1.
Завдання 1: Створення об'єкта
10 XP
Створи об'єкт book з властивостями:
- title: 'JavaScript: Повний посібник'
- author: 'David Flanagan'
- year: 2020
- pages: 706

Виведи назву та автора у форматі: 'JavaScript: Повний посібник — David Flanagan'
💡 Підказка: Доступ через крапку: book.title
🔓 Розв'язок:
const book = {
  title: 'JavaScript: Повний посібник',
  author: 'David Flanagan',
  year: 2020,
  pages: 706
};
console.log(`${book.title} — ${book.author}`);
Вивід:

                                

2.
Завдання 2: Методи об'єкта
20 XP
Створи об'єкт rectangle з:
- width: 10
- height: 5
- метод area() що повертає площу
- метод perimeter() що повертає периметр

Виведи:
Площа: 50
Периметр: 30
💡 Підказка: Всередині методу використовуй this.width та this.height
🔓 Розв'язок:
const rectangle = {
  width: 10,
  height: 5,
  area() { return this.width * this.height; },
  perimeter() { return 2 * (this.width + this.height); }
};
console.log(`Площа: ${rectangle.area()}`);
console.log(`Периметр: ${rectangle.perimeter()}`);
Вивід:

                                

3.
Завдання 3: Динамічний доступ
30 XP
Маємо об'єкт config = { host: 'localhost', port: 3000, debug: true, version: '1.0' }.
1. Виведи всі ключі через Object.keys()
2. Виведи всі значення через Object.values()
3. Виведи пари ключ=значення через Object.entries() та forEach
💡 Підказка: Object.keys(), Object.values(), Object.entries() повертають масиви
🔓 Розв'язок:
const config = { host: 'localhost', port: 3000, debug: true, version: '1.0' };
console.log(Object.keys(config));
console.log(Object.values(config));
Object.entries(config).forEach(([k, v]) => console.log(`${k}=${v}`));
Вивід: