7.2 Οι δομές επανάληψης for και while

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

for (initialization; condition; increment/decrement) {
  // Κώδικας που θα εκτελείται κατά τη διάρκεια του βρόχου
}

Τα βήματα του βρόχου for είναι:

1. initialization: Αρχικοποιεί μια μεταβλητή που θα χρησιμοποιηθεί ως μετρητής ή για οποιοδήποτε άλλο σκοπό πριν από την έναρξη του βρόχου.
2. condition: Η συνθήκη που ελέγχεται κάθε φορά πριν από κάθε επανάληψη του βρόχου. Αν η συνθήκη είναι αληθής, ο βρόχος θα συνεχιστεί. Αν είναι ψευδής, ο βρόχος θα σταματήσει και η εκτέλεση του προγράμματος θα συνεχιστεί από την επόμενη εντολή μετά τον βρόχο.
3. increment/decrement: Μια εντολή που αυξάνει ή μειώνει την μεταβλητή του βρόχου πριν από κάθε επανάληψη του βρόχου.

Εδώ είναι ένα παράδειγμα ενός βρόχου for που εκτυπώνει τους αριθμούς από το 1 έως το 5:

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

Αυτός ο βρόχος θα εκτυπώσει τα παρακάτω:

1
2
3
4
5

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

[adinserter block=”2″]

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

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

Ωστόσο, η έκφραση 1 δεν είναι υποχρεωτική. Μπορείτε να αφήσετε την έκφραση 1 κενή, αν δεν χρειάζεται να αρχικοποιήσετε κάποια μεταβλητή ή να εκτελέσετε κάποια επιπλέον διαδικασία πριν από τον βρόχο.

Επίσης, όπως επισημάνατε, μπορείτε να αρχικοποιήσετε πολλές τιμές, χρησιμοποιώντας τον διαχωριστή κόμμα. Παρακάτω είναι ένα παράδειγμα που χρησιμοποιεί πολλές τιμές στην έκφραση 1:

let x = 1, y = 2, z = 3;

for (x = 1, y = 2, z = 3; x <= 5; x++) {
  console.log(x + y + z);
}

Αυτός ο βρόχος θα εκτυπώσει τα παρακάτω:

6
7
8
9
10

Μπορείτε να παραλείψετε την έκφραση 1 αν οι τιμές είναι ήδη ορισμένες πριν από τον βρόχο. Ας δούμε ένα παράδειγμα:

let i = 1;

for (; i <= 5; i++) {
  console.log(i);
}

Σε αυτό το παράδειγμα, η μεταβλητή i έχει ήδη οριστεί και αρχικοποιηθεί με την τιμή 1 πριν από τον βρόχο. Μπορείτε να παραλείψετε την έκφραση 1 και να την καθιερώσετε έξω από τον βρόχο. Ο βρόχος θα εκτελεστεί και θα εκτυπώσει τις τιμές από 1 έως 5, όπως και πριν.

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

Η έκφραση 2 συνήθως χρησιμοποιείται για να αξιολογήσει τη συνθήκη της αρχικής μεταβλητής (συνήθως της μεταβλητής που αρχικοποιείται στην έκφραση 1). Αν η έκφραση 2 επιστρέφει true, ο βρόχος θα ξεκινήσει ξανά. Αν επιστρέφει false, ο βρόχος θα τερματιστεί.

Μπορείτε επίσης να παραλείψετε την έκφραση 2, οπότε ο βρόχος θα εκτελεστεί μια φορά και μετά θα σταματήσει. Αν παραλείψετε και τις έκφραση 1 και 2, τότε ο βρόχος θα γίνει ένας ατέρμονος βρόχος, και θα συνεχίζει να εκτελείται για πάντα ή μέχρι να διακοπεί με μια εντολή break.

Ας δούμε μερικά παραδείγματα:

Παράδειγμα 1: Βρόχος με έκφραση 2

for (let i = 0; i < 5; i++) {
  console.log(i);
}

Σε αυτό το παράδειγμα, ο βρόχος θα εκτελεστεί 5 φορές, και θα εκτυπώσει τις τιμές από 0 έως 4.

Παράδειγμα 2: Ατέρμονος βρόχος

for (;;) {
  console.log('This is an infinite loop!');
  // Αν προσθέσετε την εντολή break εδώ, τότε ο βρόχος θα σταματήσει
}

Σε αυτό το παράδειγμα, ο βρόχος θα συνεχίσει να εκτελείται για πάντα και θα εκτυπώνει το μήνυμα “This is an infinite loop!” μέχρι να διακοπεί με μια εντολή break.

[adinserter block=”3″]

Η έκφραση 3 συνήθως χρησιμοποιείται για να αυξήσει την τιμή της αρχικής μεταβλητής (συνήθως της μεταβλητής που αρχικοποιείται στην έκφραση 1) κατά έναν συγκεκριμένο αριθμό με κάθε επανάληψη του βρόχου.

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

Ας δούμε μερικά παραδείγματα:

Παράδειγμα 1: Βρόχος με αύξηση της τιμής σε κάθε επανάληψη

for (let i = 0; i < 5; i++) {
  console.log(i);
}

Σε αυτό το παράδειγμα, ο βρόχος θα εκτελεστεί 5 φορές, και η τιμή της μεταβλητής i θα αυξάνεται κατά 1 σε κάθε επανάληψη.

Παράδειγμα 2: Βρόχος με αύξηση της τιμής με θετικό συντελεστή

for (let i = 0; i < 10; i = i + 2) {
  console.log(i);
}

Σε αυτό το παράδειγμα, ο βρόχος θα εκτελεστεί 5 φορές, και η τιμή της μεταβλητής i θα αυξάνεται κατά 2 σε κάθε επανάληψη.

Παράδειγμα 3: Αλλαγή της τιμής μέσα στον βρόχο

let sum = 0;
for (let i = 1; i <= 5; i++) {
  sum = sum + i;
}
console.log(sum); // Output: 15 (1 + 2 + 3 + 4 + 5)

Σε αυτό το παράδειγμα, ο βρόχος θα εκτελεστεί 5 φορές, και η τιμή της μεταβλητής sum θα αυξάνεται κατά i σε κάθε επανάληψη. Έτσι, το τελικό α

ποτέλεσμα θα είναι το άθροισμα των αριθμών από 1 έως 5 (1 + 2 + 3 + 4 + 5 = 15).

Όταν χρησιμοποιείτε τη λέξη-κλειδί var για να δηλώσετε μια μεταβλητή μέσα σε έναν βρόχο, η μεταβλητή έχει παγκόσμιο εύρος (global scope) και μπορεί να προσπελαστεί εκτός του βρόχου, εκτός αν δηλωθεί σε άλλον βρόχο. Αυτό μπορεί να οδηγήσει σε απρόβλεπτα αποτελέσματα ή σύγχυση, ειδικά όταν η μεταβλητή αλλάζει τιμή μέσα στον βρόχο.

Ας δούμε ένα παράδειγμα:

for (var i = 0; i < 5; i++) {
  console.log(i);
}

console.log(i); // Output: 5

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

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

Παράδειγμα με let:

for (let i = 0; i < 5; i++) {
  console.log(i);
}

console.log(i); // Error: i is not defined

Σε αυτό το παράδειγμα, η μεταβλητή i έχει τοπικό εύρος και δεν μπορεί να προσπελαστεί εκτός του βρόχου. Εάν προσπαθήσετε να τη χρησιμοποιήσετε εκτός του βρόχου, θα λάβετε ένα σφάλμα “i is not defined”.

Ο βρόχος for...in στην JavaScript χρησιμοποιείται για να διατρέξετε ιδιότητες ενός αντικειμένου. Συντακτικά, έχει την ακόλουθη μορφή:

for (variable in object) {
  // code to be executed
}

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

Ας δούμε ένα παράδειγμα:

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

for (let key in person) {
  console.log(key + ': ' + person[key]);
}

Στο παραπάνω παράδειγμα, ο βρόχος for...in διατρέχει τις ιδιότητες του αντικειμένου person. Σε κάθε επανάληψη, η μεταβλητή key λαμβάνει το όνομα της ιδιότητας (π.χ. “name”, “age”, “city”) και μπορούμε να χρησιμοποιήσουμε την key για να προσπελάσουμε την τιμή της αντίστοιχης ιδιότητας μέσω του person[key].

Αν θέλετε να διατρέξετε μόνο τις ιδιότητες του αντικειμένου και όχι τις ιδιότητες που έχουν κληρονομηθεί από το πρότυπο (prototype), μπορείτε να χρησιμοποιήσετε την hasOwnProperty() μέθοδο:

for (let key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key + ': ' + person[key]);
  }
}

Η hasOwnProperty() επιστρέφει true εάν η ιδιότητα ανήκει στο αντικείμενο, διαφορετικά επιστρέφει false. Έτσι, μπορούμε να βεβαιωθούμε ότι διατρέχουμε μόνο τις ιδιότητες που ανήκουν απευθείας στο αντικείμενο και όχι σε πρότυπα που έχουν κληρονομηθεί.

Ο βρόχος for...in μπορεί επίσης να χρησιμοποιηθεί για να διατρέξει τα στοιχεία ενός πίνακα (array). Σε αυτήν την περίπτωση, ο βρόχος θα διατρέξει τα δείκτες των στοιχείων του πίνακα, όχι τις τιμές τους.

[adinserter block=”4″]

Ας δούμε ένα παράδειγμα:

const numbers = [1, 2, 3, 4, 5];

for (let index in numbers) {
  console.log(numbers[index]);
}

Στο παραπάνω παράδειγμα, ο βρόχος for...in διατρέχει τους δείκτες του πίνακα numbers (0, 1, 2, 3, 4). Με την numbers[index] μπορούμε να προσπελάσουμε την τιμή κάθε στοιχείου του πίνακα.

Ωστόσο, ο βρόχος for...in δεν είναι πάντα η καλύτερη επιλογή για να διατρέξετε πίνακες, καθώς μπορεί να προκαλέσει προβλήματα αν το πρότυπο (prototype) του πίνακα έχει πρόσθετες ιδιότητες που δεν επιθυμείτε να διατρέξετε.

Για τη διάτρεξη πίνακα, προτιμήστε τον βρόχο for...of, που διατρέχει απευθείας τις τιμές του πίνακα, χωρίς να επηρεάζεται από πρόσθετες ιδιότητες στο πρότυπο.

const numbers = [1, 2, 3, 4, 5];

for (let number of numbers) {
  console.log(number);
}

Στο παραπάνω παράδειγμα, ο βρόχος for...of διατρέχει κατευθείαν τις τιμές του πίνακα numbers (1, 2, 3, 4, 5) και είναι πιο ασφαλής επιλογή όταν θέλετε να διατρέξετε πίνακες.

Η μέθοδος forEach() είναι μια χρήσιμη μέθοδος των πινάκων (arrays) στη JavaScript που διατρέχει κάθε στοιχείο του πίνακα και εκτελεί μια συνάρτηση (callback function) για κάθε στοιχείο.

Η σύνταξη είναι η εξής:

array.forEach(function(currentValue, index, arr) {
  // Κώδικας που εκτελείται για κάθε στοιχείο του πίνακα
});

Στη συνάρτηση που περνάμε στη μέθοδο forEach(), έχουμε τρία ορίσματα:

1. currentValue: Η τρέχουσα τιμή του στοιχείου που εξετάζεται.
2. index: Ο δείκτης (index) του τρέχοντος στοιχείου στον πίνακα.
3. arr: Ο ίδιος ο πίνακας που διατρέχεται.

Ας δούμε ένα παράδειγμα:

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number, index) {
  console.log(`Element at index ${index} is: ${number}`);
});

Αν το παραπάνω κώδικα τρέξει, θα εμφανίσει την παρακάτω έξοδο:

Element at index 0 is: 1
Element at index 1 is: 2
Element at index 2 is: 3
Element at index 3 is: 4
Element at index 4 is: 5

Η μέθοδος forEach() είναι πολύ βολική για να διατρέχετε έναν πίνακα και να εκτελείτε διάφορες ενέργειες για κάθε στοιχείο του.

Ο βρόχος for...of είναι μια νεότερη εισαγωγή στην JavaScript και χρησιμοποιείται για να διατρέξετε τα στοιχεία ενός πίνακα ή άλλου αντικειμένου που είναι “επαναλήψιμο” (iterable). Ο βρόχος αυτός επιτρέπει την απλούστευση του κώδικα σας και την εκτέλεση διαδικασιών για κάθε στοιχείο χωρίς την ανάγκη να χρησιμοποιείτε δείκτες ή να γνωρίζετε το μήκος του πίνακα.

Η σύνταξη είναι η εξής:

for (variable of iterable) {
  // Κώδικας που εκτελείται για κάθε στοιχείο του iterable
}

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

Ας δούμε ένα παράδειγμα χρησιμοποιώντας τον βρόχο for...of με έναν πίνακα:

const colors = ['red', 'green', 'blue'];

for (const color of colors) {
  console.log(color);
}

Η έξοδος θα είναι:

red
green
blue

Μπορείτε να χρησιμοποιήσετε τον βρόχο for...of για να διατρέξετε οποιοδήποτε αντικείμενο που είναι iterable, όπως πίνακες, συμβολοσειρές (strings), ορισμένα περιστατικά αντικείμενα (objects) και άλλα. Είναι μια πολύ βολική μέθοδος για να διατρέχετε στοιχεία χωρίς να απαιτείται η χρήση δεικτών ή επιπλέον λογικής.

[adinserter block=”5″]

Για να διατρέξετε έναν πίνακα στην JavaScript, μπορείτε να χρησιμοποιήσετε διάφορες μεθόδους βρόχου. Έχουμε ήδη δει τρεις από αυτές τις μεθόδους:

1. Ο βρόχος for:

const colors = ['red', 'green', 'blue'];

for (let i = 0; i < colors.length; i++) {
   console.log(colors[i]);
}

2. Ο βρόχος for...of:

const colors = ['red', 'green', 'blue'];

for (const color of colors) {
   console.log(color);
}

3. Η μέθοδος forEach():

const colors = ['red', 'green', 'blue'];

colors.forEach((color) => {
   console.log(color);
 });

Όλες οι παραπάνω μέθοδοι παράγουν την ίδια έξοδο:

red
green
blue

Η επιλογή ποια μέθοδος βρόχου να χρησιμοποιήσετε εξαρτάται από τις ανάγκες σας και την προτίμησή σας. Ο βρόχος for είναι πιο ευέλικτος και μπορεί να χρησιμοποιηθεί για περίπλοκες λογικές και διατροφή με δείκτες. Ο βρόχος for...of είναι πιο απλός και κατανοητός όταν θέλετε να διατρέξετε τα στοιχεία του πίνακα χωρίς να απαιτείται πρόσβαση στους δείκτες. Η μέθοδος forEach() είναι πιο δηλωτική και χρησιμοποιείται συχνά για να εφαρμόσετε μια λειτουργία σε κάθε στοιχείο του πίνακα. Επιλέξτε την μέθοδο που ταιριάζει καλύτερα στις ανάγκες του κώδικά σας.

Στην JavaScript, μπορείτε επίσης να διατρέξετε μια συμβολοσειρά (string) χρησιμοποιώντας τους βρόχους for, for...of και τη μέθοδο forEach(). Οι βρόχοι αυτοί θα επιτρέψουν να προσπελάσετε και να εκτελέσετε λειτουργίες σε κάθε χαρακτήρα της συμβολοσειράς.

Εδώ είναι μερικά παραδείγματα για τη διατροφή μιας συμβολοσειράς:

1. Χρήση βρόχου for:

const str = 'Hello';

for (let i = 0; i < str.length; i++) {
  console.log(str[i]);
}

2. Χρήση βρόχου for...of:

const str = 'Hello';

for (const char of str) {
  console.log(char);
}

3. Χρήση μεθόδου forEach() (πρέπει να μετατρέψετε τη συμβολοσειρά σε πίνακα χαρακτήρων):

const str = 'Hello';

Array.from(str).forEach((char) => {
  console.log(char);
});

Όλες αυτές οι μέθοδοι θα εμφανίσουν τους χαρακτήρες της συμβολοσειράς έναν-έναν:

H
e
l
l
o

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

Εδώ είναι η σύνταξη του βρόχου while:

while (condition) {
  // Σύνολο εντολών που θα εκτελεστεί όσο η συνθήκη είναι αληθής
}

Εδώ είναι ένα παράδειγμα που δείχνει πώς να χρησιμοποιήσετε τον βρόχο while:

let i = 0;

while (i < 5) {
  console.log(i);
  i++;
}

Σε αυτό το παράδειγμα, ο βρόχος while θα εκτελεστεί όσο η μεταβλητή i είναι μικρότερη από 5. Κάθε φορά που εκτελείται ο βρόχος, η τιμή της μεταβλητής i θα αυξάνεται κατά 1, και θα εκτυπώνεται η τιμή της i. Ο βρόχος θα συνεχιστεί μέχρι να γίνει i ίσο με 5. Το αποτέλεσμα θα είναι:

0
1
2
3
4

Ο βρόχος do...while είναι παρόμοιος με τον βρόχο while, αλλά με μια σημαντική διαφορά: Οι εντολές εντός του do θα εκτελεστούν τουλάχιστον μια φορά, ακόμα κι αν η συνθήκη δεν είναι αληθής.

Εδώ είναι η σύνταξη του βρόχου do...while:

do {
  // Σύνολο εντολών που θα εκτελεστεί τουλάχιστον μια φορά
} while (condition);

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

Εδώ είναι ένα παράδειγμα που δείχνει πώς να χρησιμοποιήσετε τον βρόχο do...while:

let i = 0;

do {
  console.log(i);
  i++;
} while (i < 5);

Σε αυτό το παράδειγμα, ο βρόχος do...while θα εκτελεστεί μια φορά και θα εκτυπώσει την τιμή της μεταβλητής i. Στη συνέχεια, θα ελέγξει αν η τιμή της i είναι μικρότερη από 5. Αν είναι, θα εκτελέσει το σύνολο εντολών ξανά, αυξάνοντας την τιμή της i κατά 1 σε κάθε επανάληψη. Ο βρόχος θα συνεχιστεί μέχρι η i να γίνει ίση με 5. Το αποτέλεσμα θα είναι το ίδιο με τον βρόχο while:

0
1
2
3
4

Οι βρόχοι for και while είναι δύο διαφορετικοί τρόποι να επαναλαμβάνουν ένα σύνολο εντολών στην JavaScript. Και οι δύο μπορούν να χρησιμοποιηθούν για να επιτευχθεί το ίδιο αποτέλεσμα, αλλά έχουν διαφορετική σύνταξη και χρήση.

Ο βρόχος for χρησιμοποιείται όταν οι επαναλήψεις είναι γνωστές εκ των προτέρων, και έχει την ακόλουθη σύνταξη:

for (initialization; condition; update) {
  // Σύνολο εντολών που θα εκτελεστεί σε κάθε επανάληψη
}

Η initialization είναι η αρχική τιμή της μεταβλητής που χρησιμοποιείται στον βρόχο. Η condition είναι η συνθήκη που ελέγχεται πριν από κάθε επανάληψη και αν είναι αληθής, το σύνολο εντολών εκτελείται. Η update είναι η εντολή που εκτελείται μετά από κάθε επανάληψη και χρησιμοποιείται για να ενημερώσετε την τιμή της μεταβλητής.

Εδώ είναι ένα παράδειγμα χρήσης του βρόχου for:

for (let i = 0; i < 5; i++) {
  console.log(i);
}

Ο βρόχος while, από την άλλη πλευρά, χρησιμοποιείται όταν οι επαναλήψεις δεν είναι γνωστές εκ των προτέρων, και έχει την ακόλουθη σύνταξη:

while (condition) {
  // Σύνολο εντολών που θα εκτελεστεί σε κάθε επανάληψη
}

Η condition είναι η συνθήκη που ελέγχεται πριν από κάθε επανάληψη και αν είναι αληθής, το σύνολο εντολών εκτελείται. Ο βρόχος while εκτελείται μόνο όσο η συνθήκη είναι αληθής.

Εδώ είναι ένα παράδειγμα χρήσης τ

ου βρόχου while:

let i = 0;

while (i < 5) {
  console.log(i);
  i++;
}

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