Callback-функции: асинхронная передача управления

Что такое callback-функции? 🧩

Callback-функции — это функции, которые передаются в другие функции как аргументы и вызываются позже, когда произойдет какое-то событие или завершится задача. Они позволяют JavaScript работать асинхронно, не блокируя основной поток выполнения.

function greet(name, callback) {
    console.log(`Привет, ${name}!`);
    callback(); // Вызываем callback после основного кода
}

function sayGoodbye() {
    console.log("До встречи!");
}

greet("Анна", sayGoodbye);
// Вывод:
// Привет, Анна!
// До встречи!

Зачем нужны callback-функции? 🤔

JavaScript однопоточен, но многие операции (запросы к серверу, чтение файлов, таймеры) занимают время. Callback-функции помогают отложить выполнение кода, пока не завершится асинхронная задача.

console.log("Начало");

setTimeout(() => {
    console.log("Это выполнится через 2 секунды");
}, 2000);

console.log("Конец");
// Вывод:
// Начало
// Конец
// Это выполнится через 2 секунды

💡 Совет: Если бы не было callback-функций, пришлось бы ждать завершения всех операций, и интерфейс бы "зависал".

Как работают callback-функции в реальных задачах? 🌍

Пример 1: Загрузка данных с сервера

function fetchData(url, onSuccess, onError) {
    fetch(url)
        .then(response => response.json())
        .then(data => onSuccess(data))
        .catch(error => onError(error));
}

fetchData(
    "https://api.example.com/data",
    (data) => console.log("Данные получены:", data),
    (error) => console.error("Ошибка:", error)
);

Пример 2: Чтение файла в Node.js

const fs = require("fs");

fs.readFile("file.txt", "utf8", (err, data) => {
    if (err) {
        console.error("Ошибка чтения файла:", err);
        return;
    }
    console.log("Содержимое файла:", data);
});

Проблемы callback-функций и как их избежать 🚧

🔥 Callback Hell (Ад колбэков)

Когда много асинхронных операций вложены друг в друга, код становится нечитаемым.

getUser(userId, (user) => {
    getPosts(user.id, (posts) => {
        getComments(posts[0].id, (comments) => {
            console.log(comments);
        });
    });
});

✅ Решение:

Именованные функции — выносите callback-функции в отдельные функции.
Промисы (Promises) — современная альтернатива (но это тема отдельного урока).
Async/Await — синтаксический сахар над промисами.

📌 Важно: Если вы еще не знакомы с промисами, посмотрите уроки Данилы Бежина на YouTube — там всё объясняется просто и с примерами.

Практика: Создаём свою функцию с callback 🛠️

Давайте напишем функцию processArray, которая принимает массив и callback, применяя его к каждому элементу.

function processArray(arr, callback) {
    const result = [];
    for (let item of arr) {
        result.push(callback(item));
    }
    return result;
}

const numbers = [1, 2, 3, 4];
const squared = processArray(numbers, (num) => num * num);

console.log(squared); // [1, 4, 9, 16]

Итоги 🎯

Callback-функции позволяют работать с асинхронным кодом в JavaScript.
Они передаются как аргументы и вызываются после завершения операции.
Проблема "Callback Hell" решается именованными функциями, промисами и async/await.
Практикуйтесь! Попробуйте написать свои функции с callback-ами.

Теперь вы знаете, как передавать управление асинхронно. Попробуйте применить это в своих проектах! 🚀