ΕΝΟΤΗΤΑ 3 - How To Define Variables
Εισηγητής
ΜΙΧΑΛΗΣ ΚΑΣΑΠΟΓΛΟΥ
Στο σημερινό δωρεάν μάθημα JavaScript θα δούμε πως ορίζουμε μεταβλητές, τι είναι το hoisting, και ποιες είναι οι διαφορές ανάμεσα στο var και στο let.
Το πρώτο πράγμα που πρέπει να καταλάβουμε να και συνηθίσουμε όταν γράφουμε JavaScript κώδικα είναι ότι τα πάντα στην JavaScript είναι case-sensitive – μεταβλητές, μέθοδοι, τελεστές κτλ. Με την έννοια case-sensitive εννοούμε ότι αν πχ. το όνομα μιας μεταβλητής είναι taxes για να καλέσετε την μεταβλητή αυτή θα πρέπει να την γράψετε ακριβώς με τον ίδιο τρόπο. Στο συγκεκριμένο παράδειγμα αυτό σημαίνει με όλους τους χαρακτήρες να είναι lower-case. Αν αλλάξετε έστω και ένα γράμμα (πχ. Taxes ) τότε αναφέρεστε σε μια εντελώς διαφορετική μεταβλητή.
Επίσης υπάρχουν μερικοί απλοί κανόνες όσο αφορά τα ίδια τα ονόματα που δίνουμε στις μεταβλητές μας. Αν και είναι εύκολοι να τους ακολουθήσετε θα πρέπει να αναφερθούν για να αποφύγουμε τυχόν λάθη
- Ο χαρακτήρας με τον οποίο ξεκινάει το όνομα μιας μεταβλητής πρέπει να είναι είτε γράμμα, είτε το underscore ( _ ) είτε το σύμβολο του δολαρίου ( $ ).
- Οι υπόλοιποι χαρακτήρες μπορούν να είναι γράμματα, αριθμοί, underscores, δολάριο ή αριθμοί.
- Τέλος, αν το όνομα της μεταβλητής σας αποτελείται από δύο ή περισσότερες λέξεις, τότε πρέπει προτείνεται να ακολουθήσουμε το camel case format, δηλαδή το πρώτο γράμμα της πρώτης λέξης να είναι μικρό ενώ το πρώτο γράμμα από την δεύτερη λέξη και μετά να είναι κεφαλαίο. Για παράδειγμα incomeTaxes.
Ο παλιός τρόπος για να ορίσουμε μια μεταβλητή, πριν την έκδοση ES6, ήταν να χρησιμοποιήσουμε την λέξη var και αμέσως μετά να ορίσουμε το όνομα της μεταβλητής. Επειδή ακόμα χρησιμοποιείται, θα αναφερθούμε σε αυτό τον τρόπο ορισμού μιας μεταβλητής και μετά θα προχωρήσουμε στον μοντέρνο τρόπο.
Ο παραπάνω κώδικας ορίζει μια μεταβλητή με το όνομα message που μπορεί να αποθηκεύσει οποιαδήποτε τιμή. Επειδή όμως δεν της έχουμε αναθέσει κάποια αρχική τιμή, η τιμή που περιέχει αυτή την στιγμή είναι η undefined.
Μπορούμε επίσης να ορίσουμε μια μεταβλητή και να της δώσουμε και αρχική τιμή.
Επειδή έχουμε αναθέσει την τιμή hi στην μεταβλητή message, αυτό δεν σημαίνει ότι η μεταβλητή message είναι είδος string. Απλά έχουμε αναθέσει μια τιμή στην συγκεκριμένη μεταβλητή. Επειδή λοιπόν δεν έχουμε κανένα περιορισμό θα μπορούσαμε κάλλιστα να αναθέσουμε όχι μόνο καινούργια τιμή αλλά και διαφορετικό είδος τιμής στην μεταβλητή. Αυτός ο τρόπος δεν είναι και ο προτεινόμενος για αυτό καλό θα ήταν να τον αποφεύγετε.
Η JavaScript μας επιτρέπει επίσης να ορίσουμε πολλαπλές μεταβλητές στην ίδια γραμμή.
Ορίζοντας μεταβλητές με το var πρέπει να είμαστε αρκετά προσεκτικοί γιατί η μεταβλητή μπορεί να χρησιμοποιηθεί από όλη την εφαρμογή, δηλαδή να έχει global scope, ή από κώδικα μέσα σε μια function. Γνωρίζω ότι θα θέλατε να δείτε κάποιο παράδειγμα σε αυτό για να το κατανοήσετε καλύτερα, αλλά ακόμα δεν είναι ώρα για να μπούμε σε τόσες λεπτομέρειες. Για τώρα απλά πρέπει να καταλάβετε πως ορίζουμε μια μεταβλητή με το var και τι ακριβώς είναι το hoisting για το οποίο θα μιλήσουμε αμέσως τώρα.
Όταν χρησιμοποιούμε var για ορίσουμε μια μεταβλητή, μπορούμε να ορίσουμε την μεταβλητή σε οποιοδήποτε σημείο του κώδικα ακόμα από τον κώδικα στον οποίο καλούμε την μεταβλητή για να την χρησιμοποιήσουμε. Εσωτερικά η JavaScript διαβάζει όλο το αρχείο μετακινεί τους ορισμούς των μεταβλητών στην αρχή του κώδικα μας έτσι ώστε να είναι διαθέσιμες πριν τις καλέσει ο κώδικας μας. Αυτή η διαδικασία ονομάζεται hoisting. Φυσικά δεν προτείνεται να ακολουθήσετε αυτό τον τρόπο, αλλά να ορίζεται όλες τις μεταβλητές σας στην αρχή του κώδικα σας.
Πριν προχωρήσουμε στον ορισμό μεταβλητών με το let, ας δούμε μερικά ακόμα στοιχεία της JavaScript γενικότερα.
Για αρχή θα πρέπει να γνωρίζουμε πως να δημιουργούμε σχόλια στον κώδικα μας. Αυτή είναι μια χρήσιμη τακτική για να δώσουμε μια σύντομη περιγραφή είτε σε μεμονωμένες γραμμές κώδικα είτε σε ένα γκρουπ από κώδικα. Αυτό θα βοηθήσει άλλους προγραμματιστές να καταλάβουν πιο γρήγορα τον κώδικα σας αλλά και εσάς τους ίδιους όταν ασχοληθείτε πάλι με τον ίδιο κώδικα μετά από κάποιο μεγάλο χρονικό διάστημα.
Για να γράψουμε σχόλια (comments) σε μια γραμμή χρησιμοποιούμε δύο forward-slash χαρακτήρες ενώ όταν θέλουμε να γράψουμε μια μεγαλύτερη περιγραφή χρησιμοποιούμε συνδυασμό forward-slash και asterisk.
Το ECMAScript 5 μας έδωσε την δυνατότητα να χρησιμοποιήσουμε το strict mode. Για να ενεργοποιήσουμε το strict mode στον κώδικα μας απλά γράφουμε “user strict”; στην αρχή του κώδικα μας. Όμως τι ακριβώς κάνει το strict mode?
Το strict mode περιορίζει μερικά από τα κρυφά λάθη που δημιουργούνται μέσα στην JavaScript μετατρέποντας τα σε throw errors. Επίσης όταν ενεργοποιηθεί επιτρέπει να γραφτεί ο κώδικας μόνο με μοντέρνες τεχνικές και να είναι πιο ασφαλής.
Ένα απλό παράδειγμα είναι το εξής – ορίζουμε μια μεταβλητή x στον κώδικα μας χωρίς την λέξη var. Χωρίς το strict mode αυτή η σύνταξη είναι αποδεκτή από την JavaScript. Όταν όμως ενεργοποιήσουμε το strict mode τότε θα λάβουμε λάθος γιατί το strict mode απαιτεί να οριστεί σωστά και ολοκληρωμένα η μεταβλητή.
Χωρίς use strict δεν λαμβάνουμε κάποιο λάθος
Με use strict λαμβάνουμε λάθος
Για να διορθώσουμε το λάθος πρέπει να ορίσουμε σωστά την μεταβλητή.
Ένα ακόμα σημείο στο οποίο θα ήθελα να αναφερθώ είναι το semicolon ( ; ) με το οποίο ολοκληρώνουμε ένα statement. Αν και δεν απαιτείται, είναι σωστή και προτεινόμενη τακτική να το γράφουμε στο τέλος του κάθε statement γιατί έτσι και αλλιώς όταν εκτελείται το statement η JavaScript θα το προσθέσει από μόνη της. Σαν statement ορίζουμε μια ολοκληρωμένη γραμμή κώδικα όπως πχ η δήλωση μιας μεταβλητής.
Το τελευταίο σημείο στο οποίο θα ήθελα να αναφερθώ είναι τα keywords. Όταν ονομάζουμε τις μεταβλητές μας θα πρέπει να αποφεύγουμε να χρησιμοποιούμε λέξεις που χρησιμοποιεί ήδη η JavaScript για να ορίσει δικές της εντολές. Οι λέξεις αυτές άλλωστε δεν είναι πολλές και σε μικρό χρονικό διάστημα θα τις έχουμε χρησιμοποιήσει σχεδόν όλες στις επόμενες ενότητες.
Τώρα ας αναφερθούμε στο let που είναι ο μοντέρνος τρόπος να ορίζουμε μεταβλητές στην JavaScript. Αν και μπορεί να φαίνεται εκ πρώτης όψεως ότι η διαδικασία ορισμού μεταβλητών παραμένει η ίδια με μόνη αλλαγή την λέξη let, στην ουσία έχουν αλλάξει πολλά πράγματα με ποιο κύριο το γεγονός ότι μια μεταβλητή let ορίζεται και περιορίζεται μέσα σε ένα block κώδικα ενώ το var είναι function scope. Όταν μιλήσουμε για functions τότε θα δείτε ακριβώς τι σημαίνει αυτό. Για τώρα ας αναφερθούμε σε κάποιους απλούς περιορισμούς που έχει να μας προσφέρει το let.
Όταν ορίζουμε μια μεταβλητή με το let, τότε δεν επιτρέπεται η επανάληψη της δήλωσης της ίδιας μεταβλητής.
Επίσης δεν επιτρέπεται το hoisting οπότε όλες οι μεταβλητές θα πρέπει πρώτα να ορίζονται μετά να χρησιμοποιούνται.
Υπάρχουν και άλλες αλλαγές όπως όταν ορίζουμε μια let μεταβλητή αυτή δεν θα προσκολληθεί στο window object. Επειδή όμως δεν μπορούμε να δώσουμε ακόμα ολοκληρωμένα παραδείγματα, αφού δεν έχουμε καλύψει αρκετή θεωρία, θα αφήσουμε αυτά τα χαρακτηριστικά του let για αργότερα.
Αυτό που πρέπει να κρατήσουμε από την σημερινή ενότητα είναι το γεγονός ότι αν και υπάρχει ένας μεγάλος αριθμός εφαρμογών που έχουν γραφτεί με τον ορισμό του var, εσείς θα πρέπει σε κάθε καινούργια σας εφαρμογή να χρησιμοποιείτε το let.
ΕΙΣΗΓΗΤΗΣ
Μιχάλης Κασάπογλου
Ο Μιχάλης Κασάπογλου, είναι ένας από τους πιο έμπειρους τεχνικούς εκπαιδευτές στον χώρο του προγραμματισμού με πάνω από 20 χρόνια εμπειρία. Έχει εργαστεί σαν IT Operations Manager, Senior Programmer, και Training Team Leader ενώ κατέχει και αρκετές πιστοποιήσεις που καλύπτουν ένα μεγάλο φάσμα τεχνολογιών στο προγραμματισμό, σε βάσεις δεδομένων και cloud. Στον ελεύθερο του χρόνο διατηρεί ένα τεχνολογικό blog στο οποίο θα βρείτε αρκετά δωρεάν μαθήματα προγραμματισμού για αρχάριους.
