Масиви

Вітаю знову.

У попередній лекції ти познайомився з функціями.

Функції допомагають повторно використовувати код, організовувати логіку й не перетворювати програму на суп із копіювання та вставки.

Дуже корисно.

Дуже цивілізовано.

Сьогодні ми переходимо до ще однієї важливої теми в JavaScript.

Масиви.

Масив — це список значень.

Замість того щоб створювати багато окремих змінних, ти можеш зберігати багато значень в одній змінній.

Без масивів код виглядає так:

const student1 = "Anna";
const student2 = "Marco";
const student3 = "Luca";
const student4 = "Sofia";

Це працює.

Але красиво це назвати важко.

Це як носити по одній картоплині в кожній кишені замість того, щоб взяти торбу.

З масивом можна написати так:

const students = ["Anna", "Marco", "Luca", "Sofia"];

Набагато краще.

Одна змінна.

Багато значень.

Менше хаосу.

JavaScript повільно вчиться прибирати у своїй кімнаті.

Майже.

Що Ти Вивчиш

У цій лекції ти вивчиш:

що таке масиви;
як створити масив;
як працюють індекси;
як отримувати елементи масиву;
як змінювати елементи масиву;
як додавати елементи за допомогою push;
як видаляти елементи за допомогою pop;
як перевіряти довжину масиву;
як проходити масив за допомогою циклу;
як використовувати масиви з функціями;
як використовувати масиви з DOM;
як створити маленький список завдань.

Наприкінці цієї лекції ти зрозумієш, як JavaScript зберігає списки даних.

Це великий крок.

Бо реальні сайти повні списків.

Товари.

Користувачі.

Пости блогу.

Пункти меню.

Коментарі.

Завдання.

Фотографії.

Усе є списком, якщо дивитися достатньо довго.

Трохи філософськи.

Але все ще JavaScript.

Що Таке Масив?

Масив — це спеціальна змінна, яка може зберігати багато значень.

Приклад:

const fruits = ["apple", "banana", "orange"];

Тут у нас є одна змінна:

fruits

А всередині неї три значення:

apple
banana
orange

Масив використовує квадратні дужки:

[]

Кожне значення відділяється комою.

Приклад:

const numbers = [10, 20, 30, 40];
const names = ["Anna", "Marco", "Viktor"];
const mixed = ["JavaScript", 2026, true];

Масив може містити рядки, числа, булеві значення та інші дані.

Але зазвичай ми тримаємо схожі дані разом.

Ось так:

const products = ["Laptop", "Mouse", "Keyboard"];

А не так:

const strangeArray = ["Pizza", 42, false, "Збентежений пінгвін"];

JavaScript це дозволяє.

Але якщо щось можна зробити, це ще не означає, що так треба робити.

Дуже важливий урок життя.

І програмування теж.

Створи Проєкт

Створи папку для цієї лекції:

mkdir javascript-lesson5
cd javascript-lesson5
touch index.html
touch script.js

Твій проєкт має виглядати так:

javascript-lesson5/
  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 fruits = ["apple", "banana", "orange"];

console.log(fruits);

Онови браузер.

Ти маєш побачити:

["apple", "banana", "orange"]

Вітаю.

Ти створив свій перший масив.

Виглядає просто.

Але це один із найважливіших інструментів у JavaScript.

Змінна зберігає одне значення.

Масив зберігає багато значень.

Ось різниця.

Маленькі дужки.

Велика сила.

Індекси Масиву

Кожен елемент у масиві має свою позицію.

Ця позиція називається індексом.

Важливо:

JavaScript починає рахувати з нуля.

Не з одиниці.

З нуля.

Бо програмісти подивилися на нормальний рахунок і сказали:

“Ні. Занадто зручно.”

Приклад:

const fruits = ["apple", "banana", "orange"];

console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);

Результат:

apple
banana
orange

Структура така:

Index 0 -> apple
Index 1 -> banana
Index 2 -> orange

Отже, перший елемент — це:

fruits[0]

А не:

fruits[1]

Це одна з найчастіших помилок початківців.

Не хвилюйся.

Усі так роблять.

Потім усі страждають.

Потім усі запам’ятовують.

Це природний шлях JavaScript-мудрості.

Отримання Елементів Масиву

Ти можеш отримати будь-який елемент за допомогою його індексу.

Приклад:

const languages = ["HTML", "CSS", "JavaScript"];

console.log(languages[0]);
console.log(languages[1]);
console.log(languages[2]);

Результат:

HTML
CSS
JavaScript

Якщо спробувати отримати індекс, якого не існує:

console.log(languages[5]);

Результат:

undefined

Чому?

Бо елемента з індексом 5 немає.

JavaScript не панікує.

Він просто каже:

undefined

Тобто:

“Я тут нічого не знайшов, друже.”

Дуже спокійно.

Навіть підозріло спокійно.

Зміна Елементів Масиву

Ти можеш змінити елемент у масиві.

Приклад:

const fruits = ["apple", "banana", "orange"];

fruits[1] = "kiwi";

console.log(fruits);

Результат:

["apple", "kiwi", "orange"]

Елемент з індексом 1 було змінено.

Було:

banana

Стало:

kiwi

Банан покинув будівлю.

Без пояснень.

Без прощання.

Просто JavaScript.

Додавання Елементів за Допомогою push

Щоб додати елемент у кінець масиву, використовуємо push.

Приклад:

const fruits = ["apple", "banana"];

fruits.push("orange");

console.log(fruits);

Результат:

["apple", "banana", "orange"]

push додає новий елемент у кінець.

Ще один приклад:

const tasks = ["study JavaScript", "drink coffee"];

tasks.push("build a website");

console.log(tasks);

Результат:

["study JavaScript", "drink coffee", "build a website"]

Це корисно, коли користувач щось додає.

Нове завдання.

Новий товар.

Нове повідомлення.

Нову проблему.

Особливо останнє.

Веброзробка любить нові проблеми.

Видалення Елементів за Допомогою pop

Щоб видалити останній елемент з масиву, використовуємо pop.

Приклад:

const fruits = ["apple", "banana", "orange"];

fruits.pop();

console.log(fruits);

Результат:

["apple", "banana"]

pop видаляє останній елемент.

Він також може повернути видалений елемент:

const fruits = ["apple", "banana", "orange"];

const removedFruit = fruits.pop();

console.log(removedFruit);
console.log(fruits);

Результат:

orange
["apple", "banana"]

Апельсин було видалено.

Але ми зберегли його у змінну.

Дуже драматично.

Дуже організовано.

Довжина Масиву

Щоб перевірити, скільки елементів є в масиві, використовуємо .length.

Приклад:

const fruits = ["apple", "banana", "orange"];

console.log(fruits.length);

Результат:

Це говорить нам, що в масиві три елементи.

Ще один приклад:

const students = ["Anna", "Marco", "Luca", "Sofia"];

console.log(`There are ${students.length} students.`);

Результат:

There are 4 students.

.length дуже корисний.

Особливо коли треба пройти масив за допомогою циклу.

І так.

Цикли вже йдуть.

Не тікай.

Вони дружні.

Переважно.

Проходження Масиву

Уяви, що в нас є такий масив:

const fruits = ["apple", "banana", "orange"];

Ми могли б вивести кожен елемент вручну:

console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);

Це працює.

Але це не гнучко.

А якщо в нас 100 елементів?

Писати 100 разів console.log?

Ні.

У нас є гідність.

Ми використовуємо цикл.

Приклад:

const fruits = ["apple", "banana", "orange"];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Результат:

apple
banana
orange

Як це працює?

let i = 0

Починаємо з індексу 0.

i < fruits.length

Продовжуємо, поки i менше за довжину масиву.

i++

Після кожного проходу збільшуємо i.

Потім:

fruits[i]

отримує поточний елемент.

Це дуже поширений шаблон у JavaScript.

Ти бачитимеш його всюди.

Як пил.

Але корисний пил.

Цикл for...of

Є також простіший спосіб проходити масиви.

Приклад:

const fruits = ["apple", "banana", "orange"];

for (const fruit of fruits) {
  console.log(fruit);
}

Результат:

apple
banana
orange

Це цикл for...of.

Він чистий і легко читається.

Використовуй його, коли хочеш одразу отримувати кожен елемент.

Приклад:

const names = ["Anna", "Marco", "Viktor"];

for (const name of names) {
  console.log(`Hello, ${name}!`);
}

Результат:

Hello, Anna!
Hello, Marco!
Hello, Viktor!

Дуже гарно.

Дуже читабельно.

Без драми з індексами.

for чи for...of?

Використовуй звичайний цикл for, коли тобі потрібен індекс.

Приклад:

const products = ["Laptop", "Mouse", "Keyboard"];

for (let i = 0; i < products.length; i++) {
  console.log(`${i}: ${products[i]}`);
}

Результат:

0: Laptop
1: Mouse
2: Keyboard

Використовуй for...of, коли тобі потрібне тільки значення.

Приклад:

const products = ["Laptop", "Mouse", "Keyboard"];

for (const product of products) {
  console.log(product);
}

Результат:

Laptop
Mouse
Keyboard

Просте правило:

Якщо потрібен індекс — використовуй for.

Якщо потрібен тільки елемент — використовуй for...of.

JavaScript дає вибір.

Іноді забагато.

Але ці два варіанти справді корисні.

Масиви та Умови

Ти можеш використовувати умови всередині циклів.

Приклад:

const prices = [10, 25, 50, 5, 100];

for (const price of prices) {
  if (price > 20) {
    console.log(`Expensive item: €${price}`);
  }
}

Результат:

Expensive item: €25
Expensive item: €50
Expensive item: €100

Це потужно.

Ти можеш фільтрувати дані.

Знаходити важливі елементи.

Перевіряти правила.

Приклад:

const ages = [12, 18, 25, 16, 40];

for (const age of ages) {
  if (age >= 18) {
    console.log(`${age} can enter.`);
  } else {
    console.log(`${age} cannot enter.`);
  }
}

Результат:

12 cannot enter.
18 can enter.
25 can enter.
16 cannot enter.
40 can enter.

Масиви зберігають дані.

Цикли проходять по даних.

Умови приймають рішення.

JavaScript починає виглядати як маленький офісний працівник.

Трохи втомлений.

Але продуктивний.

Масиви та Функції

Масиви дуже добре працюють з функціями.

Приклад:

function showProducts(products) {
  for (const product of products) {
    console.log(product);
  }
}

const products = ["Laptop", "Mouse", "Keyboard"];

showProducts(products);

Результат:

Laptop
Mouse
Keyboard

Тут функція отримує масив.

Потім проходить по ньому циклом.

Це дуже часто зустрічається в реальних проєктах.

Ще один приклад:

function countItems(items) {
  return items.length;
}

const tasks = ["study", "practice", "build"];

console.log(countItems(tasks));

Результат:

Функції та масиви — хороші друзі.

Функції виконують дії.

Масиви зберігають дані.

Разом вони небезпечні.

У хорошому сенсі.

Переважно.

Створи Список Завдань

Тепер створимо маленьку сторінку, яка показує список завдань.

Онови 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;
    }

    p,
    li {
      font-size: 20px;
      line-height: 1.6;
    }

    ul {
      padding-left: 24px;
    }

    li {
      margin-bottom: 10px;
    }

    .count {
      font-weight: 700;
      color: #2563eb;
    }
  </style>
</head>
<body>
  <h1>Масиви</h1>

  <div class="card">
    <h2>Сьогоднішні Завдання</h2>
    <p id="taskCount" class="count"></p>
    <ul id="taskList"></ul>
  </div>

  <script src="script.js"></script>
</body>
</html>

Тепер онови script.js:

const tasks = [
  "Learn arrays",
  "Practice loops",
  "Build a small project",
  "Drink coffee"
];

const taskListElement = document.getElementById("taskList");
const taskCountElement = document.getElementById("taskCount");

function showTaskCount(tasks) {
  taskCountElement.textContent = `You have ${tasks.length} tasks today.`;
}

function showTasks(tasks) {
  for (const task of tasks) {
    const listItem = document.createElement("li");
    listItem.textContent = task;
    taskListElement.appendChild(listItem);
  }
}

showTaskCount(tasks);
showTasks(tasks);

Онови браузер.

Ти маєш побачити список завдань на сторінці.

JavaScript взяв масив і створив з нього HTML-елементи.

Це важливо.

Дуже важливо.

Бо багато реальних сайтів працюють саме так:

отримують дані;
зберігають дані в масиві;
проходять по масиву;
створюють HTML;
показують усе користувачу.

Це не просто теорія.

Це реальна веброзробка.

Маленька.

Проста.

Але реальна.

Браузер більше не декоративна картопля.

Він працює.

Як Працює Цей Код

Цей масив зберігає завдання:

const tasks = [
  "Learn arrays",
  "Practice loops",
  "Build a small project",
  "Drink coffee"
];

Це знаходить список в HTML:

const taskListElement = document.getElementById("taskList");

Це знаходить абзац з кількістю завдань:

const taskCountElement = document.getElementById("taskCount");

Ця функція показує, скільки в нас завдань:

function showTaskCount(tasks) {
  taskCountElement.textContent = `You have ${tasks.length} tasks today.`;
}

Ця функція створює елементи списку:

function showTasks(tasks) {
  for (const task of tasks) {
    const listItem = document.createElement("li");
    listItem.textContent = task;
    taskListElement.appendChild(listItem);
  }
}

Це запускає обидві функції:

showTaskCount(tasks);
showTasks(tasks);

Зверни увагу на важливу річ.

Масив містить дані.

Функції вирішують, що робити з цими даними.

Це допомагає тримати код у порядку.

Не ідеально.

Але краще.

Ідеальність усе одно підозріла.

Типові Помилки

Забути, що Масиви Починаються з Нуля

Неправильне очікування:

const fruits = ["apple", "banana", "orange"];

console.log(fruits[1]);

Можна очікувати:

apple

Але отримаєш:

banana

Бо перший елемент має індекс 0.

Правильно:

console.log(fruits[0]);

Результат:

apple

JavaScript починає з нуля.

Прийми це.

Попий води.

Йди далі.

Використання Індексу, Якого Не Існує

Приклад:

const fruits = ["apple", "banana", "orange"];

console.log(fruits[10]);

Результат:

undefined

Елемента з індексом 10 немає.

JavaScript не сердиться.

Там просто порожньо.

Як у холодильнику після опівночі.

Використання `<=` Замість `<` у Циклі

Неправильно:

const fruits = ["apple", "banana", "orange"];

for (let i = 0; i <= fruits.length; i++) {
  console.log(fruits[i]);
}

Це може вивести:

apple
banana
orange
undefined

Чому?

Бо останній правильний індекс — 2.

А fruits.length дорівнює 3.

Правильно:

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

Використовуй <.

Не <=.

Маленький знак.

Велика різниця.

Як один гвинтик у стільці.

Ніби дрібниця.

А потім ти сидиш на підлозі.

Забути Очистити Список

Якщо запустити функцію багато разів, вона може додати ті самі елементи кілька разів.

Приклад:

function showTasks(tasks) {
  for (const task of tasks) {
    const listItem = document.createElement("li");
    listItem.textContent = task;
    taskListElement.appendChild(listItem);
  }
}

Якщо ця функція запуститься двічі, завдання з’являться двічі.

Щоб цього уникнути, спочатку очисти список:

function showTasks(tasks) {
  taskListElement.innerHTML = "";

  for (const task of tasks) {
    const listItem = document.createElement("li");
    listItem.textContent = task;
    taskListElement.appendChild(listItem);
  }
}

Це видаляє старий вміст перед додаванням нового.

Дуже корисно.

Особливо коли сторінка починає дублювати елементи, як зламаний принтер.

Практика

Створи масив з назвою favoriteLanguages.

Він має містити щонайменше три мови програмування.

Приклад:

const favoriteLanguages = ["JavaScript", "Python", "Java"];

Виведи кожну мову за допомогою циклу for...of.

Приклад:

for (const language of favoriteLanguages) {
  console.log(language);
}

Потім створи масив з назвою scores.

Приклад:

const scores = [10, 25, 8, 40, 15];

Виведи тільки результати, більші за 20.

Приклад:

for (const score of scores) {
  if (score > 20) {
    console.log(score);
  }
}

Запусти код.

Зміни значення.

Зламай його.

Полагодь його.

Це все ще найкращий спосіб навчання.

JavaScript любить практику.

І іноді жертви.

Але переважно практику.

Мінічелендж

Створи маленьку сторінку з:

заголовком;
абзацом, який показує, скільки елементів є у списку;
порожнім <ul>;
масивом товарів;
функцією, яка показує всі товари на сторінці.

Приклад масиву:

const products = [
  "Laptop",
  "Mouse",
  "Keyboard",
  "Monitor"
];

Створи функцію:

function showProducts(products) {
  // create list items here
}

Бонус:

Додай ще одну функцію з назвою showProductCount.

Вона має показати повідомлення:

There are 4 products.

Використай:

products.length

Цей челендж дуже близький до реальної веброзробки.

У тебе є дані.

Ти показуєш дані.

Ти тримаєш логіку у функціях.

Так ми уникаємо спагеті.

Або хоча б готуємо кращі спагеті.

Підсумок

Сьогодні ти вивчив:

масиви зберігають багато значень;
масиви використовують квадратні дужки;
кожен елемент масиву має індекс;
індекси в JavaScript починаються з нуля;
можна отримувати елементи за індексом;
можна змінювати елементи масиву;
push додає елемент у кінець;
pop видаляє останній елемент;
.length показує кількість елементів;
цикли можуть проходити по масивах;
for...of — чистий спосіб читати елементи;
масиви добре працюють з функціями;
масиви можуть створювати HTML-елементи динамічно.

Це великий крок.

Масиви всюди в JavaScript.

Коли ти бачиш список товарів, постів, користувачів, завдань, коментарів або фотографій, десь за сценою, швидше за все, працює масив.

Тихо.

Втомлено.

Але корисно.

Наступна Лекція

У наступній лекції ми вивчимо об’єкти.

Об’єкти допомагають зберігати дані більш структуровано.

Бо іноді цього недостатньо:

const user = "Viktor";

Іноді потрібно ось так:

const user = {
  name: "Viktor",
  age: 33,
  role: "Developer"
};

Масиви — для списків.

Об’єкти — для деталей.

Разом вони всюди.

JavaScript стає серйозним.

Все ще дивним.

Але серйозним.

Масиви

Що Ти Вивчиш

Що Таке Масив?

Створи Проєкт

Напиши HTML

Твій Перший Масив

Індекси Масиву

Отримання Елементів Масиву

Зміна Елементів Масиву

Додавання Елементів за Допомогою push

Видалення Елементів за Допомогою pop

Довжина Масиву

Проходження Масиву

Цикл for...of

for чи for...of?

Масиви та Умови

Масиви та Функції

Створи Список Завдань

Як Працює Цей Код

Типові Помилки

Забути, що Масиви Починаються з Нуля

Використання Індексу, Якого Не Існує

Використання <= Замість < у Циклі

Забути Очистити Список

Практика

Мінічелендж

Підсумок

Наступна Лекція

Використання `<=` Замість `<` у Циклі