Callbacks

Οι Callbacks είναι ο παραδοσιακός τρόπος διαχείρισης ασύγχρονων λειτουργιών στη JavaScript. Μια callback είναι μια συνάρτηση που περνιέται ως παράμετρος σε μια άλλη συνάρτηση και καλείται όταν ολοκληρωθεί η ασύγχρονη λειτουργία. Ας δούμε κάποια παραδείγματα:

function greet(name, callback) {
    console.log('Hello, ' + name + '!');
    callback(); // Εκτέλεση της callback συνάρτησης
}

function sayGoodbye() {
    console.log('Goodbye!');
}

// Κλήση της greet συνάρτησης με την sayGoodBye ως callback
greet('Maria', sayGoodbye);

// Hello, Maria!
// Goodbye!

Στο παράδειγμα αυτό, η sayGoodBye δίνεται ως callback στη greet, η οποία την καλεί μετά τον χαιρετισμό.

function fetchData(callback) {
    console.log('Λήψη δεδομένων...');

    setTimeout(() => {
        console.log('Τα δεδομένα ελήφθησαν!');
        callback();
    }, 2000);
}

function processData() {
    console.log('Επεξεργασία δεδομένων...');
}

// Κλήση της συνάρτησης με callback
fetchData(processData);

// Λήψη δεδομένων...
// Τα δεδομένα ελήφθησαν!
// Επεξεργασία δεδομένων...

setTimeout

Η setTimeout είναι μια ενσωματωμένη συνάρτηση της JavaScript που καθυστερεί την εκτέλεση κώδικα για συγκεκριμένο χρονικό διάστημα. Στο παραπάνω παράδειγμα, η setTimeout προσομοιώνει μια ασύγχρονη λειτουργία (π.χ. αίτημα δικτύου) που διαρκεί 2000 milliseconds (2 δευτερόλεπτα). Είναι ένα από τα πιο απλά παραδείγματα ασύγχρονου κώδικα στη JavaScript.

Σε αυτό το παράδειγμα η επεξεργασία δεδομένων (μέσω της processData) εκτελείται μόνο αφού ολοκληρωθεί η λήψη δεδομένων (μέσω της fetchData), αξιοποιώντας έτσι την ασύγχρονη συμπεριφορά.

Χειρισμός Σφαλμάτων

Στις callbacks χρησιμοποιούμε το μοτίβο error-first όπου το πρώτο όρισμα της callback είναι το σφάλμα (error) και το δεύτερο τα δεδομένα (data).

const getUser = (id, callback) => {
    if (id <= 0) {
        callback(new Error('Μη έγκυρο ID'));
        return;
    }
    callback(null, { id, name: 'Χρήστης ' + id });
};

// Παράδειγμα επιτυχίας
getUser(123, (error, user) => {
    if (error) {
        console.error(error.message);
        return;
    }
    console.log(user.name); // ✅ "Χρήστης 123"
});

// Παράδειγμα σφάλματος
getUser(-123, (error, user) => {
    if (error) {
        console.error(error.message); // ❌ "Μη έγκυρο ID"
        return;
    }
    console.log(user.name);
});

Συνηθισμένες Χρήσεις

Οι callbacks χρησιμοποιούνται συχνά σε:

// Node.js - Ανάγνωση αρχείου
fs.readFile('config.json', 'utf8', (error, data) => {
    if (error) return console.error('Σφάλμα:', error);
    console.log('Περιεχόμενο:', data);
});

// Browser - Χειρισμός συμβάντων
document.getElementById('button').addEventListener('click', () => {
    console.log('Το κουμπί πατήθηκε!');
});

Callback hell

Ωστόσο, οι callbacks μπορούν να οδηγήσουν σε callback hell (ή pyramid of doom) όταν έχουμε πολλές ένθετες ασύγχρονες λειτουργίες:

fetchUserData((error, userData) => {
    if (error) {
        console.error('Σφάλμα κατά την ανάκτηση δεδομένων χρήστη:', error);
        return;
    }
    getUserPosts(userData.id, (error, posts) => {
        if (error) {
            console.error('Σφάλμα κατά την ανάκτηση αναρτήσεων:', error);
            return;
        }
        getPostComments(posts[0].id, (error, comments) => {
            if (error) {
                console.error('Σφάλμα κατά την ανάκτηση σχολίων:', error);
                return;
            }
            // Αυτή η ένθετη δομή μπορεί να γίνει δύσκολα διαχειρίσιμη
        });
    });
});

Αυτό το φαινόμενο κάνει τον κώδικα:

• Δύσκολο στην ανάγνωση
• Δύσκολο στη συντήρηση
• Επιρρεπή σε λάθη

Βελτίωση της Αναγνωσιμότητας των Callbacks

Υπάρχουν καλές πρακτικές που μπορούμε να ακολουθήσουμε για να βελτιώσουμε την αναγνωσιμότητα του κώδικα με callbacks. Μία από αυτές είναι να χρησιμοποιούμε Ονομασμένες Συναρτήσεις (Named Functions).

Ονομασμένες Συναρτήσεις

const handleUserData = (error, userData) => {
    if (error) {
        console.error('Σφάλμα κατά την ανάκτηση δεδομένων χρήστη:', error);
        return;
    }
    getUserPosts(userData.id, handlePosts);
};

const handlePosts = (error, posts) => {
    if (error) {
        console.error('Σφάλμα κατά την ανάκτηση αναρτήσεων:', error);
        return;
    }
    getPostComments(posts[0].id, handleComments);
};

const handleComments = (error, comments) => {
    if (error) {
        console.error('Σφάλμα κατά την ανάκτηση σχολίων:', error);
        return;
    }
    console.log('Σχόλια:', comments);
};

fetchUserData(handleUserData);

Η διαφορά μεταξύ των δύο προσεγγίσεων μπορεί να απεικονιστεί ως εξής:

Callback Hell (Πυραμίδα 🔺)

fetchUserData(
    └── getUserPosts(
        └── getPostComments(
            └── handleResult()
        )
    )
)

Ονομασμένες Συναρτήσεις (Αλυσίδα 🔗)

fetchUserData → handleUserData
                     │
                     ↓
               getUserPosts → handlePosts
                                 │
                                 ↓
                         getPostComments → handleComments

Η προσέγγιση με ονομασμένες συναρτήσεις δημιουργεί μια οριζόντια ροή αντί για μια βαθιά ένθετη δομή, κάνοντας τον κώδικα πιο ευανάγνωστο και ευκολότερο στη συντήρηση.

Σύγκριση με Σύγχρονες Προσεγγίσεις

Για να αντιμετωπίσουμε τα προβλήματα των callbacks, η JavaScript έχει εισαγάγει πιο σύγχρονους τρόπους διαχείρισης ασύγχρονων λειτουργιών:

Προσέγγιση	Πλεονεκτήματα	Μειονεκτήματα
Callbacks	Απλή υλοποίηση, ευρεία υποστήριξη	Callback hell, δύσκολος χειρισμός σφαλμάτων
Promises	Αλυσιδωτές λειτουργίες, καλύτερος χειρισμός σφαλμάτων	Πιο περίπλοκη σύνταξη από τα callbacks
Async/Await	Συγχρονική σύνταξη, εύκολη ανάγνωση	Απαιτεί κατανόηση των Promises

Συμβουλή

Παρόλο που οι callbacks θεωρούνται παλαιότερη τεχνολογία, είναι σημαντικό να τις κατανοήσουμε καθώς πολλές βιβλιοθήκες και APIs εξακολουθούν να τις χρησιμοποιούν.

Στην επόμενη ενότητα, θα εξετάσουμε τα Promises, που προσφέρουν έναν πιο κομψό τρόπο διαχείρισης ασύγχρονων λειτουργιών.