Var, Let και Const - Ποια είναι η διαφορά;

Πολλά λαμπερά νέα χαρακτηριστικά κυκλοφόρησαν με το ES2015 (ES6). Και τώρα, από το 2020, θεωρείται ότι πολλοί προγραμματιστές JavaScript έχουν εξοικειωθεί και έχουν αρχίσει να χρησιμοποιούν αυτές τις δυνατότητες.

Αν και αυτή η υπόθεση μπορεί να είναι εν μέρει αληθινή, εξακολουθεί να είναι πιθανό ορισμένα από αυτά τα χαρακτηριστικά να παραμείνουν ένα μυστήριο για ορισμένους devs

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

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

Βαρ

Πριν από την έλευση του ES6, οι varδηλώσεις κυβέρνησαν. Ωστόσο, υπάρχουν ζητήματα που σχετίζονται με μεταβλητές που δηλώνονται var. Γι 'αυτό ήταν απαραίτητο για νέους τρόπους να δηλώνονται οι μεταβλητές. Αρχικά, ας καταλάβουμε varπερισσότερα προτού συζητήσουμε αυτά τα ζητήματα.

Πεδίο του var

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

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

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

Για να κατανοήσετε περαιτέρω, δείτε το παρακάτω παράδειγμα.

 var greeter = "hey hi"; function newFunction() { var hello = "hello"; } 

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

 var tester = "hey hi"; function newFunction() { var hello = "hello"; } console.log(hello); // error: hello is not defined 

Θα λάβουμε ένα σφάλμα που οφείλεται στο ότι helloδεν είναι διαθέσιμο εκτός της συνάρτησης.

Οι μεταβλητές var μπορούν να δηλωθούν εκ νέου και να ενημερωθούν

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

 var greeter = "hey hi"; var greeter = "say Hello instead"; 

και αυτό επίσης

 var greeter = "hey hi"; greeter = "say Hello instead"; 

Ανύψωση του var

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

 console.log (greeter); var greeter = "say hello" 

ερμηνεύεται ως εξής:

 var greeter; console.log(greeter); // greeter is undefined greeter = "say hello" 

Έτσι, οι varμεταβλητές ανυψώνονται στην κορυφή του πεδίου εφαρμογής τους και αρχικοποιούνται με τιμή undefined.

Πρόβλημα με το var

Υπάρχει μια αδυναμία που συνοδεύει   var. Θα χρησιμοποιήσω το παρακάτω παράδειγμα για να εξηγήσω:

 var greeter = "hey hi"; var times = 4; if (times > 3) { var greeter = "say Hello instead"; } console.log(greeter) // "say Hello instead" 

Έτσι, δεδομένου ότι times > 3επιστρέφει αληθινή, greeterεπαναπροσδιορίζεται σε "say Hello instead". Αν και αυτό δεν είναι πρόβλημα εάν θέλετε greeterνα επαναπροσδιορίσετε εν γνώσει σας , γίνεται πρόβλημα όταν δεν συνειδητοποιείτε ότι greeterέχει ήδη οριστεί μια μεταβλητή .

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

Αφήνω

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

ας είναι μπλοκ scoped

Ένα μπλοκ είναι ένα κομμάτι κώδικα που οριοθετείται από {}. Ένα μπλοκ ζει σε σγουρά τιράντες. Οτιδήποτε μέσα σε σγουρά τιράντες είναι ένα μπλοκ.

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

 let greeting = "say Hi"; let times = 4; if (times > 3) { let hello = "say Hello instead"; console.log(hello);// "say Hello instead" } console.log(hello) // hello is not defined 

Βλέπουμε ότι η χρήση helloεκτός του μπλοκ του (τα σγουρά τιράντες όπου ορίστηκε) επιστρέφει ένα σφάλμα. Αυτό συμβαίνει επειδή οι letμεταβλητές έχουν πεδίο αποκλεισμού

ας μπορεί να ενημερωθεί, αλλά να μην δηλωθεί εκ νέου.

Όπως var, μια μεταβλητή που δηλώνεται με letμπορεί να ενημερωθεί εντός του πεδίου εφαρμογής της. Σε αντίθεση var, μια letμεταβλητή δεν μπορεί να δηλωθεί εκ νέου εντός του πεδίου της. Έτσι, ενώ αυτό θα λειτουργήσει:

 let greeting = "say Hi"; greeting = "say Hello instead"; 

Αυτό θα επιστρέψει ένα σφάλμα:

 let greeting = "say Hi"; let greeting = "say Hello instead"; // error: Identifier 'greeting' has already been declared 

Ωστόσο, εάν η ίδια μεταβλητή ορίζεται σε διαφορετικά πεδία, δεν θα υπάρχει σφάλμα:

 let greeting = "say Hi"; if (true) { let greeting = "say Hello instead"; console.log(greeting); // "say Hello instead" } console.log(greeting); // "say Hi" 

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

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

Επίσης, δεδομένου ότι μια μεταβλητή δεν μπορεί να δηλωθεί περισσότερες από μία φορές εντός ενός πεδίου, τότε το πρόβλημα που συζητήθηκε νωρίτερα με το varοποίο δεν συμβαίνει δεν συμβαίνει.

Ανύψωση του let

Όπως ακριβώς   var, οι letδηλώσεις ανυψώνονται στην κορυφή. Σε αντίθεση με το varοποίο έχει αρχικοποιηθεί undefined, η letλέξη-κλειδί δεν έχει αρχικοποιηθεί. Έτσι, αν προσπαθήσετε να χρησιμοποιήσετε μια letμεταβλητή πριν από τη δήλωση, θα λάβετε ένα Reference Error.

Συν

Οι μεταβλητές δηλώνονται με τις constσταθερές τιμές διατήρησης. constΟι δηλώσεις μοιράζονται ορισμένες ομοιότητες με τις letδηλώσεις.

const declarations are block scoped

Like let declarations, const declarations can only be accessed within the block they were declared.

const cannot be updated or re-declared

This means that the value of a variable declared with const remains the same within its scope. It cannot be updated or re-declared. So if we declare a variable with const, we can neither do this:

 const greeting = "say Hi"; greeting = "say Hello instead";// error: Assignment to constant variable. 

nor this:

 const greeting = "say Hi"; const greeting = "say Hello instead";// error: Identifier 'greeting' has already been declared 

Every const declaration, therefore, must be initialized at the time of declaration.

This behavior is somehow different when it comes to objects declared with const. While a const object cannot be updated, the properties of this objects can be updated. Therefore, if we declare a const object as this:

 const greeting = { message: "say Hi", times: 4 } 

while we cannot do this:

 const greeting = { words: "Hello", number: "five" } // error: Assignment to constant variable. 

we can do this:

 greeting.message = "say Hello instead"; 

This will update the value of greeting.message without returning errors.

Hoisting of const

Just like let, const declarations are hoisted to the top but are not initialized.

So just in case you missed the differences, here they are:

  • var declarations are globally scoped or function scoped while let and const are block scoped.
  • var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.
  • They are all hoisted to the top of their scope. But while var variables are initialized with undefined, let and const variables are not initialized.
  • Ενώ varκαι letμπορεί να δηλωθεί χωρίς να αρχικοποιηθεί, constπρέπει να αρχικοποιηθεί κατά τη δήλωση.

Έχετε κάποια ερώτηση ή προσθήκες; Παρακαλώ ενημέρωσέ με.

Ευχαριστούμε που το διαβάσατε :)