Merge pull request #10 from nikcladis/feature/async-programming-docs

📄 Docs(Async): Add Callbacks subsection

Author: adreaskar

docs-language/asynchronous/2. callbacks.md

@@ -0,0 +1,210 @@
+# Callbacks
+
+Οι **Callbacks** είναι ο παραδοσιακός τρόπος διαχείρισης ασύγχρονων λειτουργιών στη JavaScript. Μια `callback` είναι μια συνάρτηση που περνιέται ως παράμετρος σε μια άλλη συνάρτηση και καλείται όταν ολοκληρωθεί η ασύγχρονη λειτουργία. Ας δούμε κάποια παραδείγματα:
+
+```javascript
+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`, η οποία την καλεί μετά τον χαιρετισμό.
+
+```javascript
+function fetchData(callback) {
+  console.log("Λήψη δεδομένων...");
+
+  setTimeout(() => {
+    console.log("Τα δεδομένα ελήφθησαν!");
+    callback();
+  }, 2000);
+}
+
+function processData() {
+  console.log("Επεξεργασία δεδομένων...");
+}
+
+// Κλήση της συνάρτησης με callback
+fetchData(processData);
+
+// Λήψη δεδομένων...
+// Τα δεδομένα ελήφθησαν!
+// Επεξεργασία δεδομένων...
+
+```
+
+:::info `setTimeout`
+Η `setTimeout` είναι μια ενσωματωμένη συνάρτηση της JavaScript που καθυστερεί την εκτέλεση κώδικα για συγκεκριμένο χρονικό διάστημα. Στο παραπάνω παράδειγμα, η `setTimeout` προσομοιώνει μια ασύγχρονη λειτουργία (π.χ. αίτημα δικτύου) που διαρκεί 2000 milliseconds (2 δευτερόλεπτα). Είναι ένα από τα πιο απλά παραδείγματα ασύγχρονου κώδικα στη JavaScript.
+:::
+
+Σε αυτό το παράδειγμα η επεξεργασία δεδομένων (μέσω της `processData`) εκτελείται μόνο αφού ολοκληρωθεί η λήψη δεδομένων (μέσω της `fetchData`), αξιοποιώντας έτσι την ασύγχρονη συμπεριφορά.
+
+## Χειρισμός Σφαλμάτων
+
+Στις callbacks χρησιμοποιούμε το μοτίβο **error-first** όπου το πρώτο όρισμα της `callback` είναι το σφάλμα (error) και το δεύτερο τα δεδομένα (data).
+
+```javascript
+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 χρησιμοποιούνται συχνά σε:
+
+```javascript
+// 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**) όταν έχουμε πολλές ένθετες ασύγχρονες λειτουργίες:
+
+```javascript
+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).
+
+### Ονομασμένες Συναρτήσεις
+
+```javascript
+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              |
+
+:::tip Συμβουλή
+Παρόλο που οι callbacks θεωρούνται παλαιότερη τεχνολογία, είναι σημαντικό να τις κατανοήσουμε καθώς πολλές βιβλιοθήκες και APIs εξακολουθούν να τις χρησιμοποιούν.
+:::
+
+Στην επόμενη ενότητα, θα εξετάσουμε τα `Promises`, που προσφέρουν έναν πιο κομψό τρόπο διαχείρισης ασύγχρονων λειτουργιών.