2.1 Οι μεταβλητές στη JavaScript

Οι μεταβλητές στη JavaScript χρησιμοποιούνται για να αποθηκεύουν δεδομένα και τιμές. Μπορείτε να δηλώσετε μεταβλητές στη JavaScript με τέσσερις τρόπους:

1. Αυτόματη Δήλωση:
   Σε ορισμένες περιπτώσεις, οι μεταβλητές μπορούν να δηλωθούν αυτόματα χωρίς τη χρήση εντολών δήλωσης, όπως της var, let ή const. Για παράδειγμα:

x = 5; // Η μεταβλητή x δηλώνεται αυτόματα και της ανατίθεται η τιμή 5

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

2. Χρήση της var:
   Η εντολή var χρησιμοποιείται για να δηλωθούν μεταβλητές στη JavaScript. Με τη χρήση της var, μπορείτε να δηλώσετε μια μεταβλητή και να της αναθέσετε μια αρχική τιμή. Για παράδειγμα:

var x = 5; // Δήλωση της μεταβλητής x και ανάθεση της τιμής 5

Οι μεταβλητές που δηλώνονται με τη χρήση της var έχουν λειτουργία σε επίπεδο συνάρτησης (function scope).

3. Χρήση της let:
   Η εντολή let εισήχθηκε στην ECMAScript 6 (ES6) και προσφέρει έναν τρόπο πιο προηγμένο για τη δήλωση μεταβλητών. Αντίθετα με τη var, η let δημιουργεί μεταβλητές σε επίπεδο block (block scope). Αυτό σημαίνει ότι οι μεταβλητές που δηλώνονται με την let είναι ορατές μόνο μέσα στο block όπου δηλώθηκαν. Για παράδειγμα:

let y = 10; // Δήλωση της μεταβλητής y και ανάθεση της τιμής 10

4. Χρήση της const:
   Η εντολή const χρησιμοποιείται για τη δήλωση μεταβλητών που παραμένουν σταθερές (constants), δηλαδή η τιμή τους δεν μπορεί να αλλάξει μετά την ανάθεση αρχικής τιμής. Οι μεταβλητές που δηλώνονται με την const πρέπει να αρχικοποιούνται με μια τιμή, και δεν μπορούν να αλλάξουν τιμή αργότερα. Για παράδειγμα:

const PI = 3.1415; // Δήλωση μιας σταθεράς με την τιμή 3.1415

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

[adinserter block=”2″]

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

x = 5; // Αυτόματη δήλωση της μεταβλητής x και ανάθεση της τιμής 5

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

Σε αυτό το παράδειγμα, δεν έχουμε δηλώσει προηγουμένως τη μεταβλητή x χρησιμοποιώντας την var, let ή const. Ωστόσο, όταν εκχωρήσουμε την τιμή 5 στην μεταβλητή x, η JavaScript αυτόματα τη δηλώνει και της αναθέτει την τιμή. Έπειτα, μπορούμε να εκτυπώσουμε την τιμή της μεταβλητής x με τη χρήση της console.log().

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

Ας παρουσιάσουμε ένα αναλυτικό παράδειγμα για τη χρήση της var στη JavaScript:

// Δήλωση και αρχικοποίηση μεταβλητής με την var
var x = 5;

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

// Αλλαγή της τιμής της μεταβλητής x
x = 10;

// Εκτύπωση της νέας τιμής της μεταβλητής x
console.log(x); // Εκτυπώνει: 10

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

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

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

function printNumbers() {
  if (true) {
    let x = 5; // Η μεταβλητή x είναι ορατή μόνο μέσα στο block του if
    console.log(x); // Εκτυπώνει: 5
  }

  console.log(x); // Σφάλμα: η μεταβλητή x δεν είναι ορατή εδώ
}

printNumbers();

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

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

[adinserter block=”3″]

Η χρήση της const μας επιτρέπει να δηλώσουμε μεταβλητές που παραμένουν σταθερές (constants), δηλαδή η τιμή τους δεν μπορεί να αλλάξει μετά την ανάθεση αρχικής τιμής. Ας δούμε ένα αναλυτικό παράδειγμα:

const PI = 3.1415; // Δήλωση μιας σταθεράς με την τιμή 3.1415
const firstName = "John"; // Δήλωση μιας σταθεράς με την τιμή "John"

console.log(PI); // Εκτύπωση της τιμής της σταθεράς PI
console.log(firstName); // Εκτύπωση της τιμής της σταθεράς firstName

PI = 3.14; // Αυτό θα προκαλέσει σφάλμα, καθώς προσπαθούμε να αλλάξουμε την τιμή μιας σταθεράς
firstName = "Jane"; // Αυτό θα προκαλέσει επίσης σφάλμα, καθώς προσπαθούμε να αλλάξουμε την τιμή μιας σταθεράς

Στο παραπάνω παράδειγμα, ορίζουμε δύο σταθερές, την PI και την firstName, με συγκεκριμένες τιμές. Μετά τη δήλωση, μπορούμε να χρησιμοποιήσουμε τις σταθερές αυτές σε άλλα μέρη του κώδικα και να τις εκτυπώσουμε.

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

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

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

Για παράδειγμα, μπορούμε να δηλώσουμε μια μεταβλητή x και να της αναθέσουμε μια τιμή:

var x = 5;

Στη συνέχεια, μπορούμε να χρησιμοποιήσουμε τη μεταβλητή x για να εκτελέσουμε υπολογισμούς:

var y = x + 3;
console.log(y); // Εκτυπώνει: 8

Στο παραπάνω παράδειγμα, η μεταβλητή x κρατάει την τιμή 5. Χρησιμοποιούμε αυτή την τιμή για να υπολογίσουμε την τιμή της μεταβλητής y, προσθέτοντας 3 στην τιμή της x. Έπειτα, εκτυπώνουμε την τιμή της μεταβλητής y, που είναι 8.

Οι μεταβλητές μας επιτρέπουν να αποθηκεύουμε και να χρησιμοποιούμε τιμές για να εκτελέσουμε διάφορες λειτουργίες και υπολογισμούς στη JavaScript.

Οι μεταβλητές στη JavaScript πρέπει να αναγνωρίζονται με μοναδικά ονόματα, τα οποία ονομάζονται αναγνωριστικά (identifiers).

Τα αναγνωριστικά μπορούν να είναι σύντομα ονόματα (όπως x και y) ή πιο περιγραφικά ονόματα (age, sum, totalVolume).

Οι γενικοί κανόνες για την κατασκευή ονομάτων μεταβλητών (μοναδικών αναγνωριστικών) είναι:

• Τα ονόματα μπορούν να περιέχουν γράμματα, ψηφία, κάτω παύλες (_) και σύμβολα δολαρίου ($).
• Τα ονόματα πρέπει να ξεκινούν με ένα γράμμα.
• Τα ονόματα μπορούν επίσης να ξεκινούν με $ και _ (αλλά δεν θα το χρησιμοποιήσουμε σε αυτό το μάθημα).
• Τα ονόματα είναι case sensitive, δηλαδή τα y και Y είναι διαφορετικές μεταβλητές.
• Οι δεσμευμένες λέξεις (όπως λέξεις-κλειδιά της JavaScript) δεν μπορούν να χρησιμοποιηθούν ως ονόματα.

Μερικά παραδείγματα έγκυρων ονομάτων μεταβλητών στη JavaScript:

var x = 5;
var y = "Hello";
var age = 25;
var totalVolume = 100.5;
var _myVariable = "Underscore";
var $price = 10;

Παρατηρήστε ότι τα παραπάνω ονόματα πληρούν τους κανόνες των αναγνωριστικών και είναι έγκυρες μεταβλητές στη JavaScript.

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

Στη JavaScript, το σύμβολο ίσον (=) είναι ο “τελεστής ανάθεσης” και όχι ο “ίσος με” τελεστής.

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

x = 5

Στην άλγεβρα, η έκφραση αυτή θα σήμαινε ότι η x είναι ίση με 5. Ωστόσο, στη JavaScript, αυτή η έκφραση δηλώνει την ανάθεση της τιμής 5 στη μεταβλητή x.

[adinserter block=”4″]

Για παράδειγμα, στον παρακάτω κώδικα:

var x = 5;

Δηλώνουμε μια μεταβλητή x και της αναθέτουμε την τιμή 5. Αυτό σημαίνει ότι η μεταβλητή x τώρα κρατάει την τιμή 5.

Είναι σημαντικό να γνωρίζετε τη διαφορά μεταξύ του τελεστή ανάθεσης (=) και του τελεστή ισότητας (== ή ===) στη JavaScript.

Στη JavaScript, οι μεταβλητές μπορούν να κρατήσουν αριθμούς όπως το 100 και κείμενο όπως το “John Doe”.

Στην προγραμματιστική γλώσσα, τα κείμενα ονομάζονται αλφαριθμητικά (text strings).

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

Τα αλφαριθμητικά γράφονται μέσα σε διπλά ή μονά εισαγωγικά. Οι αριθμοί γράφονται χωρίς εισαγωγικά.

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

Ας δούμε ένα παράδειγμα για τους τύπους δεδομένων στη JavaScript:

var number = 100; // Αριθμός
var text = "Hello"; // Αλφαριθμητικό

console.log(number); // Εκτύπωση του αριθμού
console.log(text); // Εκτύπωση του αλφαριθμητικού

var numberAsString = "200"; // Αλφαριθμητικό
var sum = number + numberAsString; // Συνένωση αριθμού και αλφαριθμητικού

console.log(sum); // Εκτύπωση του αποτελέσματος

var isTrue = true; // Λογική τιμή
var isFalse = false; // Λογική τιμή

console.log(isTrue); // Εκτύπωση της λογικής τιμής
console.log(isFalse); // Εκτύπωση της λογικής τιμής

Στο παραπάνω παράδειγμα, ορίζουμε μεταβλητές για αριθμούς (number), αλφαριθμητικά (text, numberAsString), και λογικές τιμές (isTrue, isFalse).

Με τη χρήση της console.log(), μπορούμε να εκτυπώσουμε τις τιμές των μεταβλητών στην κονσόλα του προγράμματος.

Παρατηρήστε ότι όταν συνενώνουμε έναν αριθμό με ένα αλφαριθμητικό, το αποτέλεσμα είναι μια συμβολοσειρά. Στο παράδειγμα, η μεταβλητή sum θα περιέχει τη συμβολοσειρά “100200”.

Μπορείτε να δηλώσετε πολλές μεταβλητές σε ένα μόνο statement.

Ξεκινήστε το statement με τη λέξη-κλειδί let και χωρίστε τις μεταβλητές με κόμμα. Ας δούμε ένα παράδειγμα:

let x = 5, y = 10, z = 15;

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

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

Στη συνέχεια, χρησιμοποιούμε τη console.log() για να εκτυπώσουμε τις τιμές των μεταβλητών x, y, και z.

[adinserter block=”5″]

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

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

Μια μεταβλητή που δηλώνεται χωρίς αρχική τιμή θα έχει την τιμή undefined.

Για παράδειγμα, η παρακάτω δήλωση:

var carName;

θα οδηγήσει τη μεταβλητή carName να έχει την τιμή undefined μετά την εκτέλεση της δήλωσης. Αυτό σημαίνει ότι η τιμή της μεταβλητής carName δεν έχει καθοριστεί ακόμα.

Μπορείτε να αναθέσετε μια τιμή στην carName αργότερα στο πρόγραμμά σας, όταν έχετε διαθέσιμη την κατάλληλη τιμή.

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

Η μεταβλητή carName θα διατηρήσει την τιμή της “Volvo” μετά την εκτέλεση αυτών των δηλώσεων:

var carName = "Volvo";
// Κάποιος κώδικας εδώ...
var carName = "BMW";

Ακόμα κι αν ξαναδηλώσετε τη μεταβλητή carName με την ίδια ή διαφορετική τιμή, η αρχική τιμή που της έχει ανατεθεί θα διατηρηθεί. Στο παράδειγμα παραπάνω, η carName θα έχει ακόμα την τιμή “Volvo” μετά τη δεύτερη δήλωση var carName = "BMW";.

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

Στη JavaScript, το δολάριο ($) θεωρείται ως ένα γράμμα και είναι έγκυρο να περιλαμβάνεται στα ονόματα μεταβλητών.

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

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

Το παραπάνω παράδειγμα δηλώνει μια μεταβλητή με όνομα $price και της αναθέτει την τιμή 10. Μετά μπορούμε να εκτυπώσουμε την τιμή της μεταβλητής χρησιμοποιώντας την console.log().

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