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

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

Ας τα πάρουμε όμως τα πράγματα από την αρχή και ας απαντήσουμε εξ αρχής το βασικό ερώτημα που είναι: τι είναι ένα function.

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

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

 

 

Για να ορίσουμε ένα function πρέπει πάνω από όλα να χρησιμοποιήσουμε την λέξη κλειδί function. Αμέσως μετά δίνουμε ένα όνομα στο function. Στο συγκεκριμένο παράδειγμα το όνομα του function είναι sum. Αμέσως μετά το όνομα ακολουθούν παρενθέσεις που, αν και εφόσον το απαιτεί η λογική του κώδικα μας, μπορούμε να ορίσουμε παραμέτρους (parameters). Δεν υπάρχει όριο στον αριθμό των παραμέτρων αρκεί να χωρίζονται μεταξύ τους με κόμμα. Αφού λοιπόν ορίσουμε ο όνομα και τις παραμέτρους, μέσα σε άγκιστρα γράφουμε τον κώδικα που θα εκτελεστεί εφόσον καλέσουμε την συγκεκριμένη function. Στο παράδειγμα μας, προσθέτουμε τις τιμές που θα λάβουν οι δύο παράμετροι και αναθέτουμε το αποτέλεσμα σε μια καινούργια μεταβλητή. Τέλος, κάθε function πάντα επιστρέφει πίσω στο πρόγραμμα μια τιμή. Στο δικό μας παράδειγμα θα είναι η τιμή της μεταβλητής c. Εάν η function δεν επιστρέφει κάποια τιμή τότε επιστρέφει undefined.

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

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

Αφού λοιπόν ολοκληρώσουμε τον κώδικα του function είμαστε έτοιμοι να το καλέσουμε στο κώδικα μας. Για να εκτελέσουμε μια function αυτό που χρειάζεται μόνο να κάνουμε είναι να καλέσουμε το όνομα της function και μέσα στην παρένθεση να εισάγουμε τους αριθμούς ή γενικότερα τα στοιχεία που περιμένει. Στο κώδικα μας, καλούμε την function sum, που έχουμε ήδη ορίσει, περνώντας τους αριθμούς 3 και 8 σαν παραμέτρους. Το αποτέλεσμα της function το αποθηκεύουμε σε μια καινούργια μεταβλητή x το οποίο μάλιστα το δείχνουμε και στο browser.

Όταν ορίζουμε μια function, μπορούμε να καθορίσουμε εξ αρχής ποιες παραμέτρους και πόσες θα περιμένει να δεχτεί για να εκτελέσει τον κώδικα της. Φυσικά, όπως ήδη έχουμε αναφέρει, ο ορισμός των παραμέτρων είναι προαιρετικός. Αν όμως υπάρχουν παράμετροι και εμείς δεν εισάγουμε τιμές για όλες τις παραμέτρους που έχουν οριστεί, τότε η JavaScript θα ορίσει σαν undefined τις παραμέτρους για τις οποίες δεν δώσαμε τιμή. Στο πιο κάτω παράδειγμα το αποτέλεσμα θα είναι NaN γιατί η function προσπαθεί να προσθέσει to 3 με το undefined.

 

 

Αν τώρα, δώσουμε στην function περισσότερες τιμές από ότι περιμένει, τότε η JavaScript θα αγνοήσει τις έξτρα τιμές που περάσαμε.

 

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

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

 

 

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

 

 

Για να μάθουμε τον ακριβή αριθμό των παραμέτρων που περάστηκαν στην function, καλούμε την length μέθοδο στο arguments. Μην σας ξεγελάει το length στο arguments. To arguments δεν είναι array αλλά αντικείμενο. Αλλά για αυτά είναι νωρίς ακόμα να μιλήσουμε. Στην επόμενη ενότητα θα δούμε πως μπορούμε να χρησιμοποιήσουμε αρκετά καινούργια χαρακτηριστικά της ES6 όπως default values, rest parameters και destructuring και να αποφύγουμε το arguments.

Μιχάλης Κασάπογλου

Michail.Kassapoglou@gmail.com