Expressions και statements

Στον προγραμματισμό με JavaScript κάθε γραμμή κώδικα που γράφουμε ανήκει σε μια από δύο κατηγορίες: στις εκφράσεις (expressions) ή στις δηλώσεις (statements).

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

Το επεισόδιο στο YouTube#

Τι είναι τα Expressions;#

Όσοι έχετε παρακολουθήσει αυτή τη σειρά, ίσως να θυμάστε ένα από τα πρώτα μας βίντεο σχετικά με τα DevTools του Chrome. Πιο συγκεκριμένα, είχαμε δει πώς μπορούμε να χρησιμοποιήσουμε την κονσόλα που παρέχουν τα DevTools για να δίνουμε input και να παίρνουμε output, γράφοντας έτσι τον πρώτο μας κώδικα.

Αν θυμάστε, το input που δίναμε ήταν είτε απλοί αριθμοί, είτε strings, είτε “πράξεις” (operations) μεταξύ αριθμών, και αυτό που παίρναμε σαν output ήταν πάντοτε μια τιμή (value). Αυτά τα inputs δεν ήταν τίποτα περισσότερο από expressions.

Τα expressions, λοιπόν, είναι πολύ μικρές, αυτοτελείς μονάδες κώδικα οι οποίες πάντοτε επιστρέφουν μία τιμή.

Παραδείγματα Expressions#

Τα expressions μπορεί να αποτελούνται από:

• Μεμονωμένες τιμές: Όπως για παράδειγμα αριθμούς (10, 3.14) ή strings ("Hello World", "JavaScript").
• “Πράξεις” μεταξύ διαφορετικών τιμών: Εδώ δεν αναφερόμαστε μόνο σε μαθηματικές πράξεις (5 + 3, 10 / 2), αλλά και σε “πράξεις” ανάμεσα σε strings ("Hello" + " " + "World"), booleans (true && false), ή ακόμα και πιο σύνθετες εκφράσεις που περιλαμβάνουν μεταβλητές ή κλήσεις συναρτήσεων (console.log("foo")).

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

// Αριθμητικές εκφράσεις
5 + 3; // Επιστρέφει 8
10 * 2; // Επιστρέφει 20
Math.PI; // Επιστρέφει 3.14159...

// String expressions
"Γεια " + "σου"; // Επιστρέφει "Γεια σου"
`Το αποτέλεσμα είναι ${5 + 3}`; // Επιστρέφει "Το αποτέλεσμα είναι 8"

// Boolean expressions
5 > 3; // Επιστρέφει true
false || true; // Επιστρέφει true

// Κλήσεις συναρτήσεων
Math.max(1, 2, 3); // Επιστρέφει 3
parseInt("42"); // Επιστρέφει 42

Τι είναι τα Statements;#

Αντίστοιχα με τα expressions, και για τα statements υπάρχει ένας γενικός κανόνας: οτιδήποτε στον κώδικα εκτελεί μια διεργασία, τότε αυτό αποτελεί ένα statement. Μια διεργασία μπορεί να επιστρέφει μια τιμή, μπορεί και όχι.

Ίσως αναρωτιέστε τώρα, “μα καλά, τι είναι μια διεργασία;”

Ας ανατρέξουμε στο βίντεο με τα DevTools του Chrome, όπου χρησιμοποιούσαμε τα keywords var, let και const για να ορίσουμε μια μεταβλητή. Όλη αυτή η διαδικασία–δηλαδή, το να δεσμεύσουμε ένα μέρος της μνήμης του υπολογιστή για να αποθηκεύσουμε κάποια τιμή–αποτελεί μια διεργασία. Στο παράδειγμα που φέραμε, η διεργασία αυτή εκτελείται μέσω του variable declaration statement, δηλαδή του statement με το οποίο ορίζουμε ή, πιο σωστά, δηλώνουμε μεταβλητές.

Είδη Statements#

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

• Control flow statements:
  • Conditional statements: μας επιτρέπουν να καθορίζουμε τη ροή του προγράμματός μας, εκτελώντας κώδικα μόνο αν ισχύει μια συγκεκριμένη συνθήκη.
  • Loop statements: μας επιτρέπουν να εκτελούμε κώδικα επανειλημμένα για όσο ισχύει μια συνθήκη ή για συγκεκριμένο αριθμό εκτελέσεων.
• Function declarations statements: μας επιτρέπουν να δηλώνουμε συναρτήσεις.
• Class declarations statements: μας επιτρέπουν να δηλώνουμε κλάσεις.
• Object definitions statements: μας επιτρέπουν να ορίζουμε αντικείμενα.
• Exception handling statements: μας επιτρέπουν να διαχειριζόμαστε σφάλματα (exceptions).

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

Πώς ορίζονται τα statements στον κώδικα;#

Πώς δίνουμε υπόσταση σε ένα statement; Πώς το συμβολίζουμε στον κώδικα;

Κατά γενικό κανόνα, αυτό γίνεται κάνοντας χρήση των λεγόμενων reserved keywords και των συμβόλων σύνταξης της κάθε γλώσσας προγραμματισμού (παρενθέσεις (), άγκιστρα {}, κλπ.).

Παραδείγματα με statements#

Ακολουθούν απλά παραδείγματα με statements για να εξοικειωθούμε, οπτικά σε πρώτο στάδιο, με το πώς αυτά εμφανίζονται στον κώδικα.

Δήλωση μεταβλητής#

Σε αυτά τα παραδείγματα, ο κώδικας δεν επιστρέφει άμεσα μια τιμή στην κονσόλα (όπως ένα expression), αλλά εκτελεί τη διεργασία της δημιουργίας μιας μεταβλητής και αρχικοποίηση αυτές με μια τιμή:

let age = 30;
const name = "Alice";
var isActive = true;

Ανάθεση τιμής#

Αυτό το statement εκτελεί τη διεργασία της ανάθεσης μιας τιμής σε μια ήδη υπάρχουσα μεταβλητή:

let score = 0; // Δήλωση και αρχική ανάθεση (statement)
score = 100; // Αυτό είναι ένα assignment statement.

Δομή επιλογής#

Αυτά τα statements εκτελούν τη διεργασία του ελέγχου μιας συνθήκης και της εκτέλεσης κώδικα ανάλογα με το αν η συνθήκη είναι αληθής ή ψευδής:

let temperature = 25;

// Αυτό είναι ένα if...else statement.
if (temperature > 20) {
  // Αυτό το statement εκτελείται αν η συνθήκη είναι αληθής.
  console.log("It's a warm day!");
} else {
  // Αυτό το statement εκτελείται αν η συνθήκη είναι ψευδής.
  console.log("It's a bit chilly.");
}

Εδώ, όλο το block if (...) { ... } else { ... } είναι ένα ενιαίο statement, το οποίο ελέγχει τη ροή του προγράμματος. Για την ένοια του block θα μιλήσουμε σε επόμενο κεφάλαιο.

Βρόχος επανάληψης#

Αυτά τα statements εκτελούν τη διεργασία της επανάληψης ενός block κώδικα για συγκεκριμένο αριθμό επαναλήψεων ή για όσο ισχύει μια συνθήκη:

// Αυτό είναι ένα for loop statement.
for (let i = 0; i < 5; i++) {
  // Αυτό το statement εκτελείται σε κάθε επανάληψη.
  console.log("Iteration number:", i);
}

Διαφορά expressions και statements#

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

Ακόμα ένα παράδειγμα με κώδικα για να εμπεδώσουμε την έννοια των expressions:

let price = 10;
let quantity = 2;

// Επιστρέφει την τιμή 20 (το αποτέλεσμα του πολλαπλασιασμού)
price * quantity;

// Επιστρέφει την τιμή "Total: 20" (ένωση strings)
"Total: " + price * quantity;

// Επιστρέφει την τιμή true (το αποτέλεσμα της σύγκρισης)
price > 5;

Αντίστοιχα, με ένα JavaScript statement δίνουμε μια οδηγία στον υπολογιστή για να κάνει “κάτι”. Η διεργασία μπορεί να είναι οτιδήποτε, από το να αποθηκεύσει μια τιμή σε μια μεταβλητή, μέχρι να εμφανίσει κάτι στην οθόνη ή να αποφασίσει τι θα κάνει το πρόγραμμά μας στη συνέχεια.

// statement: δηλώνει τη μεταβλητή 'totalCost'
// και της αναθέτει την τιμή 0.
let totalCost = 0;

// statement: εκτελεί τη διεργασία της ανάθεσης του αποτελέσματος
// του expression 'price * quantity' στη μεταβλητή 'totalCost'.
totalCost = price * quantity;

// statement: εκτελεί τη διεργασία ελέγχου μιας συνθήκης.
if (totalCost > 15) {
  // statement: εκτελεί τη διεργασία εκτύπωσης ενός μηνύματος στην κονσόλα.
  console.log("This is an expensive purchase!");
} else {
  // statement: εκτελεί τη διεργασία εκτύπωσης ενός άλλου μηνύματος.
  console.log("This is a moderate purchase.");
}

Στο τελευταίο παράδειγμα, μπορείτε να δείτε πώς ένα statement (totalCost = price - quantity;) χρησιμοποιεί ένα expression (price - quantity) για να πάρει την τιμή που χρειάζεται για να ολοκληρώσει τη δική του διεργασία (την ανάθεση).