Тема 6

Функції та цикли

Що таке функції та цикли

Функції — це блоки коду, які виконують певну задачу та можуть бути викликані з різних місць програми. Вони приймають аргументи та можуть повертати результат. Тобто функції це набір команд, які виконуються, коли ти їх викликаєш.

Цикли — це конструкції, що дозволяють виконувати блок коду кілька разів. Існують різні типи циклів, зокрема for, який виконується певну кількість разів, і while, який виконується, поки умова є істинною. Тобто, цикли дозволяють виконувати одну й ту саму задачу кілька разів.

Функції (function)

Що таке функції?

Уяви, що у тебе є коробка, в яку можна покласти різні предмети. Кожного разу, коли ти хочеш використати цю коробку, ти просто відкриваєш її, і вона дає тобі те, що ти поклав усередину. Ось так і працює функція в програмуванні!
Функція — це набір команд, які виконуються разом, коли ти їх викликаєш. Ти можеш створити функцію для того, щоб робити різні речі, наприклад, додавати числа або виводити повідомлення.

    function greet() {
        console.log("Hello, friend!");
    }

Це функція, яка просто виводить на екран слово "Hello, friend!". Щоб її використати, треба написати:

greet(); // викликаємо функцію

Масиви використовуються для зберігання даних, коли вам потрібна фіксована кількість елементів, і ви заздалегідь знаєте, скільки елементів вам потрібно. Вони є потужним інструментом для роботи з багатьма типами завдань у програмуванні.

Синтаксис функції (function)

Щоб створити функцію в JavaScript, ми використовуємо слово function, а потім вказуємо ім'я функції і, якщо треба, параметри, які ця функція може приймати.

function functionName(parameters) {
  // код функції
}

Наприклад, давайте створимо функцію add, яка приймає два параметра (числа) a і b та повертає їх суму:

function add(a, b) {
  return a + b;  // повертає суму a і b
}

Оскільки функція може повертати значення, ми також можемо присвоїти його потрібній нам змінній, для прикладу ось так:

let result = add(5, 3);  // результат буде 8

У функціях результат (або return-значення) — це те, що функція повертає після виконання свого коду. Коли функція виконується, вона може виконати певні дії (обчислення, операції з даними) і повернути результат за допомогою ключового слова return.
Якщо функція не містить return, вона повертає значення undefined за замовчуванням.

Цикли (`for` та `while`)

Що таке цикли?

Цикли — це спеціальні інструменти, які дозволяють нам виконувати одну й ту ж саму задачу багато разів. Це дуже корисно, коли нам потрібно, наприклад, вивести чиселко від 1 до 5.
Існує кілька типів циклів, але ми поговоримо про два найпопулярніших: for та while.

Синтаксис циклу for

Цикл for використовується, коли ми знаємо, скільки разів потрібно виконати певну дію. Давайте напише приклад і розберемо його:

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

приймає три параметри

Ініціалізація (let i = 1) — це перший параметр, де оголошується і ініціалізується змінна лічильник (в даному випадку, змінна i зі значенням 1). Цей параметр виконується один раз на початку циклу.
Умова (i <= 5) — це другий параметр, який визначає, коли цикл повинен зупинитися. Цикл продовжується до тих пір, поки умова істинна. У даному випадку, цикл триватиме, доки значення i менше або дорівнює 5.
Оновлення (i++) — це третій параметр, який виконується після кожної ітерації циклу. Тут значення змінної i збільшується на 1 після кожного проходження циклу.

Це дозволяє циклу виконувати код всередині фігурних дужок певну кількість разів, доки умова є істинною.
Цей цикл виведе числа від 1 до 5.

i++ — це коли до змінної i додають 1. Тобто, якщо i було 3, після i++ стане 4.
i-- — це коли від змінної i віднімають 1. Тобто, якщо i було 3, після i-- стане 2.
i += 2 — це коли до змінної i додають певне число, наприклад 2. Якщо i було 3, після i += 2 стане 5.
i -= 2 — це коли від змінної i віднімають певне число, наприклад 2. Якщо i було 5, після i -= 2 стане 3.
i *= 2 — це коли змінну i множать на певне число, наприклад на 2. Якщо i було 3, після i *= 2 стане 6.
i /= 2 — це коли змінну i ділять на певне число, наприклад на 2. Якщо i було 6, після i /= 2 стане 3.

Тобто, ++ і -- додають або віднімають по 1, а += і -= додають або віднімають більше значення, яке ви вкажете, а *= і /= використовується для множення або ділення змінної на певне число.

Синтаксис циклу while

Цикл while працює, поки умова залишається правильною. Хоч for є доволі зручним, але інколи є задачі, які потребують саме while, для коректного виконання задачі.
Для прикладу, уявімо, що ти хочеш писати програму, яка зупиниться, тільки якщо користувач введе число більше за 100. Оскільки ми не знаємо наперед, скільки спроб знадобиться, використовувати while є кращим вибором, тому що ми повторюємо цикл, доки умова не стане хибною.

let number = 0;
while (number <= 100) {
  number = prompt("Введіть число більше за 100:");
}console.log(number)

Тут цикл while повторюватиметься, доки користувач не введе число більше за 100. Якщо б ми використовували for, нам би довелося придумувати умови і контролювати зупинку циклу, що було б значно складніше. Цей приклад показує, що while є зручнішим, коли кількість повторів не визначена заздалегідь.

Стрілочна функція => та атрибут `onclick`=""

Стрілочна функція =>

Стрілочна функція є коротким записом функцій в JavaScript. Вона дозволяє не писати зайвих слів, і вона також має деякі інші особливості (наприклад, не змінює контекст this).
Наприклад, уявімо, що нам треба зробити функцію, яка перевіряє, чи число є парним:

let isEven = (number) => number % 2 === 0;
console.log(isEven(4));  // Виведе: true
console.log(isEven(7));  // Виведе: false

(number) => number % 2 === 0 — це стрілочна функція, яка приймає число number і повертає true, якщо воно парне, і false, якщо непарне.

onclick="" — Атрибут обробки події для кнопки

Атрибут onclick задає, яку функцію треба викликати, коли користувач натискає на кнопку. Як працює: У HTML для кнопки можна прописати атрибут onclick і всередині нього вказати JavaScript-функцію, яку треба виконати при натисканні. Наприклад, ми хочемо вивести повідомлення, коли користувач натискає кнопку:

html

<button onclick="alert('Привіт!')">Натисни на мене</button>

Приклад з функцією: Ми можемо зробити, щоб при натисканні на кнопку викликалася певна функція. Наприклад, створимо просту функцію, яка виводить інформацію про вибраний колір:

html

<button onclick="showColor('Червоний')">Червоний</button>
<button onclick="showColor('Синій')">Синій</button>
<script>
  function showColor(color) {
    alert(`Ви вибрали колір: ${color}`);
  }
</script>

Коли натискається кнопка "Червоний", викликається функція showColor з параметром 'Червоний', і виводиться повідомлення "Ви вибрали колір: Червоний".
Коли натискається кнопка "Синій", виводиться "Ви вибрали колір: Синій".

Таблиця для for, while, стрілочної функції => і атрибуту onclick=""

build info

compiler: 2.0.5.1 · 4054EF9BF6C4510A
built: 2026-11-08 14:31:25 UTC

Функції та цикли

Функції (function)

Цикли (for та while)

Стрілочна функція => та атрибут onclick=""

Цикли (`for` та `while`)

Стрілочна функція => та атрибут `onclick`=""