Функції — частина 1

JavaScript функції — кавомашина перетворює зерна на еспресо як функція параметри на результат

Ми вже написали досить багато коду. Але уяви, що тобі потрібно порахувати суму масиву в 10 різних місцях програми. Копіювати один і той же код 10 разів? Ні! Для цього є функції — блоки коду, які можна викликати скільки завгодно разів.

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

Функція — це іменований блок коду, який виконує конкретну задачу:

// Оголошення функції
function greet() {
  console.log("Привіт, світе!");
}

// Виклик функції
greet(); // "Привіт, світе!"
greet(); // "Привіт, світе!" — можна викликати скільки завгодно

Параметри — вхідні дані

Функції можуть приймати параметри — дані, з якими вони працюють:

function greet(name) {
  console.log(`Привіт, ${name}!`);
}

greet("Олексій");  // "Привіт, Олексій!"
greet("Марія");    // "Привіт, Марія!"

Кілька параметрів

function add(a, b) {
  console.log(a + b);
}

add(3, 5);   // 8
add(10, 20); // 30

return — повернення значення

Функція може повертати результат:

function add(a, b) {
  return a + b;
}

const result = add(3, 5);
console.log(result); // 8

// Можна використовувати прямо у виразах:
console.log(add(10, 20) * 2); // 60

Після return виконання функції зупиняється:

function checkAge(age) {
  if (age < 0) {
    return "Некоректний вік"; // функція завершується тут
  }
  return age >= 18 ? "Дорослий" : "Неповнолітній";
}

console.log(checkAge(-5)); // "Некоректний вік"
console.log(checkAge(25)); // "Дорослий"

Function Declaration vs Expression

Function Declaration — оголошення

function multiply(a, b) {
  return a * b;
}

Особливість: hoisting — функцію можна викликати ДО оголошення:

console.log(square(5)); // 25 — працює!

function square(x) {
  return x * x;
}

Function Expression — вираз

const multiply = function(a, b) {
  return a * b;
};

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

Значення параметрів за замовчуванням

function greet(name = "гість") {
  console.log(`Привіт, ${name}!`);
}

greet("Олексій"); // "Привіт, Олексій!"
greet();          // "Привіт, гість!" — використовується значення за замовчуванням

Функції як будівельні блоки

Хороша практика — розбивати код на маленькі функції, кожна з яких робить одну річ:

// ❌ Погано — одна велика функція
function processOrder(items) {
  let total = 0;
  for (const item of items) { total += item.price; }
  const tax = total * 0.2;
  const finalTotal = total + tax;
  console.log(`Сума: ${total}, Податок: ${tax}, Разом: ${finalTotal}`);
}

// ✅ Добре — кожна функція робить одну річ
function calculateTotal(items) {
  let total = 0;
  for (const item of items) { total += item.price; }
  return total;
}

function calculateTax(amount) {
  return amount * 0.2;
}

function formatOrder(total, tax) {
  return `Сума: ${total}, Податок: ${tax}, Разом: ${total + tax}`;
}

Область видимості (Scope)

Змінні, оголошені всередині функції, не видні зовні:

function sayHi() {
  const message = "Привіт!"; // локальна змінна
  console.log(message); // ✅ працює
}

sayHi();
// console.log(message); // ❌ ReferenceError — message не існує тут

Але функція бачить зовнішні змінні:

const siteName = "Learn Programming";

function welcome(userName) {
  console.log(`${userName}, ласкаво просимо на ${siteName}!`);
}

welcome("Олексій"); // "Олексій, ласкаво просимо на Learn Programming!"

Практика

// 1. Функція перевірки парності
function isEven(num) {
  return num % 2 === 0;
}
console.log(isEven(4));  // true
console.log(isEven(7));  // false

// 2. Функція максимуму з двох чисел
function max(a, b) {
  return a > b ? a : b;
}
console.log(max(10, 25)); // 25

// 3. Функція підрахунку голосних
function countVowels(str) {
  const vowels = "aeiouаеиіоуєїюяAEIOUАЕИІОУЄЇЮЯ";
  let count = 0;
  for (let i = 0; i < str.length; i++) {
    if (vowels.includes(str[i])) {
      count++;
    }
  }
  return count;
}
console.log(countVowels("Привіт")); // 2

Підсумок

• Функція — іменований блок коду для перевикористання
• Параметри — вхідні дані функції
• return — повертає результат (без нього — undefined)
• Declaration (function name()) — hoisting працює
• Expression (const name = function()) — hoisting не працює
• Значення за замовчуванням — function(x = 10) якщо аргумент не передано
• Scope — локальні змінні не видні зовні функції

Що далі?

У наступному уроці вивчимо arrow functions, callback-функції та інші просунуті концепції.