2.2 Η λέξη-κλειδί let στην JavaScript

Στη JavaScript, η λέξη-κλειδί let χρησιμοποιείται για τη δήλωση μιας μεταβλητής με εφαρμογή του block scope.

Η δήλωση let σας επιτρέπει να δημιουργήσετε μια μεταβλητή με ένα συγκεκριμένο όνομα και να της αναθέσετε μια τιμή. Η μεταβλητή μπορεί να έχει πεδίο ισχύος περιορισμένο στο block όπου δηλώθηκε (π.χ. στο πλαίσιο ενός συναρτήσεων, ενός βρόχου, ενός κλπ.).

Ας δούμε ένα παράδειγμα:

let x = 5;
if (x === 5) {
  let y = 10;
  console.log(y); // Εκτύπωση της τιμής της μεταβλητής y εντός του block
}
console.log(x); // Εκτύπωση της τιμής της μεταβλητής x
console.log(y); // Σφάλμα: η μεταβλητή y δεν είναι ορατή εδώ

Στο παραπάνω παράδειγμα, χρησιμοποιούμε το let για να δηλώσουμε τις μεταβλητές x και y. Η μεταβλητή x έχει πεδίο ισχύος στο πλαίσιο του συνολικού κώδικα, ενώ η μεταβλητή y έχει πεδίο ισχύος περιορισμένο μέσα στο block if. Αυτό σημαίνει ότι η μεταβλητή y είναι ορατή μόνο εντός του block if, και δεν μπορεί να προσπελαστεί έξω από αυτό.

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

Οι μεταβλητές που έχουν οριστεί με τη χρήση της λέξης-κλειδιού let δεν μπορούν να δηλωθούν ξανά.

Αυτό σημαίνει ότι δεν μπορείτε να κάνετε κατά λάθος μια δεύτερη δήλωση μιας μεταβλητής που έχει ήδη οριστεί με το let. Αν προσπαθήσετε να το κάνετε, θα λάβετε ένα σφάλμα.

Για παράδειγμα:

let x = 5;
let x = 10; // Σφάλμα: η μεταβλητή x έχει ήδη οριστεί

Στο παραπάνω παράδειγμα, κάνουμε μια πρώτη δήλωση της μεταβλητής x με τη χρήση του let. Αν προσπαθήσουμε να κάνουμε μια δεύτερη δήλωση της x με το ίδιο όνομα, θα λάβουμε ένα σφάλμα που μας ενημερώνει ότι η μεταβλητή x έχει ήδη οριστεί.

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

[adinserter block=”2″]

Πριν από το ES6 (2015), η JavaScript είχε Διεύθυνση Παγκόσμιας Εμβέλειας (Global Scope) και Διεύθυνση Εμβέλειας Συνάρτησης (Function Scope).

Το ES6 εισήγαγε δύο σημαντικές νέες λέξεις-κλειδιά στη JavaScript: το let και το const.

Αυτά τα δύο λέξεις-κλειδιά παρέχουν Εμβέλεια Μπλοκ (Block Scope) στη JavaScript.

Οι μεταβλητές που δηλώνονται μέσα σε ένα block { } δεν μπορούν να προσπελαστούν από έξω του block. Ας δούμε ένα παράδειγμα:

{
  let x = 5;
  console.log(x); // Εκτύπωση της τιμής της μεταβλητής x εντός του block
}
console.log(x); // Σφάλμα: η μεταβλητή x δεν είναι ορατή εδώ

Στο παραπάνω παράδειγμα, δηλώνουμε τη μεταβλητή x μέσα σε ένα block { }. Η x έχει εμβέλεια μόνο εντός του block και δεν μπορεί να προσπελαστεί έξω από αυτό.

Η Εμβέλεια Μπλοκ (Block Scope) μας επιτρέπει να έχουμε πιο συγκεκριμένο έλεγχο της ορατότητας των μεταβλητών και την προστασία από συγκρούσεις ονομάτων μεταβλητών.

Η δήλωση ενός ίδιου ονόματος μεταβλητής με τη χρήση της λέξης-κλειδιού var μπορεί να δημιουργήσει προβλήματα.

Όταν ξαναδηλώνετε μια μεταβλητή μέσα σε ένα block, η ξαναδήλωση αυτή επηρεάζει επίσης τη μεταβλητή έξω από το block. Ας δούμε ένα παράδειγμα:

var x = 5;
if (true) {
  var x = 10;
  console.log(x); // Εκτύπωση της τιμής της μεταβλητής x εντός του block
}
console.log(x); // Εκτύπωση της τιμής της μεταβλητής x έξω από το block

Στο παραπάνω παράδειγμα, δηλώνουμε τη μεταβλητή x στην αρχή. Αργότερα, ξαναδηλώνουμε τη μεταβλητή x μέσα στο block if. Αυτή η ξαναδήλωση επηρεάζει την ίδια τη μεταβλητή x έξω από το block. Ως αποτέλεσμα, η τελική τιμή της μεταβλητής x είναι 10 και εκτυπώνεται και μέσα και έξω από το block.

Αυτό μπορεί να οδηγήσει σε σύγχυση και ανεπιθύμητη αλληλεπίδραση μεταξύ των μεταβλητών. Επομένως, συνιστάται να αποφεύγετε την ξαναδήλωση μεταβλητών χρησιμοποιώντας την var μέσα σε ένα block, ή να χρησιμοποιείτε το let ή το const για να δηλώνετε μεταβλητές με Block Scope.

Όταν εκτελέσετε τον παραπάνω κώδικα, το αποτέλεσμα εκτέλεσης θα είναι:

10
10

Αυτό συμβαίνει επειδή η μεταβλητή x δηλώνεται με το var τόσο εντός όσο και έξω από το block if. Όταν εκτελείται η εντολή console.log(x) εντός του block, η τιμή της x είναι 10, καθώς η ξαναδήλωση αλλάζει την τιμή της μεταβλητής. Ακόμα και εκτός του block, η τιμή της x παραμένει 10, επειδή η δήλωση της x έξω από το block αντικαθίσταται από την ξαναδήλωση εντός του block.

Αυτό είναι ένα παράδειγμα της συμπεριφοράς της δήλωσης μεταβλητής με το var και της έλλειψης block scope. Για να αποφύγετε αυτού του είδους τις ανεπιθύμητες αλληλεπιδράσεις, συνιστάται να χρησιμοποιείτε το let ή το const για τη δήλωση μεταβλητών, καθώς αυτά παρέχουν block scope και αποφεύγουν τις παραπάνω καταστάσεις.

[adinserter block=”3″]

Τι είναι καλό:

• Το let και το const έχουν block scope, πράγμα που σημαίνει ότι η ορατότητα των μεταβλητών περιορίζεται στο block όπου δηλώνονται.
• Το let και το const δεν μπορούν να ξαναδηλωθούν. Αυτό αποτρέπει τυχόν συγκρούσεις ονομάτων μεταβλητών και μπορεί να βοηθήσει στην αποφυγή σφαλμάτων κατά την ανάπτυξη του κώδικα.
• Το let και το const πρέπει να δηλωθούν πριν τη χρήση τους. Αυτό βοηθά στον έλεγχο των μεταβλητών και αποτρέπει την προσπάθεια πρόσβασης σε μη δηλωμένες μεταβλητές.
• Το let και το const δεν δένουν στο this. Αυτό σημαίνει ότι δεν επηρεάζονται από τον τρόπο κλήσης μιας συνάρτησης ή του πεδίου this.
• Το let και το const δεν υπόκεινται στο hoisting, πράγμα που σημαίνει ότι πρέπει να δηλωθούν πριν από τη χρήση τους.

Τι δεν είναι καλό:

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

Συνολικά, η χρήση των let και const προτιμάται έναντι του var λόγω της πιο προβλέψιμης συμπεριφοράς και του καλύτερου ελέγχου των μεταβλητών και της ορατότητάς τους.

Η ξαναδήλωση μιας μεταβλητής στη JavaScript με τη χρήση της λέξης-κλειδιού var επιτρέπεται οπουδήποτε σε ένα πρόγραμμα.

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

Ας δούμε ένα παράδειγμα:

var x = 5;
console.log(x); // Εκτύπωση της τιμής της μεταβλητής x

var x = 10; // Ξαναδήλωση της μεταβλητής x
console.log(x); // Εκτύπωση της νέας τιμής της μεταβλητής x

Στο παραπάνω παράδειγμα, δηλώνουμε αρχικά τη μεταβλητή x με τη χρήση του var και την τιμή 5. Αργότερα, ξαναδηλώνουμε τη μεταβλητή x με τη χρήση του var και την τιμή 10. Οι δύο ξαναδηλώσεις της x επιτρέπονται και η μεταβλητή αντικαθίσταται με τη νέα τιμή.

Αυτή η συμπεριφορά μπορεί να οδηγήσει σε σύγχυση και δυσκολία στην παρακολούθηση των τιμών μιας μεταβλητής, ειδικά σε μεγαλύτερα προγράμματα. Επομένως, συνίσταται να αποφεύγετε την ξαναδήλωση μεταβλητών με το var όπου είναι δυνατόν και να χρησιμοποιείτε το let ή το const, τα οποία προσφέρουν καλύτερη έλεγχο των μεταβλητών και αποφεύγουν τις παραπάνω παρανοήσεις.

Με τη χρήση του let, η ξαναδήλωση μιας μεταβλητής στον ίδιο block δεν επιτρέπεται:

let x = 5;
console.log(x); // Εκτύπωση της τιμής της μεταβλητής x

let x = 10; // Σφάλμα: Η μεταβλητή x έχει ήδη δηλωθεί στον ίδιο block
console.log(x);

Στο παραπάνω παράδειγμα, δηλώνουμε τη μεταβλητή x με το let και την τιμή 5. Όταν προσπαθούμε να ξαναδηλώσουμε τη μεταβλητή x με το let και την τιμή 10 στον ίδιο block, λαμβάνουμε ένα σφάλμα. Οι μεταβλητές που δηλώνονται με το let έχουν block scope και δεν μπορούν να ξαναδηλωθούν στον ίδιο block.

Αυτή η συμπεριφορά με το let βοηθά στην αποφυγή συγκρούσεων ονομάτων μεταβλητών και στη διατήρηση της πιο προβλέψιμης συμπεριφοράς των μεταβλητών.

[adinserter block=”4″]

Οποτεδήποτε δηλώνετε μια μεταβλητή με το let, η ξαναδήλωση της ίδιας μεταβλητής σε ένα άλλο block επιτρέπεται:

let x = 5;
console.log(x); // Εκτύπωση της τιμής της μεταβλητής x

{
  let x = 10; // Ξαναδήλωση της μεταβλητής x σε διαφορετικό block
  console.log(x); // Εκτύπωση της νέας τιμής της μεταβλητής x εντός του block
}

console.log(x); // Εκτύπωση της αρχικής τιμής της μεταβλητής x έξω από το block

Στο παραπάνω παράδειγμα, η μεταβλητή x δηλώνεται αρχικά με τη χρήση του let και της τιμής 5. Έπειτα, μέσα σε ένα άλλο block, ξαναδηλώνουμε τη μεταβλητή x με το let και την τιμή 10. Αυτή η ξαναδήλωση είναι επιτρεπτή, καθώς βρίσκεται σε διαφορετικό block από την αρχική δήλωση της x. Η μεταβλητή x εντός του block αντιπροσωπεύει μια διαφορετική μεταβλητή από την x έξω από το block.

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

Οι μεταβλητές που δηλώνονται με το var υπόκεινται στο φαινόμενο του hoisting, το οποίο σημαίνει ότι αναβαθμίζεται (hoisted) στην κορυφή του πεδίου ορατότητάς τους πριν από την εκτέλεση του κώδικα.

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

Ας δούμε ένα παράδειγμα:

console.log(x); // Εκτύπωση της τιμής της μεταβλητής x πριν από τη δήλωσή της
var x = 5;
console.log(x); // Εκτύπωση της τιμής της μεταβλητής x μετά τη δήλωσή της

Στο παραπάνω παράδειγμα, η μεταβλητή x εκτυπώνεται πριν από την πραγματική της δήλωση. Παρόλα αυτά, η μεταβλητή x αναβαθμίζεται (hoisted) στην κορυφή του block πριν από την εκτέλεση του κώδικα, οπότε η εκτύπωση δεν προκαλεί σφάλμα. Η τιμή της x πριν την πραγματική δήλωση της είναι undefined, ενώ μετά τη δήλωση της γίνεται 5.

Αν και η χρήση του hoisting με το var είναι νόμιμη στη JavaScript, μπορεί να οδηγήσει σε μη προβλέψιμη συμπεριφορά και δυσκολία στην κατανόηση του κώδικα. Για αυτόν τον λόγο, συνίσταται να δηλώνετε τις μεταβλητές με το let ή το const, τα οποία δεν υπόκεινται στο hoisting και παρέχουν καλύτερη προβλεψιμότητα και καθαρότητα στον κώδικα.