7.3 break, continue και Iterables στην JavaScript

Τα break και continue είναι δύο δομές που χρησιμοποιούνται για τον έλεγχο της ροής των επαναλήψεων σε βρόχους στην JavaScript.

1. Το break: Χρησιμοποιείται για να διακόψετε μια επανάληψη ή μια switch δήλωση. Όταν η εντολή break εκτελείται μέσα σε έναν βρόχο, ο βρόχος τερματίζεται αμέσως και η εκτέλεση συνεχίζει από την πρώτη εντολή μετά τον βρόχο.

Παράδειγμα:

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

Η παραπάνω επανάληψη θα εκτυπώσει τους αριθμούς 0, 1, και 2, αλλά θα σταματήσει όταν φτάσει στο 3.

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

Παράδειγμα:

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

Η παραπάνω επανάληψη θα εκτυπώσει τους αριθμούς 0, 1, 3, και 4, αλλά θα παραλείψει τον αριθμό 2.

Τα break και continue είναι χρήσιμα εργαλεία για τον έλεγχο της ροής των επαναλήψεων, επιτρέποντας σας να διακόψετε την εκτέλεση ή να παραλείψετε συγκεκριμένες εντολές σε συγκεκριμένες περιπτώσεις.

[adinserter block=”2″]

Οι ετικέτες (labels) στην JavaScript είναι ένα χαρακτηριστικό που σας επιτρέπει να δινετε ονόματα σε συγκεκριμένα σημεία του κώδικα σας. Οι ετικέτες χρησιμοποιούνται συνήθως σε συνδυασμό με τις δομές επανάληψης (π.χ. for, while) και τη δομή switch.

Η σύνταξη της ετικέτας είναι απλή:

labelName: statement

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

Ένα κοινό παράδειγμα χρήσης ετικέτας είναι με την δομή for:

outerLoop: for (let i = 0; i < 5; i++) {
  innerLoop: for (let j = 0; j < 3; j++) {
    if (i === 2 && j === 1) {
      break outerLoop;
    }
    console.log(`i=${i}, j=${j}`);
  }
}

Στο παραπάνω παράδειγμα, έχουμε δημιουργήσει δύο ετικέτες outerLoop και innerLoop που σημειώνουν την επανάληψη for και την εσωτερική επανάληψη for αντίστοιχα. Με τη χρήση της ετικέτας break outerLoop;, μπορούμε να διακόψουμε την εκτέλεση της εξωτερικής επανάληψης (της outerLoop) από την εσωτερική επανάληψη (της innerLoop).

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

Στην JavaScript, τα Iterable αναφέρονται σε αντικείμενα που υποστηρίζουν τη δυνατότητα επανάληψης μέσω ενός μηχανισμού που ονομάζεται “iteration protocol”. Τα Iterable περιλαμβάνουν τα arrays, τα strings, τα maps, τα sets και άλλα δομικά στοιχεία της JavaScript.

Η επανάληψη πάνω σε ένα Iterable μπορεί να γίνει με τη χρήση δομών όπως το for…of, το forEach() και το spread operator (…). Ας δούμε μερικά παραδείγματα:

1. for…of:

const fruits = ["apple", "banana", "orange"];

for (const fruit of fruits) {
  console.log(fruit);
}
// Output: "apple", "banana", "orange"

2. forEach():

const numbers = [1, 2, 3];

numbers.forEach((number) => {
  console.log(number);
});
// Output: 1, 2, 3

3. Spread operator (…):

const set = new Set([1, 2, 3]);

const array = [...set];
console.log(array);
// Output: [1, 2, 3]

Σημειώστε ότι η δυνατότητα επανάληψης επάνω στα Iterable δεν περιορίζεται μόνο στα παραπάνω παραδείγματα. Μπορείτε να επαναλάβετε και πάνω σε άλλα Iterable, όπως τα characters ενός string ή τα key-value pairs ενός object, με τη βοήθεια του for…of ή του forEach().

[adinserter block=”3″]

Για να επαναλάβετε πάνω σε ένα string στην JavaScript, μπορείτε να χρησιμοποιήσετε τον βρόχο for...of, όπως και για τα arrays και άλλα Iterable. Ο βρόχος for...of σας επιτρέπει να προσπελάσετε κάθε χαρακτήρα του string έναν-έναν.

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

const message = "Hello, World!";

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

Το παραπάνω παράδειγμα θα επαναλάβει πάνω στο string message και θα εκτυπώσει τον κάθε χαρακτήρα του. Η έξοδος θα είναι:

H
e
l
l
o
,

W
o
r
l
d
!

Σε αυτό το παράδειγμα, ο βρόχος for...of προσπελαίνει κάθε χαρακτήρα του string message και τον αποθηκεύει στη μεταβλητή char, η οποία στη συνέχεια εκτυπώνεται.

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

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

Χρησιμοποιώντας τον βρόχο for…of:

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

for (const num of numbers) {
  console.log(num);
}

Το παραπάνω παράδειγμα θα επαναλάβει πάνω στο array numbers και θα εκτυπώσει το κάθε στοιχείο του. Η έξοδος θα είναι:

1
2
3
4
5

Χρησιμοποιώντας τον βρόχο forEach():

const fruits = ["apple", "banana", "orange"];

fruits.forEach((fruit) => {
  console.log(fruit);
});

Σε αυτό το παράδειγμα, καλούμε τη μέθοδο forEach() πάνω στο array fruits και περνάμε μια λειτουργία που πρέπει να εκτελείται για κάθε στοιχείο. Η λειτουργία λαμβάνει ως παράμετρο το κάθε στοιχείο του array και το εκτυπώνει. Η έξοδος θα είναι:

apple
banana
orange

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

Στην JavaScript, μπορείτε να προσπελάσετε ένα Set χρησιμοποιώντας τον βρόχο for...of, όπως κάναμε με το array. Το Set είναι μια δομή δεδομένων που αποθηκεύει μοναδικές τιμές, και μπορείτε να επαναλάβετε πάνω στις μοναδικές τιμές που περιέχονται μέσα στο Set.

Εδώ έχουμε ένα παράδειγμα που δείχνει πώς μπορείτε να επαναλάβετε πάνω σε ένα Set:

const mySet = new Set([1, 2, 3, 2, 4, 5]);

for (const value of mySet) {
  console.log(value);
}

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

1
2
3
4
5

Ο βρόχος for...of επαναλαμβάνει μόνο τις μοναδικές τιμές που περιέχονται στο Set, καθώς το Set διατηρεί μόνο μοναδικές τιμές και αφαιρεί τυχόν διπλότυπες.

Στην JavaScript, μπορείτε να προσπελάσετε ένα Map χρησιμοποιώντας τον βρόχο for...of. Το Map είναι μια δομή δεδομένων που αποθηκεύει ζεύγη “κλειδί-τιμή” (key-value pairs), και μπορείτε να επαναλάβετε πάνω στα ζεύγη “κλειδί-τιμή” που περιέχονται στο Map.

Εδώ έχουμε ένα παράδειγμα που δείχνει πώς μπορείτε να επαναλάβετε πάνω σε ένα Map:

const myMap = new Map();
myMap.set('name', 'John');
myMap.set('age', 30);
myMap.set('city', 'New York');

for (const [key, value] of myMap) {
  console.log(key, value);
}

Σε αυτό το παράδειγμα, δημιουργούμε ένα Map με ορισμένα ζεύγη “κλειδί-τιμή”, και μετά επαναλαμβάνουμε πάνω στο Map χρησιμοποιώντας τον βρόχο for...of. Στον βρόχο, τοποθετούμε δύο μεταβλητές key και value, που αναπαριστούν το κλειδί και την τιμή αντίστοιχα για κάθε ζεύγος στο Map. Η έξοδος θα είναι:

name John
age 30
city New York

Σημειώστε ότι ο βρόχος for...of επαναλαμβάνει μόνο τα ζεύγη “κλειδί-τιμή” που περιέχονται στο Map, και τα επιστρέφει ως ένα πίνακα με δύο στοιχεία: το κλειδί και την τιμή.