← Назад до курсу

▸ Як працює веб

▸ Перша веб-сторінка

▸ HTML-елементи та текст

▸ HTML-семантика

▸ HTML форми та медіа

▸ CSS основи та селектори

▸ Блокова модель CSS

▸ CSS позиціонування та Flexbox

▸ CSS типографіка та декор

▸ CSS-анімації та адаптивність

▸ Практика HTML/CSS: верстка проєкту

▸ JavaScript: змінні та типи даних

▸ JavaScript: методи рядків та Math

▸ JavaScript: масиви

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

▸ JavaScript: керування потоком та функції

▸ JavaScript та DOM

▸ Node.js основи

▸ Express.js та REST API

▸ SQL та бази даних

▸ CSS Grid: двовимірна розкладка

▸ CSS Custom Properties та теми

▸ JavaScript: Класи та ООП

▸ JavaScript: Обробка помилок

▸ JavaScript: Fetch API та HTTP-запити

▸ JavaScript: Регулярні вирази

▸ npm, package.json та інструменти розробки

▸ Тестування JavaScript з Jest

← До курсу

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

Деструктуризація об'єктів та spread

📖 Теорія

JavaScript

1Деструктуризація об&#039;єктів:
2class="hl-keyword">const { name, age } = user;

💡 Приклад коду

// Перейменування
const { name: userName, age: userAge } = user;

// Значення за замовчуванням
const { role = 'guest', name } = user;

// Вкладена деструктуризація
const { address: { city, zip } } = {
  address: { city: 'Київ', zip: '01001' }
};

// В параметрах функції
function greet({ name, age = 0 }) {
  return `${name}, ${age} років`;
}

// Spread для копіювання та злиття
const copy = { ...user };
const updated = { ...user, age: 29 };  // перезаписує age
const merged = { ...defaults, ...overrides };

// Об'єкт без певної властивості
const { password, ...safeUser } = user;  // safeUser без password

Вивід:

📝 ЗАВДАННЯ (3)

Завдання 1: Деструктуризація

10 XP

Маємо: const product = { id: 42, name: 'Навушники', price: 1500, inStock: true }.
Витягни name, price та inStock через деструктуризацію. Виведи кожне значення.

Вхідні дані (stdin):

🔓 Розв'язок:

const product = { id: 42, name: 'Навушники', price: 1500, inStock: true };
const { name, price, inStock } = product;
console.log(name);
console.log(price);
console.log(inStock);

Вивід:

Завдання 2: Spread та злиття

20 XP

Маємо:
const defaults = { theme: 'light', lang: 'uk', fontSize: 14 };
const userPrefs = { theme: 'dark', fontSize: 18 };

Створи merged як злиття defaults та userPrefs (userPrefs перезаписує defaults). Виведи merged.

Вхідні дані (stdin):

🔓 Розв'язок:

const defaults = { theme: 'light', lang: 'uk', fontSize: 14 };
const userPrefs = { theme: 'dark', fontSize: 18 };
const merged = { ...defaults, ...userPrefs };
console.log(merged);

Вивід:

Завдання 3: Масив об'єктів

30 XP

Маємо масив:
const team = [
{name:'Аліна', role:'frontend', exp:3},
{name:'Богдан', role:'backend', exp:5},
{name:'Віра', role:'frontend', exp:2},
{name:'Гліб', role:'devops', exp:7}
];
Виведи:
1. Імена всіх frontend-розробників
2. Загальний досвід команди
3. Члена з найбільшим досвідом (тільки name та exp)

Вхідні дані (stdin):

🔓 Розв'язок:

const team = [{name:'Аліна',role:'frontend',exp:3},{name:'Богдан',role:'backend',exp:5},{name:'Віра',role:'frontend',exp:2},{name:'Гліб',role:'devops',exp:7}];
console.log(team.filter(m => m.role === 'frontend').map(m => m.name));
console.log(team.reduce((acc, m) => acc + m.exp, 0));
const top = team.reduce((best, m) => m.exp > best.exp ? m : best);
console.log(`${top.name}: ${top.exp}`);

Вивід:

← Попередній урок Наступний урок →