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

JavaScript arrow functions — паперові літачки як компактний спосіб запуску функцій

У минулому уроці ми вивчили основи функцій. Тепер перейдемо до arrow functions — сучасного синтаксису, та callback-функцій — концепції, яка пронизує весь JavaScript.

Arrow Functions (стрілочні функції)

ES6 (2015) додав компактніший спосіб писати функції:

// Function expression
const add = function(a, b) {
  return a + b;
};

// Arrow function — те саме, коротше
const add = (a, b) => {
  return a + b;
};

// Ще коротше — якщо тіло з одного виразу
const add = (a, b) => a + b;

Правила скорочення

// Один параметр — дужки необов'язкові
const double = x => x * 2;

// Без параметрів — порожні дужки обов'язкові
const greet = () => "Привіт!";

// Кілька параметрів — дужки обов'язкові
const sum = (a, b) => a + b;

// Кілька рядків — потрібні { } та return
const calculate = (a, b) => {
  const result = a * b;
  return result + 10;
};

Callback-функції

Callback — це функція, яку передають як аргумент іншій функції:

function executeTask(taskName, callback) {
  console.log(`Починаю: ${taskName}`);
  callback(); // виконуємо передану функцію
  console.log(`Завершено: ${taskName}`);
}

executeTask("завантаження", () => {
  console.log("Дані завантажено!");
});
// Починаю: завантаження
// Дані завантажено!
// Завершено: завантаження

Навіщо потрібні callbacks?

Callbacks — основа асинхронного JavaScript. Ось реальний приклад:

// setTimeout — виконує callback через N мілісекунд
console.log("Початок");

setTimeout(() => {
  console.log("Минуло 2 секунди!");
}, 2000);

console.log("Кінець");

// Порядок: "Початок" → "Кінець" → (через 2 сек) "Минуло 2 секунди!"

Зверни увагу: "Кінець" з'являється РАНІШЕ за повідомлення setTimeout. JavaScript не чекає — продовжує виконання. Це називається асинхронність (детально розглянемо в Block 6).

Функції вищого порядку

Функція, яка приймає або повертає іншу функцію, називається функцією вищого порядку:

// Функція, що повертає функцію
function createGreeter(greeting) {
  return (name) => `${greeting}, ${name}!`;
}

const helloGreeter = createGreeter("Привіт");
const byeGreeter = createGreeter("До побачення");

console.log(helloGreeter("Олексій")); // "Привіт, Олексій!"
console.log(byeGreeter("Марія"));     // "До побачення, Марія!"

Це дуже потужна концепція. Методи масивів (map, filter, reduce), які ми вивчимо в наступних уроках — це функції вищого порядку.

Rest-параметри (...)

Коли не знаєш скільки аргументів буде:

function sum(...numbers) {
  let total = 0;
  for (const num of numbers) {
    total += num;
  }
  return total;
}

console.log(sum(1, 2, 3));       // 6
console.log(sum(10, 20, 30, 40)); // 100

...numbers збирає всі аргументи в масив.

Комбінування з звичайними параметрами

function log(level, ...messages) {
  console.log(`[${level}]`, ...messages);
}

log("INFO", "Сервер запущено", "Порт 3000");
// [INFO] Сервер запущено Порт 3000

Функції як значення

В JavaScript функції — це значення. Їх можна зберігати в змінних, масивах, об'єктах:

// В масиві
const operations = [
  (a, b) => a + b,
  (a, b) => a - b,
  (a, b) => a * b,
];

console.log(operations[0](5, 3)); // 8 (додавання)
console.log(operations[2](5, 3)); // 15 (множення)

// В об'єкті
const calculator = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
};

console.log(calculator.add(10, 3)); // 13

Практика

// 1. Arrow function для фільтрації
const isPositive = (num) => num > 0;

console.log(isPositive(5));   // true
console.log(isPositive(-3));  // false

// 2. Функція з callback
function repeat(n, action) {
  for (let i = 0; i < n; i++) {
    action(i);
  }
}

repeat(3, (i) => console.log(`Ітерація ${i}`));
// Ітерація 0
// Ітерація 1
// Ітерація 2

// 3. Функція, що повертає функцію
const multiplier = (factor) => (number) => number * factor;

const double = multiplier(2);
const triple = multiplier(3);

console.log(double(5));  // 10
console.log(triple(5));  // 15

Підсумок

• Arrow function: (a, b) => a + b — сучасний синтаксис для функцій
• Один параметр — без дужок: x => x * 2
• Одне вираження — без return: (a, b) => a + b
• Callback — функція, передана як аргумент іншій функції
• setTimeout — приклад асинхронного callback
• Rest-параметри: ...args — збирає аргументи в масив
• Функції — це значення, їх можна зберігати і передавати

Що далі?

У наступному уроці вивчимо масиви (частина 1) — як зберігати та працювати з колекціями даних.