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

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

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

Μετρώντας τα μήλα

Αν έχετε 4 μήλα και αγοράζετε 27 περισσότερα, πόσα μήλα έχετε; Πάρτε ένα δευτερόλεπτο και γράψτε την απάντησή σας στον επεξεργαστή κειμένου σας.

Ποια είναι η απάντησή σας;

// Αυτό?
31
// Ή αυτό?
4 + 27

Και οι δύο απαντήσεις είναι σωστές, αλλά η δεύτερη μέθοδος είναι καλύτερη - γιατί εκφορτώνετε τον υπολογισμό σε JavaScript. Το διδάσκετε πώς να φτάσετε στην απάντηση.

Αλλά υπάρχει ακόμα ένα πρόβλημα με τον κώδικα.

Αν κοιτάξετε τα 4 + 27 χωρίς κανένα πλαίσιο από το πρόβλημα μήλων μας, γνωρίζετε ότι υπολογίζουμε τον αριθμό των μήλων που κρατάτε σήμερα;

Πιθανώς όχι.

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

initialApples + applesBought

Η διαδικασία υποκατάστασης της 4 με μια μεταβλητή που ονομάζεται initialApples ονομάζεται μεταβλητές δήλωσης.

Δηλώνοντας μεταβλητές

Δηλώνετε μεταβλητές με την ακόλουθη σύνταξη:

const variableName = 'αξία'

Υπάρχουν τέσσερα μέρη που θα θέλατε να λάβετε υπόψη:

  1. Η μεταβλητήName
  2. Η αξία
  3. Το σημείο =
  4. Η λέξη const

Η μεταβλητήName

variableName είναι το όνομα της μεταβλητής που δηλώνετε. Μπορείτε να το ονομάσετε οτιδήποτε, αρκεί να ακολουθεί αυτούς τους κανόνες:

  1. Πρέπει να είναι μία λέξη
  2. Πρέπει να αποτελείται μόνο από γράμματα, αριθμούς ή υπογράμμιση (0-9, a-z, A-Z, _).
  3. Δεν μπορεί να ξεκινήσει με έναν αριθμό.
  4. Δεν μπορεί να είναι καμία από αυτές τις δεσμευμένες λέξεις-κλειδιά

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

Ένα καλό παράδειγμα μιας καμηλοειδούς μεταβλητής είναι το applesToBuy.

Η αξία

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

= στο JavaScript

= στο JavaScript δεν λειτουργεί όπως = στα μαθηματικά. Μην συγχέεται.

Σε JavaScript, = σημαίνει εκχώρηση. Όταν χρησιμοποιείτε =, ρυθμίζετε (ή εκχωρείτε) την τιμή στη δεξιά πλευρά (RHS) του σημείου = στην αριστερή πλευρά (LHS) του σημείου =.

Στην ακόλουθη πρόταση, ορίζετε τις μεταβλητές initialApples στον αριθμό 4.

const initialApples = 4

Αν κονσόλα.log αυτή τη μεταβλητή, μπορείτε να δείτε ότι το initialApples είναι 4.

console.log (initialApples) // 4

Αξιολόγηση πριν από την ανάθεση

Κάθε μεταβλητή μπορεί να λάβει μόνο μία τιμή. Επομένως, αν έχετε μια εξίσωση που πρέπει να αξιολογηθεί στο RHS, θα αξιολογηθεί πριν να εκχωρηθεί στη μεταβλητή.

const initialApples = 4
const applesToBuy = 27
const σύνολοApples = initialApples + applesToBuy

Σε αυτό το παράδειγμα, το JavaScript θα αξιολογήσει την απάντηση των initialApples + applesToBuy (που έχει ως αποτέλεσμα 31) προτού αναθέσει τα αποτελέσματα στο totalApples. Αυτός είναι ο λόγος που παίρνετε 31 αν προσπαθήσετε να καταγράψετε totalApples.

console.log (totalApples) // 31

Η λέξη const

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

Και οι τρεις λέξεις-κλειδιά δηλώνουν μεταβλητές, αλλά είναι ελαφρώς διαφορετικές μεταξύ τους.

Const εναντίον vs var

const και αφήστε τις λέξεις-κλειδιά που είναι διαθέσιμες σε εμάς στο ES6. Είναι καλύτερα για τη δημιουργία μεταβλητών από το var επειδή είναι block blocked ενώ το var είναι το function scoped.

Προς το παρόν, ας επικεντρωθούμε στη διαφορά μεταξύ const και let.

Const εναντίον

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

const applesToBuy = 22
// Επαναχώρηση σε μια μεταβλητή που δηλώθηκε με const οδηγεί σε ένα σφάλμα applesToBuy = 27

Εάν δηλώσετε μια μεταβλητή με τη μεταβίβαση, μπορείτε να την αναθέσετε εκ νέου με μια νέα τιμή.

αφήστε τα applesToBuy = 22
applesToBuy = 27 κονσόλα.log (applesToBuy)

Πρέπει να χρησιμοποιήσετε το const ή να το αφήσετε;

Η κατανόηση του αν πρέπει να χρησιμοποιήσετε το const ή το let είναι περισσότερο ένα προηγμένο θέμα.

Όταν ξεκινάτε, η χρήση θα ήταν πολύ πιο απλή από τη χρήση του const.

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

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

Σε περίπτωση που αναρωτιέστε, μην χρησιμοποιείτε το var πια - δεν υπάρχει ανάγκη. ας και const είναι πολύ καλύτερα από var.

Τυλίγοντας

Στη JavaScript, οι μεταβλητές χρησιμοποιούνται για τη διατήρηση μιας τιμής. Μπορούν να διατηρήσουν οποιαδήποτε αξία, από τα πρωτόγονα έως τα αντικείμενα.

Το σύμβολο = στο JavaScript δεν είναι το ίδιο με το = sign in Math. Σε JavaScript, = σημαίνει εκχώρηση.

Όταν δηλώνετε μεταβλητές, χρησιμοποιήστε το camelCase για να ονομάσετε τις μεταβλητές σας. Αποφύγετε τις δεσμευμένες λέξεις-κλειδιά.

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

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

(OH, παρεμπιπτόντως, αν σας άρεσε αυτό το άρθρο, θα το εκτιμούσα αν θα μπορούσατε να το μοιραστείτε.)

Αρχικά δημοσιεύθηκε στο zellwk.com.