Temporal Dead Zone - δεν είναι τόσο τρομακτικό όσο ακούγεται!

Πάμε να δούμε το Temporal Dead Zone στη JavaScript, λοιπόν - το οποίο εκατό τοις εκατό μας ακούγεται απείρως πιο τρομακτικό από όσο είναι στ' αλήθεια και θα μπορούσε να έχει βγει από κάποιο σενάριο ταινίας επιστημονικής φαντασίας.

Ωστόσο, όπως συμβαίνει με πολλούς όρους στον προγραμματισμό (και, αν θέλουμε να το δούμε λίγο πιο φιλοσοφικά, με πολλά πράγματα στη ζωή), είναι πολύ πιο απλό απ' όσο φαίνεται.

Ας ξεκινήσουμε από τα βασικά, όπως κάνουμε πάντα, για να σπάσουμε το πρόβλημα σε μικρότερα κομμάτια.

Με το var, μπορείς να χρησιμοποιήσεις μια μεταβλητή πριν τη δηλώσεις:

console.log(user); // undefined
var user = "Leandros";

Δεν σου παράγει κάποιο error. Απλώς η μεταβλητή δεν έχει ακόμη τιμή ή - πιο σωστά - είναι undefined.

Τι συμβαίνει όμως με το let ή το const, αν κάνεις το ίδιο;

console.log(user); // ReferenceError: Cannot access 'user' before initialization
let user = "Leandros";

Ο κώδικάς σου παράγει error, γιατί προσπαθείς να χρησιμοποιήσεις μια μεταβλητή πριν αρχικοποιηθεί - ενώ βρίσκεται στο TDZ (Temporal Dead Zone).

Τι συμβαίνει στην πραγματικότητα;

Η JavaScript διαβάζει τον κώδικά σου σε δύο φάσεις.

Πρώτα σκανάρει και βρίσκει όλες τις δηλώσεις - μεταβλητές, functions, classes. Μετά τρέχει τον κώδικα γραμμή-γραμμή. Αυτό λέγεται Hoisting, αλλά θα το πιάσουμε σε άλλο post.

Με var, η μεταβλητή δηλώνεται και αρχικοποιείται ως undefined από την αρχή.

Με let/const, η μεταβλητή δηλώνεται αλλά δεν αρχικοποιείται. Η JavaScript ξέρει ότι υπάρχει, αλλά δεν σε αφήνει να την αγγίξεις μέχρι τη γραμμή που τη δηλώνεις.

Αυτό το κενό - από τη στιγμή που η JavaScript βρίσκει τη μεταβλητή μέχρι τη γραμμή που τη δηλώνεις - είναι το TDZ.

Πάμε και με μία αναλογία, αυτή του φαρμακείου:

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

Με το var, είναι σαν να σου δίνουν ένα άδειο κουτί μέχρι να ετοιμαστεί. Με let ή const, δεν σου δίνουν τίποτα - αν πας νωρίτερα, απλά σε σταματάνε.

Και μεταξύ μας; Έχει περισσότερο νόημα να σε σταματήσουν, παρά να φύγεις με ένα άδειο κουτί.

Γιατί, όμως, Temporal;

Γιατί δεν έχει σημασία μόνο πού βρίσκεται ο κώδικας, αλλά κυρίως πότε εκτελείται.

Δες το παρακάτω παράδειγμα:

function getUser() {
  return user; // this line is ABOVE the declaration
}
let user = "Leandros";
console.log(getUser()); // "Leandros" - everything works as expected

Με μια πρώτη ματιά φαίνεται λάθος, αφού η getUser χρησιμοποιεί τη μεταβλητή user πριν αυτή δηλωθεί.

Κι όμως, δουλεύει κανονικά.

Γιατί; Άλλα δεν λέγαμε μέχρι τώρα;

Επειδή η συνάρτηση δεν εκτελείται τη στιγμή που δηλώνεται. Εκτελείται όταν την καλείς.

Και τη στιγμή που καλείται (console.log(getUser())), η μεταβλητή user έχει ήδη δηλωθεί και αρχικοποιηθεί. Άρα δεν βρίσκεται πλέον στο TDZ.

Γι' αυτό λέγεται "temporal": δεν μετράει η σειρά στον κώδικα, αλλά η χρονική στιγμή που χρησιμοποιείς τη μεταβλητή.

Αν τη χρησιμοποιήσεις πριν αρχικοποιηθεί → error. Αν τη χρησιμοποιήσεις μετά → όλα λειτουργούν κανονικά.

Γιατί υπάρχει το TDZ;

Δεν είναι bug, αλλά feature.

Το TDZ σχεδιάστηκε για να διορθώσει προβλήματα που δημιουργούσε το var. Ο στόχος είναι ο κώδικας να είναι όσο το δυνατόν πιο προβλέψιμος, ώστε τα λάθη να εμφανίζονται νωρίς και όχι αργότερα.

Με το var, μπορούσες να χρησιμοποιήσεις μια μεταβλητή πριν τη δηλώσεις. Ο κώδικας έτρεχε κανονικά, αλλά η μεταβλητή ήταν undefined.

Αυτό δημιουργεί επικίνδυνα bugs: όλα φαίνονται να λειτουργούν, αλλά κάτι δεν πάει καλά και το πρόβλημα εμφανίζεται αργότερα, συνήθως στο production.

Το TDZ αλλάζει αυτή τη συμπεριφορά. Σε σταματάει αμέσως και σου λέει "δεν μπορείς να χρησιμοποιήσεις αυτή τη μεταβλητή ακόμα".

Καλύτερα ένα error τώρα, παρά ένα bug αργότερα.