24 KiB

Raw Blame History Unescape Escape

Βασικά Στοιχεία JavaScript: Μέθοδοι και Συναρτήσεις

Σκίτσο από την Tomomi Imura

Ερωτηματολόγιο πριν το μάθημα

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

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

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

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

Μπορείτε να παρακολουθήσετε αυτό το μάθημα στο Microsoft Learn!

Συναρτήσεις

Μια συνάρτηση είναι ένα αυτοτελές μπλοκ κώδικα που εκτελεί μια συγκεκριμένη εργασία. Ενσωματώνει λογική που μπορείτε να εκτελέσετε όποτε χρειάζεται.

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

Η περιγραφική ονομασία των συναρτήσεών σας είναι απαραίτητη. Μια καλά ονομασμένη συνάρτηση επικοινωνεί ξεκάθαρα τον σκοπό της – όταν βλέπετε cancelTimer(), καταλαβαίνετε αμέσως τι κάνει, όπως ένα κουμπί με σαφή ετικέτα σας λέει ακριβώς τι θα συμβεί όταν το πατήσετε.

Δημιουργία και κλήση συνάρτησης

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

function nameOfFunction() { // function definition
 // function definition/body
}

Ας το αναλύσουμε:

Η λέξη-κλειδί function λέει στη JavaScript "Γεια, δημιουργώ μια συνάρτηση!"
Το nameOfFunction είναι το σημείο όπου δίνετε στη συνάρτησή σας ένα περιγραφικό όνομα
Οι παρενθέσεις () είναι το σημείο όπου μπορείτε να προσθέσετε παραμέτρους (θα το δούμε σύντομα)
Οι αγκύλες {} περιέχουν τον πραγματικό κώδικα που εκτελείται όταν καλείτε τη συνάρτηση

Ας δημιουργήσουμε μια απλή συνάρτηση χαιρετισμού για να το δούμε στην πράξη:

function displayGreeting() {
  console.log('Hello, world!');
}

Αυτή η συνάρτηση εκτυπώνει "Hello, world!" στην κονσόλα. Μόλις την ορίσετε, μπορείτε να τη χρησιμοποιήσετε όσες φορές χρειαστεί.

Για να εκτελέσετε (ή "καλέσετε") τη συνάρτησή σας, γράψτε το όνομά της ακολουθούμενο από παρενθέσεις. Η JavaScript σας επιτρέπει να ορίσετε τη συνάρτηση πριν ή μετά την κλήση της – η μηχανή της JavaScript θα χειριστεί τη σειρά εκτέλεσης.

// calling our function
displayGreeting();

Όταν εκτελέσετε αυτή τη γραμμή, εκτελεί όλο τον κώδικα μέσα στη συνάρτηση displayGreeting, εμφανίζοντας "Hello, world!" στην κονσόλα του προγράμματος περιήγησης. Μπορείτε να καλέσετε αυτή τη συνάρτηση επανειλημμένα.

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

Καλές πρακτικές για συναρτήσεις

Ακολουθούν μερικές συμβουλές για να γράφετε καλές συναρτήσεις:

Δώστε στις συναρτήσεις σας σαφή, περιγραφικά ονόματα – ο μελλοντικός σας εαυτός θα σας ευχαριστήσει!
Χρησιμοποιήστε camelCasing για ονόματα με πολλές λέξεις (όπως calculateTotal αντί για calculate_total)
Κρατήστε κάθε συνάρτηση επικεντρωμένη στο να κάνει ένα πράγμα καλά

Περνώντας πληροφορίες σε μια συνάρτηση

Η συνάρτηση displayGreeting είναι περιορισμένη – μπορεί να εμφανίσει μόνο "Hello, world!" για όλους. Οι παράμετροι μας επιτρέπουν να κάνουμε τις συναρτήσεις πιο ευέλικτες και χρήσιμες.

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

Καταγράφετε τις παραμέτρους μέσα στις παρενθέσεις όταν ορίζετε τη συνάρτηση, χωρίζοντας πολλαπλές παραμέτρους με κόμματα:

function name(param, param2, param3) {

}

Κάθε παράμετρος λειτουργεί σαν θέση – όταν κάποιος καλεί τη συνάρτησή σας, θα παρέχει πραγματικές τιμές που θα τοποθετηθούν σε αυτά τα σημεία.

Ας ενημερώσουμε τη συνάρτηση χαιρετισμού μας ώστε να δέχεται το όνομα κάποιου:

function displayGreeting(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
}

Παρατηρήστε πώς χρησιμοποιούμε ανάποδα εισαγωγικά (`) και ${} για να εισάγουμε το όνομα απευθείας στο μήνυμα – αυτό ονομάζεται template literal και είναι ένας πολύ χρήσιμος τρόπος για να δημιουργείτε συμβολοσειρές με μεταβλητές.

Τώρα, όταν καλούμε τη συνάρτηση μας, μπορούμε να περάσουμε οποιοδήποτε όνομα:

displayGreeting('Christopher');
// displays "Hello, Christopher!" when run

Η JavaScript παίρνει τη συμβολοσειρά 'Christopher', την αναθέτει στην παράμετρο name και δημιουργεί το εξατομικευμένο μήνυμα "Hello, Christopher!"

Προεπιλεγμένες τιμές

Τι γίνεται αν θέλουμε να κάνουμε κάποιες παραμέτρους προαιρετικές; Εκεί είναι χρήσιμες οι προεπιλεγμένες τιμές!

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

function displayGreeting(name, salutation='Hello') {
  console.log(`${salutation}, ${name}`);
}

Εδώ, το name είναι ακόμα απαραίτητο, αλλά το salutation έχει μια εφεδρική τιμή 'Hello' αν κανείς δεν παρέχει διαφορετικό χαιρετισμό.

Τώρα μπορούμε να καλέσουμε αυτή τη συνάρτηση με δύο διαφορετικούς τρόπους:

displayGreeting('Christopher');
// displays "Hello, Christopher"

displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"

Στην πρώτη κλήση, η JavaScript χρησιμοποιεί το προεπιλεγμένο "Hello" αφού δεν καθορίσαμε χαιρετισμό. Στη δεύτερη κλήση, χρησιμοποιεί το προσαρμοσμένο "Hi". Αυτή η ευελιξία κάνει τις συναρτήσεις προσαρμόσιμες σε διαφορετικά σενάρια.

Τιμές επιστροφής

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

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

Για να στείλετε μια τιμή πίσω, χρησιμοποιείτε τη λέξη-κλειδί return ακολουθούμενη από ό,τι θέλετε να επιστρέψετε:

return myVariable;

Κάτι σημαντικό: όταν μια συνάρτηση φτάσει σε μια δήλωση return, σταματά αμέσως να εκτελείται και στέλνει αυτή την τιμή πίσω σε όποιον την κάλεσε.

Ας τροποποιήσουμε τη συνάρτηση χαιρετισμού μας ώστε να επιστρέφει το μήνυμα αντί να το εκτυπώνει:

function createGreetingMessage(name) {
  const message = `Hello, ${name}`;
  return message;
}

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

Για να χρησιμοποιήσουμε την επιστρεφόμενη τιμή, μπορούμε να την αποθηκεύσουμε σε μια μεταβλητή όπως οποιαδήποτε άλλη τιμή:

const greetingMessage = createGreetingMessage('Christopher');

Τώρα το greetingMessage περιέχει "Hello, Christopher" και μπορούμε να το χρησιμοποιήσουμε οπουδήποτε στον κώδικα μας – για να το εμφανίσουμε σε μια ιστοσελίδα, να το συμπεριλάβουμε σε ένα email ή να το περάσουμε σε μια άλλη συνάρτηση.

Συναρτήσεις ως παράμετροι για συναρτήσεις

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

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

Ας δούμε το setTimeout, που είναι μια ενσωματωμένη συνάρτηση που περιμένει ένα συγκεκριμένο χρονικό διάστημα και στη συνέχεια εκτελεί κάποιον κώδικα. Πρέπει να της πούμε ποιον κώδικα να εκτελέσει – τέλεια περίπτωση για να περάσουμε μια συνάρτηση!

Δοκιμάστε αυτόν τον κώδικα – μετά από 3 δευτερόλεπτα, θα δείτε ένα μήνυμα:

function displayDone() {
  console.log('3 seconds has elapsed');
}
// timer value is in milliseconds
setTimeout(displayDone, 3000);

Παρατηρήστε πώς περνάμε το displayDone (χωρίς παρενθέσεις) στο setTimeout. Δεν καλούμε τη συνάρτηση μόνοι μας – την παραδίδουμε στο setTimeout και λέμε "κάλεσε αυτή σε 3 δευτερόλεπτα."

Ανώνυμες συναρτήσεις

Μερικές φορές χρειάζεστε μια συνάρτηση για ένα μόνο πράγμα και δεν θέλετε να της δώσετε όνομα. Σκεφτείτε το – αν χρησιμοποιείτε μια συνάρτηση μόνο μία φορά, γιατί να γεμίσετε τον κώδικα σας με ένα επιπλέον όνομα;

Η JavaScript σας επιτρέπει να δημιουργείτε ανώνυμες συναρτήσεις – συναρτήσεις χωρίς ονόματα που μπορείτε να ορίσετε ακριβώς εκεί που τις χρειάζεστε.

Να πώς μπορούμε να ξαναγράψουμε το παράδειγμα του χρονοδιακόπτη χρησιμοποιώντας μια ανώνυμη συνάρτηση:

setTimeout(function() {
  console.log('3 seconds has elapsed');
}, 3000);

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

Συναρτήσεις με βέλη (Fat arrow functions)

Η σύγχρονη JavaScript έχει έναν ακόμη πιο σύντομο τρόπο να γράφετε συναρτήσεις, που ονομάζεται arrow functions. Χρησιμοποιούν το => (που μοιάζει με βέλος – το πιάσατε;) και είναι πολύ δημοφιλείς στους προγραμματιστές.

Οι συναρτήσεις με βέλη σας επιτρέπουν να παραλείψετε τη λέξη-κλειδί function και να γράψετε πιο συνοπτικό κώδικα.

Να το παράδειγμα του χρονοδιακόπτη μας χρησιμοποιώντας μια συνάρτηση με βέλος:

setTimeout(() => {
  console.log('3 seconds has elapsed');
}, 3000);

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

Πότε να χρησιμοποιείτε κάθε στρατηγική

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

🚀 Πρόκληση

Μπορείτε να εξηγήσετε με μία πρόταση τη διαφορά μεταξύ συναρτήσεων και μεθόδων; Δοκιμάστε το!

Πρόκληση GitHub Copilot Agent 🚀

Χρησιμοποιήστε τη λειτουργία Agent για να ολοκληρώσετε την παρακάτω πρόκληση:

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

Προτροπή: Δημιουργήστε ένα αρχείο JavaScript με όνομα mathUtils.js που περιέχει τις εξής συναρτήσεις:

Μια συνάρτηση add που παίρνει δύο παραμέτρους και επιστρέφει το άθροισμά τους
Μια συνάρτηση multiply με προεπιλεγμένες τιμές παραμέτρων (η δεύτερη παράμετρος προεπιλεγμένη στο 1)
Μια συνάρτηση με βέλος square που παίρνει έναν αριθμό και επιστρέφει το τετράγωνό του
Μια συνάρτηση calculate που δέχεται μια άλλη συνάρτηση ως παράμετρο και δύο αριθμούς, και στη συνέχεια εφαρμόζει τη συνάρτηση σε αυτούς τους αριθμούς
Επιδείξτε την κλήση κάθε συνάρτησης με κατάλληλες δοκιμαστικές περιπτώσεις

Μάθετε περισσότερα για τη λειτουργία agent εδώ.

Ερωτηματολόγιο μετά το μάθημα

Αποποίηση ευθύνης:
Αυτό το έγγραφο έχει μεταφραστεί χρησιμοποιώντας την υπηρεσία μετάφρασης AI Co-op Translator. Παρόλο που καταβάλλουμε προσπάθειες για ακρίβεια, παρακαλούμε να έχετε υπόψη ότι οι αυτοματοποιημένες μεταφράσεις ενδέχεται να περιέχουν λάθη ή ανακρίβειες. Το πρωτότυπο έγγραφο στη μητρική του γλώσσα θα πρέπει να θεωρείται η αυθεντική πηγή. Για κρίσιμες πληροφορίες, συνιστάται επαγγελματική ανθρώπινη μετάφραση. Δεν φέρουμε ευθύνη για τυχόν παρεξηγήσεις ή εσφαλμένες ερμηνείες που προκύπτουν από τη χρήση αυτής της μετάφρασης.

24 KiB Raw Blame History Unescape Escape