Тема, Мета, Місце розташування сайту, звіту
Тема: «Об’єкт. Методи об’єкта. Масив об’єктів. Деструктуризація об’єктів. Callback. Стрілочні функції. Стрілочні функції як колбеки. Перебираючі методи масиву.»
Мета: Придбати практичні навички роботи з об’єктами. Методи об’єкта. Callback. Стрілочні функції. Стрілочні функції як колбеки. Реалізація програм засовами мови JAVASCRIPT
Посилання на виконані завдання
- Репозиторій власного веб-застосунку (GitHub): посилання
- Власний веб-застосунок (Жива сторінка): посилання
- Репозиторій звітного HTML-документа (GitHub): посилання
- Звітний HTML-документ (Жива сторінка): посилання
- Репозиторій самостійної роботи №1 (GitHub): посилання
- Самостійна робота №1 (Жива сторінка): посилання
Завдання №1. Реалізація варіантів 2, 4, 6, 8, 9, 10
У межах першого завдання реалізовано шість прикладів роботи з об’єктами, масивами об’єктів, callback-функціями, стрілочними функціями та перебираючими методами масиву. Результати наведено після кожного фрагмента коду.
Варіант 2. Функція getProductDetails з колбек-функціями
const products = [
{ id: 1, name: "Ноутбук", price: 25000 },
{ id: 2, name: "Смартфон", price: 12000 },
{ id: 3, name: "Навушники", price: 1500 },
];
function getProductDetails(productId, successCallback, errorCallback) {
const product = products.find((p) => p.id === productId);
if (product) {
successCallback(product);
} else {
errorCallback(`Товар з id=${productId} не знайдено`);
}
}
getProductDetails(
2,
(product) => console.log("✅ Знайдено товар:", product),
(errorMessage) => console.log("❌ Помилка:", errorMessage)
);
getProductDetails(
10,
(product) => console.log("✅ Знайдено товар:", product),
(errorMessage) => console.log("❌ Помилка:", errorMessage)
);Вивід у консолі:
✅ Знайдено товар: { id: 2, name: "Смартфон", price: 12000 }
❌ Помилка: Товар з id=10 не знайденоВаріант 4. Фільтрація та сортування майбутніх концертів
const concerts = {
Київ: new Date("2020-04-01"),
Умань: new Date("2025-07-02"),
Вінниця: new Date("2020-04-21"),
Одеса: new Date("2025-03-15"),
Хмельницький: new Date("2020-04-18"),
Харків: new Date("2025-07-10"),
};
const now = new Date();
const upcomingCities = Object.entries(concerts)
.filter(([, date]) => date > now)
.sort(([, d1], [, d2]) => d1 - d2)
.map(([city]) => city);
console.log("📅 Майбутні концерти (міста у хронологічному порядку):", upcomingCities);Вивід у консолі:
📅 Майбутні концерти (міста у хронологічному порядку): [ "Одеса", "Умань", "Харків" ]Варіант 6. Знижка 30% для медикаментів з ціною понад 300 грн
const medicines = [
{ name: "Noshpa", price: 170 },
{ name: "Analgin", price: 55 },
{ name: "Quanil", price: 310 },
{ name: "Alphacholine", price: 390 },
];
const updatedMedicines = medicines.map((med, index) => {
const hasDiscount = med.price > 300;
const newPrice = hasDiscount ? med.price * 0.7 : med.price;
return {
...med,
id: index + 1,
price: Number(newPrice.toFixed(2)),
discountApplied: hasDiscount,
};
});
console.log("💊 Оновлений список медикаментів зі знижками:", updatedMedicines);Вивід у консолі:
💊 Оновлений список медикаментів зі знижками:
[
{ name: "Noshpa", price: 170, id: 1, discountApplied: false },
{ name: "Analgin", price: 55, id: 2, discountApplied: false },
{ name: "Quanil", price: 217, id: 3, discountApplied: true },
{ name: "Alphacholine", price: 273, id: 4, discountApplied: true }
]Варіант 8. Функція-конструктор Storage
function Storage(initialItems) {
this.items = Array.isArray(initialItems) ? [...initialItems] : [];
}
Storage.prototype.getItems = function () {
return this.items;
};
Storage.prototype.addItem = function (item) {
this.items.push(item);
};
Storage.prototype.removeItem = function (item) {
this.items = this.items.filter((i) => i !== item);
};
const storage = new Storage(["apple", "banana", "mango"]);
console.log("📦 Початкові товари на складі:", storage.getItems());
storage.addItem("peach");
console.log("📦 Після додавання 'peach':", storage.getItems());
storage.removeItem("banana");
console.log("📦 Після видалення 'banana':", storage.getItems());Вивід у консолі:
📦 Початкові товари на складі: [ "apple", "banana", "mango" ]
📦 Після додавання 'peach': [ "apple", "banana", "mango", "peach" ]
📦 Після видалення 'banana': [ "apple", "mango", "peach" ]Варіант 9. Підрахунок кількості тегів
const tweets = [
{ id: "000", likes: 5, tags: ["js", "nodejs"] },
{ id: "001", likes: 2, tags: ["html", "css"] },
{ id: "002", likes: 17, tags: ["html", "js", "nodejs"] },
{ id: "003", likes: 8, tags: ["css", "react"] },
{ id: "004", likes: 0, tags: ["js", "nodejs", "react"] },
];
const tagStats = tweets
.flatMap((tweet) => tweet.tags)
.reduce((acc, tag) => {
acc[tag] = (acc[tag] || 0) + 1;
return acc;
}, {});
console.log("🏷️ Кількість використань кожного тегу:", tagStats);Вивід у консолі:
🏷️ Кількість використань кожного тегу:
{ js: 3, nodejs: 3, html: 2, css: 2, react: 2 }Варіант 10. Перевірка правильності дужок
function checkBrackets(str) {
const stack = [];
const pairs = {
")": "(",
"]": "[",
"}": "{",
};
for (const char of str) {
if (char === "(" || char === "[" || char === "{") {
stack.push(char);
} else if (char === ")" || char === "]" || char === "}") {
if (stack.pop() !== pairs[char]) {
return false;
}
}
}
return stack.length === 0;
}
const example1 = "function test() { return [1, 2, 3]; }";
const example2 = "function fail( { ] }";
console.log(`🔍 Рядок 1: "${example1}" →`, checkBrackets(example1));
console.log(`🔍 Рядок 2: "${example2}" →`, checkBrackets(example2));Вивід у консолі:
🔍 Рядок 1: "function test() { return [1, 2, 3]; }" → true
🔍 Рядок 2: "function fail( { ] }" → falseЗавдання №2. Реалізація варіантів 2, 4, 6 та Calculator
У другому завданні продемонстровано використання перебираючих методів масиву ( some , map , sort ) та реалізовано клас Calculator із підтримкою ланцюжкових викликів методів. Усі приклади перевірені через консоль браузера.
Варіант 2. Перевірка наявності користувача молодше 20 років
const people = [
{ name: "John", age: 27 },
{ name: "Jane", age: 31 },
{ name: "Bob", age: 19 },
];
const hasUnder20 = people.some((person) => person.age < 20);
console.log("👥 Чи є людина молодше 20 років?", hasUnder20);Вивід у консолі:
👥 Чи є людина молодше 20 років? trueВаріант 4. Формування масиву квадратів елементів
const numbersForSquares = [1, 2, 3, 4, 5];
const squares = numbersForSquares.map((num) => num * num);
console.log("🧮 Квадрати елементів масиву:", squares);Вивід у консолі:
🧮 Квадрати елементів масиву: [1, 4, 9, 16, 25]Варіант 6. Сортування користувачів за віком за зростанням
const users = [
{ name: "John", age: 27 },
{ name: "Jane", age: 31 },
{ name: "Bob", age: 19 },
];
const sortedByAge = [...users].sort((a, b) => a.age - b.age);
console.log("📊 Користувачі, відсортовані за віком:", sortedByAge);Вивід у консолі:
📊 Користувачі, відсортовані за віком:
[
{ name: "Bob", age: 19 },
{ name: "John", age: 27 },
{ name: "Jane", age: 31 }
]Calculator. Ланцюжкові арифметичні операції
Реалізовано клас Calculator , який дозволяє послідовно виконувати арифметичні операції над числом за допомогою ланцюжкових викликів методів.
class Calculator {
constructor() {
this._value = 0;
}
number(value) {
this._value = Number(value);
return this;
}
getResult() {
return this._value;
}
add(value) {
this._value += Number(value);
return this;
}
subtract(value) {
this._value -= Number(value);
return this;
}
multiply(value) {
this._value *= Number(value);
return this;
}
divide(value) {
const num = Number(value);
if (num === 0) {
throw new Error("Ділення на 0 неможливе");
}
this._value /= num;
return this;
}
}
const calc = new Calculator();
const result = calc
.number(10)
.add(5)
.subtract(3)
.multiply(4)
.divide(2)
.getResult();
console.log("🧮 Результат обчислень Calculator:", result);Вивід у консолі:
🧮 Результат обчислень Calculator: 24Висновки
Під час виконання лабораторної роботи було опрацьовано створення та використання об’єктів у JavaScript, роботу з їх методами, масивами об’єктів і деструктуризацією. Реалізовано приклади застосування callback-функцій, стрілочних функцій і перебираючих методів масиву, таких як map , filter , reduce , sort та some . У результаті роботи вдалося закріпити навички роботи з даними, навчитися будувати гнучкі функціональні структури, моделювати поведінку об’єктів через функції-конструктори й класи та виконувати послідовні обчислення за допомогою ланцюжкових викликів методів. Отримані знання є базовими для розуміння сучасної парадигми об’єктно-орієнтованого програмування в JavaScript і подальшої розробки інтерактивних вебзастосунків.