Δομές ελέγχου ροής: if statement

Στο προηγούμενο κεφάλαιο, κάναμε μια εισαγωγή στις δομές ελέγχου ροής. Σε αυτό το κεφάλαιο θα μιλήσουμε για την πιο απλή και διαδεδομένη από αυτές: το if statement. To if statement ανήκει στα λεγόμενα conditional statements.

Τί είναι τα conditional statements;#

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

Με αυτές τις δομές ελέγχου ορίζουμε ποιο μέρος του κώδικά μας θα εκτελεστεί. Στις επόμενες ενότητητες παρουσιάζονται ο τρόπος χρήσης και η σύνταξη των conditional statements: if, if...else και if...else if statements.

Το if statement#

To πιο απλό conditional statement είναι το if. Αυτό το statement εκτελεί ένα block κώδικα μόνο αν μια συγκεκριμένη συνθήκη είναι αληθής (true). Η συνθήκη είναι μια έκφραση (expression) που γίνεται evaluate σε μια boolean τιμή (true ή false).

Συντάσσεται ως εξής:

if (expression συνθήκης) {
  // Κώδικας που θα εκτελεστεί αν η συνθήκη είναι αληθής
}

Παράδειγμα:

const ηλικία = 20;

if (ηλικία >= 18) {
  console.log("Είστε ενήλικας.");
}

Σε αυτό το παράδειγμα, το expression ηλικία >= 18 επιστρέφει τιμή true (αφού το 20 είναι μεγαλύτερο ή ίσο του 18), οπότε το μήνυμα "Είστε ενήλικας." θα τυπωθεί στην κονσόλα μας. Αν η ηλικία ήταν 16, το expression ηλικία >= 18 θα ήταν false και το block κώδικα μέσα στο if δεν θα εκτελούνταν.

Το else statement#

Το παραπάνω παράδειγμα μας δείχνει πως μπορούμε να εκτελέσουμε ένα block κώδικα όταν η συνθήκη μας ικανοποιείται. Τι γίνεται όμως αν θέλουμε να εκτελέσουμε έναν άλλο block κώδικα σε περίπτωση που η συνθήκη είναι ψευδής (false); Σε αυτές τις περιπτώσεις χρησιμοποιούμε το else statement.

Συντάσσεται ως εξής:

if (expression συνθήκης) {
  // Κώδικας που θα εκτελεστεί αν η συνθήκη είναι true
} else {
  // Κώδικας που θα εκτελεστεί αν η συνθήκη είναι false
}

Το παρακάτω παράδειγμα θα τυπώσει "Δεν κάνει πολλή ζέστη.":

const θερμοκρασία = 15;

if (θερμοκρασία > 25) {
  console.log("Κάνει ζέστη!");
} else {
  console.log("Δεν κάνει πολλή ζέστη.");
}

else {
  console.log("Αυτό δεν δουλεύει έτσι!");
}
// 🤯 Uncaught SyntaxError: Unexpected token 'else'

Το else if statement#

Μερικές φορές έχουμε πολλαπλές συνθήκες που θέλουμε να ελέγξουμε διαδοχικά (ή όπως αλλιώς συνηθίζεται σειριακά) και για αυτό το λόγο η JavaScript μας παρέχει το else if statement. Μπορούμε να δημιουργήσουμε ένα conditional statement με όσα else if statements χρειαζόμαστε για να καλύψουμε τις ανάγκες του προγράμματός μας.

Το else if statement συντάσσεται ως εξής:

if (συνθήκη1) {
  // Κώδικας για τη συνθήκη1
} else if (συνθήκη2) {
  // Κώδικας για τη συνθήκη2
} else if (συνθήκη3) {
  // Κώδικας για τη συνθήκη3
} else {
  // Κώδικας που θα εκτελεστεί αν καμία από τις παραπάνω συνθήκες δεν είναι true
}

Στο παρακάτω παράδειγμα αυτό που θα τυπωθεί στη κονσόλα είναι η τιμή "Πολύ Καλά!":

const βαθμός = 75;

if (βαθμός >= 90) {
  console.log("Άριστα!");
} else if (βαθμός >= 70) {
  console.log("Πολύ Καλά!");
} else if (βαθμός >= 50) {
  console.log("Καλά.");
} else {
  console.log("Προσπάθησε περισσότερο την επόμενη φορά.");
}

Ο τρόπος που δουλεύει το else if statement είναι ο εξής:

• η JavaScript ελέγχει τις συνθήκες με τη σειρά,
• βρίσκει τη 1η συνθήκη που ικανοποιείται και εκτελεί το αντίστοιχο block,
• παρακάμπτει τα υπόλοιπα else if ή/και else statements.

Σε περίπτωση που κανένα από τα else if statements δεν ικανοποείται θα εκτελεστεί το else statement, η ύπαρξη του οποίου συναντάται πάντα στο τέλος της ακολουθίας και είναι προαιρετική. Όπως και με τα else statements έτσι και εδώ πρέπει πάντοτε να προηγείται ένα if statement διαφορετικά θα προκαλέσουμε SyntaxError.

Ο τελεστής συνθήκης ?:#

Για απλά if...else statements, η JavaScript προσφέρει έναν πιο σύντομο τρόπο γραφής γνωστό ως τελεστή συνθήκης ή τριαδικό τελεστή ή όπως ονομάζεται στα αγγλικά: ternary operator.

Ο συγκεκριμένος τελεστής συντάσεται με το ακόλουθο statement:

const αποτέλεσμα = expression συνθήκης ? τιμή_αν_true : τιμή_αν_false;

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

const ηλικία = 20;
const μήνυμα = ηλικία >= 18 ? "Ενήλικας" : "Ανήλικος";
console.log(μήνυμα); // Θα τυπώσει: "Ενήλικας"

const θερμοκρασία = 15;
const αίσθηση = θερμοκρασία > 25 ? "Ζέστη" : "Δροσιά";
console.log(αίσθηση); // Θα τυπώσει: "Δροσιά"

Ο ternary operator και το if...else εξυπηρετούν και οι δύο τον σκοπό της εκτέλεσης διαφορετικού κώδικα βάσει μιας συνθήκης. Ωστόσο, έχουν σημαντικές διαφορές στην σύνταξη και τη χρήση, γεγονός που καθορίζει πότε είναι πιο κατάλληλος ο ένας ή ο άλλος τρόπος.

Διαφορές με if...else statement#

Ας δούμε τις βασικές διαφορές.

Σύνταξη#

Η πιο εμφανής διαφορά μεταξύ των δύο είναι ότι το if...else δημιουργεί ένα block statement και, ως τέτοιο, μπορεί να εκτείνεται σε πολλαπλές γραμμές στον κώδικά μας, περικλείοντας πολλαπλά blocks που περιέχουν άλλα statements, κοκ. Αντίθετα, ο ternary operator είναι ένας τελεστής με τρία μέρη, ο οποίος επιστρέφει πάντοτε μία τιμή.

Τι επιστρέφουν;#

Το if...else είναι ένα statement. Αυτό σημαίνει ότι εκτελεί ένα block κώδικα, χωρίς να επιστρέφει άμεσα μια τιμή που μπορεί να εκχωρηθεί σε μια μεταβλητή ή να χρησιμοποιηθεί ως μέρος ενός μεγαλύτερου expression, κάτι που αποτελεί χαρακτηριστικό των expressions.

Από την άλλη, ο ternary operator είναι ένα expression και ως τέτοιο επιστρέφει πάντα μια τιμή, η οποία μπορεί να εκχωρηθεί απευθείας σε μια μεταβλητή ή να χρησιμοποιηθεί ως input σε μια function ή να αποτελέσει μέρος άλλων expressions.

Χρήση και καταλληλότητα#

• Τα if...else statements χρησιμοποιούνται συνήθως:

  • όταν υπάρχουν πολλαπλά σενάρια που πρέπει να εκτελεστούν
  • όταν ο κύριος σκοπός είναι να εκτελεστούν διεργασίες (πχ., να καλέσουμε συναρτήσεις ή να εμφανίσουμε μηνύματα) και όχι απαραίτητα να επιστρέψουμε μια τιμή

• ο ternary operator ?: χρησιμοποιείτε συνήθως:

  • όταν θέλετε να εκχωρήσουμε μια τιμή σε μια μεταβλητή βάσει μιας απλής συνθήκης
  • για συντομία και ευαναγνωσιμότητα

Σύνοψη#