# Основи JavaScript: Масиви та Цикли  > Скетчноут від [Tomomi Imura](https://twitter.com/girlie_mac) ## Тест перед лекцією [Тест перед лекцією](https://ff-quizzes.netlify.app/web/quiz/13) Задумувалися, як вебсайти відстежують товари у кошику або показують список ваших друзів? Тут у гру вступають масиви та цикли. Масиви — це як цифрові контейнери, які зберігають кілька елементів інформації, а цикли дозволяють працювати з усіма цими даними ефективно, без повторення коду. Разом ці дві концепції формують основу для обробки інформації у ваших програмах. Ви навчитеся переходити від ручного написання кожного кроку до створення розумного, ефективного коду, який може обробляти сотні чи навіть тисячі елементів швидко. До кінця цього уроку ви зрозумієте, як виконувати складні завдання з даними лише кількома рядками коду. Давайте дослідимо ці важливі концепції програмування. [](https://youtube.com/watch?v=1U4qTyq02Xw "Масиви") [](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Цикли") > 🎥 Натисніть на зображення вище, щоб переглянути відео про масиви та цикли. > Ви можете пройти цей урок на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)! ## Масиви Уявіть масиви як цифрову картотеку — замість зберігання одного документа в кожній шухляді, ви можете організувати кілька пов'язаних елементів в одному структурованому контейнері. У термінах програмування масиви дозволяють зберігати кілька елементів інформації в одному організованому пакеті. Чи створюєте ви фотогалерею, керуєте списком завдань чи відстежуєте високі результати в грі, масиви забезпечують основу для організації даних. Давайте подивимося, як вони працюють. ✅ Масиви всюди навколо нас! Чи можете ви придумати реальний приклад масиву, наприклад, масив сонячних панелей? ### Створення масивів Створити масив дуже просто — просто використовуйте квадратні дужки! ```javascript // Empty array - like an empty shopping cart waiting for items const myArray = []; ``` **Що тут відбувається?** Ви щойно створили порожній контейнер за допомогою квадратних дужок `[]`. Уявіть це як порожню полицю в бібліотеці — вона готова до зберігання будь-яких книг, які ви хочете там організувати. Ви також можете заповнити свій масив початковими значеннями прямо з самого початку: ```javascript // Your ice cream shop's flavor menu const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; // A user's profile info (mixing different types of data) const userData = ["John", 25, true, "developer"]; // Test scores for your favorite class const scores = [95, 87, 92, 78, 85]; ``` **Цікаві моменти:** - Ви можете зберігати текст, числа або навіть значення true/false в одному масиві - Просто розділяйте кожен елемент комою — легко! - Масиви ідеально підходять для зберігання пов'язаної інформації разом ### Індексація масивів Ось щось, що може здатися незвичним спочатку: масиви нумерують свої елементи, починаючи з 0, а не з 1. Ця індексація з нуля має коріння в тому, як працює пам'ять комп'ютера — це програмна конвенція з ранніх днів мов програмування, таких як C. Кожне місце в масиві отримує свій власний номер адреси, який називається **індексом**. | Індекс | Значення | Опис | |-------|-------|-------------| | 0 | "Шоколад" | Перший елемент | | 1 | "Полуниця" | Другий елемент | | 2 | "Ваніль" | Третій елемент | | 3 | "Фісташка" | Четвертий елемент | | 4 | "Рокі Роуд" | П'ятий елемент | ✅ Чи дивує вас, що масиви починаються з індексу нуль? У деяких мовах програмування індекси починаються з 1. Це цікава історія, яку ви можете [прочитати на Вікіпедії](https://en.wikipedia.org/wiki/Zero-based_numbering). **Доступ до елементів масиву:** ```javascript const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; // Access individual elements using bracket notation console.log(iceCreamFlavors[0]); // "Chocolate" - first element console.log(iceCreamFlavors[2]); // "Vanilla" - third element console.log(iceCreamFlavors[4]); // "Rocky Road" - last element ``` **Розбираємо, що тут відбувається:** - **Використовує** квадратні дужки з номером індексу для доступу до елементів - **Повертає** значення, збережене на конкретній позиції в масиві - **Починає** рахунок з 0, роблячи перший елемент індексом 0 **Зміна елементів масиву:** ```javascript // Change an existing value iceCreamFlavors[4] = "Butter Pecan"; console.log(iceCreamFlavors[4]); // "Butter Pecan" // Add a new element at the end iceCreamFlavors[5] = "Cookie Dough"; console.log(iceCreamFlavors[5]); // "Cookie Dough" ``` **У наведеному вище прикладі ми:** - **Змінили** елемент з індексом 4 з "Рокі Роуд" на "Масляний Пекан" - **Додали** новий елемент "Тісто для печива" на індекс 5 - **Автоматично розширили** довжину масиву при додаванні за межі поточних границь ### Довжина масиву та основні методи Масиви мають вбудовані властивості та методи, які значно спрощують роботу з даними. **Визначення довжини масиву:** ```javascript const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; console.log(iceCreamFlavors.length); // 5 // Length updates automatically as array changes iceCreamFlavors.push("Mint Chip"); console.log(iceCreamFlavors.length); // 6 ``` **Основні моменти:** - **Повертає** загальну кількість елементів у масиві - **Оновлюється** автоматично при додаванні або видаленні елементів - **Надає** динамічний підрахунок, корисний для циклів та перевірки **Основні методи масивів:** ```javascript const fruits = ["apple", "banana", "orange"]; // Add elements fruits.push("grape"); // Adds to end: ["apple", "banana", "orange", "grape"] fruits.unshift("strawberry"); // Adds to beginning: ["strawberry", "apple", "banana", "orange", "grape"] // Remove elements const lastFruit = fruits.pop(); // Removes and returns "grape" const firstFruit = fruits.shift(); // Removes and returns "strawberry" // Find elements const index = fruits.indexOf("banana"); // Returns 1 (position of "banana") const hasApple = fruits.includes("apple"); // Returns true ``` **Розуміння цих методів:** - **Додає** елементи за допомогою `push()` (в кінці) та `unshift()` (на початку) - **Видаляє** елементи за допомогою `pop()` (в кінці) та `shift()` (на початку) - **Знаходить** елементи за допомогою `indexOf()` та перевіряє існування за допомогою `includes()` - **Повертає** корисні значення, такі як видалені елементи або позиції індексів ✅ Спробуйте самі! Використовуйте консоль вашого браузера, щоб створити та змінити масив власного створення. ## Цикли Уявіть знамените покарання з романів Чарльза Дікенса, де учні повинні були багато разів писати одну й ту ж фразу на дошці. Уявіть, що ви могли б просто сказати комусь "напиши це речення 100 разів", і це було б зроблено автоматично. Саме це роблять цикли для вашого коду. Цикли — це як мати невтомного помічника, який може повторювати завдання без помилок. Чи потрібно вам перевірити кожен елемент у кошику або показати всі фотографії в альбомі, цикли ефективно справляються з повторенням. JavaScript пропонує кілька типів циклів на вибір. Давайте розглянемо кожен з них і зрозуміємо, коли їх використовувати. ### Цикл for Цикл `for` — це як встановлення таймера — ви точно знаєте, скільки разів хочете, щоб щось сталося. Він дуже організований і передбачуваний, що робить його ідеальним, коли ви працюєте з масивами або потрібно щось підрахувати. **Структура циклу for:** | Компонент | Призначення | Приклад | |-----------|---------|----------| | **Ініціалізація** | Встановлює початкову точку | `let i = 0` | | **Умова** | Коли продовжувати | `i < 10` | | **Інкремент** | Як оновлювати | `i++` | ```javascript // Counting from 0 to 9 for (let i = 0; i < 10; i++) { console.log(`Count: ${i}`); } // More practical example: processing scores const testScores = [85, 92, 78, 96, 88]; for (let i = 0; i < testScores.length; i++) { console.log(`Student ${i + 1}: ${testScores[i]}%`); } ``` **Крок за кроком, ось що відбувається:** - **Ініціалізує** змінну лічильника `i` на 0 на початку - **Перевіряє** умову `i < 10` перед кожною ітерацією - **Виконує** блок коду, якщо умова істинна - **Збільшує** `i` на 1 після кожної ітерації за допомогою `i++` - **Зупиняється**, коли умова стає хибною (коли `i` досягає 10) ✅ Запустіть цей код у консолі браузера. Що станеться, якщо ви внесете невеликі зміни до лічильника, умови або виразу ітерації? Чи можете ви змусити його працювати у зворотному напрямку, створюючи зворотний відлік? ### Цикл while Цикл `while` — це як сказати "продовжуй робити це, поки..." — ви можете не знати точно, скільки разів він буде виконуватися, але знаєте, коли зупинитися. Він ідеально підходить для таких речей, як запитування користувача, поки він не надасть потрібну інформацію, або пошук даних, поки ви не знайдете те, що шукаєте. **Характеристики циклу while:** - **Продовжує** виконання, поки умова істинна - **Вимагає** ручного управління будь-якими змінними лічильника - **Перевіряє** умову перед кожною ітерацією - **Ризикує** стати нескінченним циклом, якщо умова ніколи не стане хибною ```javascript // Basic counting example let i = 0; while (i < 10) { console.log(`While count: ${i}`); i++; // Don't forget to increment! } // More practical example: processing user input let userInput = ""; let attempts = 0; const maxAttempts = 3; while (userInput !== "quit" && attempts < maxAttempts) { userInput = prompt(`Enter 'quit' to exit (attempt ${attempts + 1}):`); attempts++; } if (attempts >= maxAttempts) { console.log("Maximum attempts reached!"); } ``` **Розуміння цих прикладів:** - **Керує** змінною лічильника `i` вручну всередині тіла циклу - **Збільшує** лічильник, щоб уникнути нескінченних циклів - **Демонструє** практичний випадок використання з введенням користувача та обмеженням спроб - **Включає** механізми безпеки для запобігання нескінченному виконанню ### Сучасні альтернативи циклам JavaScript пропонує сучасний синтаксис циклів, який може зробити ваш код більш читабельним і менш схильним до помилок. **Цикл for...of (ES6+):** ```javascript const colors = ["red", "green", "blue", "yellow"]; // Modern approach - cleaner and safer for (const color of colors) { console.log(`Color: ${color}`); } // Compare with traditional for loop for (let i = 0; i < colors.length; i++) { console.log(`Color: ${colors[i]}`); } ``` **Основні переваги for...of:** - **Усуває** управління індексами та потенційні помилки на одиницю - **Надає** прямий доступ до елементів масиву - **Покращує** читабельність коду та зменшує складність синтаксису **Метод forEach:** ```javascript const prices = [9.99, 15.50, 22.75, 8.25]; // Using forEach for functional programming style prices.forEach((price, index) => { console.log(`Item ${index + 1}: $${price.toFixed(2)}`); }); // forEach with arrow functions for simple operations prices.forEach(price => console.log(`Price: $${price}`)); ``` **Що потрібно знати про forEach:** - **Виконує** функцію для кожного елемента масиву - **Надає** як значення елемента, так і індекс як параметри - **Не може** бути зупинений раніше (на відміну від традиційних циклів) - **Повертає** undefined (не створює новий масив) ✅ Чому б ви обрали цикл for замість циклу while? 17 тисяч користувачів мали те ж питання на StackOverflow, і деякі думки [можуть бути цікавими для вас](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript). ## Цикли та масиви Поєднання масивів із циклами створює потужні можливості обробки даних. Це поєднання є основою багатьох програмних завдань, від відображення списків до обчислення статистики. **Традиційна обробка масивів:** ```javascript const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; // Classic for loop approach for (let i = 0; i < iceCreamFlavors.length; i++) { console.log(`Flavor ${i + 1}: ${iceCreamFlavors[i]}`); } // Modern for...of approach for (const flavor of iceCreamFlavors) { console.log(`Available flavor: ${flavor}`); } ``` **Давайте розберемо кожен підхід:** - **Використовує** властивість довжини масиву для визначення меж циклу - **Доступається** до елементів за індексом у традиційних циклах for - **Надає** прямий доступ до елементів у циклах for...of - **Обробляє** кожен елемент масиву рівно один раз **Практичний приклад обробки даних:** ```javascript const studentGrades = [85, 92, 78, 96, 88, 73, 89]; let total = 0; let highestGrade = studentGrades[0]; let lowestGrade = studentGrades[0]; // Process all grades with a single loop for (let i = 0; i < studentGrades.length; i++) { const grade = studentGrades[i]; total += grade; if (grade > highestGrade) { highestGrade = grade; } if (grade < lowestGrade) { lowestGrade = grade; } } const average = total / studentGrades.length; console.log(`Average: ${average.toFixed(1)}`); console.log(`Highest: ${highestGrade}`); console.log(`Lowest: ${lowestGrade}`); ``` **Ось як працює цей код:** - **Ініціалізує** змінні для відстеження суми та екстремальних значень - **Обробляє** кожну оцінку за допомогою одного ефективного циклу - **Накопичує** загальну суму для обчислення середнього значення - **Відстежує** найвищі та найнижчі значення під час ітерації - **Обчислює** фінальну статистику після завершення циклу ✅ Експериментуйте з циклом по масиву власного створення у консолі браузера. --- ## Виклик агента GitHub Copilot 🚀 Використовуйте режим Agent, щоб виконати наступний виклик: **Опис:** Створіть комплексну функцію обробки даних, яка поєднує масиви та цикли для аналізу набору даних і створення значущих висновків. **Завдання:** Створіть функцію `analyzeGrades`, яка приймає масив об'єктів оцінок студентів (кожен містить властивості name і score) і повертає об'єкт зі статистикою, включаючи найвищу оцінку, найнижчу оцінку, середню оцінку, кількість студентів, які склали (score >= 70), та масив імен студентів, які отримали оцінку вище середньої. Використовуйте щонайменше два різних типи циклів у вашому рішенні. Дізнайтеся більше про [режим Agent](https://code.visualstudio.com/blogs/2025/02/24/introducing-copilot-agent-mode) тут. ## 🚀 Виклик JavaScript пропонує кілька сучасних методів масивів, які можуть замінити традиційні цикли для конкретних завдань. Досліджуйте [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map), [filter](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/filter), та [reduce](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce). **Ваш виклик:** Переробіть приклад з оцінками студентів, використовуючи щонайменше три різних методи масивів. Зверніть увагу, наскільки чистішим і більш читабельним стає код із сучасним синтаксисом JavaScript. ## Тест після лекції [Тест після лекції](https://ff-quizzes.netlify.app/web/quiz/14) ## Огляд та самостійне навчання Масиви в JavaScript мають багато методів, які надзвичайно корисні для маніпуляції даними. [Прочитайте про ці методи](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) і спробуйте деякі з них (наприклад, push, pop, slice і splice) на масиві власного створення. ## Завдання [Цикл по масиву](assignment.md) --- **Відмова від відповідальності**: Цей документ був перекладений за допомогою сервісу автоматичного перекладу [Co-op Translator](https://github.com/Azure/co-op-translator). Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.