19 KiB

Raw Permalink Blame History Unescape Escape

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

Σημειώσεις από Tomomi Imura

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

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

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

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

Συναρτήσεις

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

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

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

Η σύνταξη για μια συνάρτηση μοιάζει με την εξής:

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

Αν ήθελα να δημιουργήσω μια συνάρτηση για να εμφανίσω έναν χαιρετισμό, θα μπορούσε να μοιάζει με αυτό:

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

Όποτε θέλουμε να καλέσουμε (ή να ενεργοποιήσουμε) τη συνάρτησή μας, χρησιμοποιούμε το όνομα της συνάρτησης ακολουθούμενο από (). Αξίζει να σημειωθεί ότι η συνάρτησή μας μπορεί να οριστεί πριν ή μετά την απόφαση να την καλέσουμε. Ο μεταγλωττιστής της JavaScript θα την βρει για εσάς.

// calling our function
displayGreeting();

NOTE: Υπάρχει ένας ειδικός τύπος συνάρτησης γνωστός ως μέθοδος, τον οποίο ήδη χρησιμοποιείτε! Στην πραγματικότητα, το είδαμε στο παράδειγμά μας παραπάνω όταν χρησιμοποιήσαμε console.log. Αυτό που διαφοροποιεί μια μέθοδο από μια συνάρτηση είναι ότι η μέθοδος συνδέεται με ένα αντικείμενο (console στο παράδειγμά μας), ενώ η συνάρτηση είναι ανεξάρτητη. Θα ακούσετε πολλούς προγραμματιστές να χρησιμοποιούν αυτούς τους όρους εναλλακτικά.

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

Υπάρχουν μερικές καλές πρακτικές που πρέπει να έχετε υπόψη όταν δημιουργείτε συναρτήσεις:

Όπως πάντα, χρησιμοποιήστε περιγραφικά ονόματα ώστε να ξέρετε τι κάνει η συνάρτηση
Χρησιμοποιήστε camelCasing για να συνδυάσετε λέξεις
Κρατήστε τις συναρτήσεις σας επικεντρωμένες σε μια συγκεκριμένη εργασία

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

Για να κάνετε μια συνάρτηση πιο επαναχρησιμοποιήσιμη, συχνά θέλετε να της μεταβιβάσετε πληροφορίες. Αν εξετάσουμε το παράδειγμα displayGreeting παραπάνω, θα εμφανίζει μόνο Hello, world!. Όχι και η πιο χρήσιμη συνάρτηση που θα μπορούσε να δημιουργηθεί. Αν θέλουμε να την κάνουμε λίγο πιο ευέλικτη, όπως να επιτρέψουμε σε κάποιον να καθορίσει το όνομα του ατόμου που θα χαιρετήσει, μπορούμε να προσθέσουμε μια παράμετρο. Μια παράμετρος (που μερικές φορές ονομάζεται και όρισμα) είναι πρόσθετες πληροφορίες που στέλνονται σε μια συνάρτηση.

Οι παράμετροι αναφέρονται στο τμήμα ορισμού μέσα σε παρενθέσεις και χωρίζονται με κόμμα, όπως φαίνεται παρακάτω:

function name(param, param2, param3) {

}

Μπορούμε να ενημερώσουμε το displayGreeting ώστε να δέχεται ένα όνομα και να το εμφανίζει.

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

Όταν θέλουμε να καλέσουμε τη συνάρτηση και να περάσουμε την παράμετρο, την καθορίζουμε μέσα στις παρενθέσεις.

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

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

Μπορούμε να κάνουμε τη συνάρτησή μας ακόμη πιο ευέλικτη προσθέτοντας περισσότερες παραμέτρους. Αλλά τι γίνεται αν δεν θέλουμε να απαιτείται κάθε τιμή να καθορίζεται; Συνεχίζοντας με το παράδειγμα του χαιρετισμού, θα μπορούσαμε να αφήσουμε το όνομα ως απαραίτητο (χρειαζόμαστε να ξέρουμε ποιον χαιρετάμε), αλλά να επιτρέψουμε ο χαιρετισμός να προσαρμόζεται όπως επιθυμεί κάποιος. Αν κάποιος δεν θέλει να τον προσαρμόσει, παρέχουμε μια προεπιλεγμένη τιμή. Για να παρέχουμε μια προεπιλεγμένη τιμή σε μια παράμετρο, την ορίζουμε όπως ακριβώς ορίζουμε μια τιμή για μια μεταβλητή - parameterName = 'defaultValue'. Για να δείτε ένα πλήρες παράδειγμα:

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

Όταν καλούμε τη συνάρτηση, μπορούμε να αποφασίσουμε αν θέλουμε να ορίσουμε μια τιμή για το salutation.

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

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

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

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

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

Αν μια συνάρτηση επιστρέφει κάτι, τότε χρησιμοποιείται η λέξη-κλειδί return. Η λέξη-κλειδί return αναμένει μια τιμή ή αναφορά αυτού που επιστρέφεται, όπως φαίνεται παρακάτω:

return myVariable;

Θα μπορούσαμε να δημιουργήσουμε μια συνάρτηση για να δημιουργήσουμε ένα μήνυμα χαιρετισμού και να επιστρέψουμε την τιμή πίσω στον καλούντα.

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

Όταν καλούμε αυτή τη συνάρτηση, θα αποθηκεύσουμε την τιμή σε μια μεταβλητή. Αυτό είναι πολύ παρόμοιο με τον τρόπο που θα ορίζαμε μια μεταβλητή σε μια στατική τιμή (όπως const name = 'Christopher').

const greetingMessage = createGreetingMessage('Christopher');

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

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

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

Αν εκτελέσετε τον παρακάτω κώδικα, μετά από 3 δευτερόλεπτα θα δείτε το μήνυμα 3 seconds has elapsed.

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

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

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

Όταν περνάμε μια συνάρτηση ως παράμετρο, μπορούμε να παρακάμψουμε τη δημιουργία της εκ των προτέρων και να την κατασκευάσουμε ως μέρος της παραμέτρου. Χρησιμοποιούμε την ίδια λέξη-κλειδί function, αλλά την κατασκευάζουμε ως παράμετρο.

Ας ξαναγράψουμε τον παραπάνω κώδικα για να χρησιμοποιήσουμε μια ανώνυμη συνάρτηση:

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

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

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

Ένα σύντομο κόλπο που είναι κοινό σε πολλές γλώσσες προγραμματισμού (συμπεριλαμβανομένης της JavaScript) είναι η δυνατότητα χρήσης αυτού που ονομάζεται arrow ή fat arrow συνάρτηση. Χρησιμοποιεί έναν ειδικό δείκτη =>, που μοιάζει με βέλος - εξ ου και το όνομα! Χρησιμοποιώντας το =>, μπορούμε να παραλείψουμε τη λέξη-κλειδί function.

Ας ξαναγράψουμε τον κώδικα μας μία ακόμη φορά για να χρησιμοποιήσουμε μια συνάρτηση με βέλος:

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

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

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

🚀 Πρόκληση

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

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

Ανασκόπηση & Αυτομελέτη

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

Εργασία

Διασκέδαση με Συναρτήσεις

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

19 KiB Raw Permalink Blame History Unescape Escape