Συναρτήσεις βέλους στη JavaScript - Αποτελεσματική χρήση

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

Βασικά συμπεράσματα

• Οι συναρτήσεις βέλους προσφέρουν μια συντομότερη σύνταξη σε σύγκριση με τις συμβατικές συναρτήσεις.
• Δεν έχουν το δικό τους πλαίσιο this, γεγονός που τις καθιστά ιδιαίτερα πρακτικές για χρήση σε συναρτήσεις επανάκλησης.
• Η αφαίρεση των τεθλασμένων αγκύλων και της δήλωσης return είναι δυνατή εάν η συνάρτηση επιστρέφει μόνο μια έκφραση.

Εισαγωγή στις συναρτήσεις βέλους

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

Για να καταλάβετε τι είναι οι συναρτήσεις Arrow, οι παραδοσιακές συναρτήσεις μπορούν να χρησιμοποιηθούν ως ένα καλό σημείο εκκίνησης. Αν δηλώσετε μια συνάρτηση με τη λέξη-κλειδί function, είναι συνήθως λίγο μεγαλύτερη και λιγότερο κομψή. Ακολουθεί ένα παράδειγμα μιας τυπικής συνάρτησης στη JavaScript:

function doIt() { console.log("Doing it"); }

Αυτό είναι το σημείο εκκίνησης από το οποίο προχωράμε στις συναρτήσεις Arrow.

Βήμα 1: Δήλωση μιας συνάρτησης Arrow

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

const doIt = () => { console.log("Doing it"); },

Όπως μπορείτε να δείτε, η σύνταξη είναι πολύ πιο συμπαγής. Μετά την πρώτη προσπάθεια, μπορείτε να ελέγξετε αν η συνάρτηση λειτουργεί σωστά.

Βήμα 2: Χρήση συναρτήσεων Arrow με πίνακες

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

const numbers = [2, 3, 4, 5]; const index = numbers.findIndex((element) => element === 3); console.log(index),

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

Βήμα 3: Σύντμηση των συναρτήσεων Arrow

Εάν μια συνάρτηση Arrow έχει μόνο μία έκφραση, μπορείτε να παραλείψετε τις τεθλασμένες αγκύλες και τη λέξη-κλειδί return. Έτσι φαίνεται όταν συντομεύουμε περαιτέρω τη συνάρτηση findIndex:

const index = numbers.findIndex(element => element === 3),

Αυτό δεν είναι μόνο συντομότερο, αλλά και πιο κομψό. Μπορείτε να δοκιμάσετε τη συνάρτηση και να βεβαιωθείτε ότι εξακολουθεί να λειτουργεί σωστά.

Βήμα 4: Αντιμετώπιση της λέξης-κλειδί this

Ένα αποφασιστικό πλεονέκτημα των συναρτήσεων Arrow είναι ο χειρισμός του πλαισίου this. Στις κλασικές συναρτήσεις, αυτό γίνεται συχνά απρόβλεπτο, ειδικά όταν η συνάρτηση χρησιμοποιείται ως callback. Οι συναρτήσεις Arrow, από την άλλη πλευρά, δεσμεύουν το this στο πλαίσιο στο οποίο ορίστηκε.

Ρίξτε μια ματιά στο ακόλουθο παράδειγμα:

const obj = { text: "Text", print: function() { console.log(this.text); } } },

obj.print(); // Εκδίδει "Text"

Ωστόσο, αν χρησιμοποιήσετε το setTimeout με μια συμβατική συνάρτηση, το πλαίσιο αυτού αλλάζει:

setTimeout(function() { console.log(this.text); }, 1000); // Outputs undefined

Χρησιμοποιώντας μια συνάρτηση βέλους μέσα στο setTimeout, έχετε το ίδιο αποτέλεσμα όπως με την κλασική συνάρτηση χωρίς να χάσετε το πλαίσιο:

setTimeout(() => { console.log(this.text); }, 1000); // Έξοδος "text"

Βήμα 5: Διατηρήστε την ανάθεση της this

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

const self = this; setTimeout(function() { console.log(self.text); }, 1000),

Πλεονεκτήματα των συναρτήσεων βέλους

• Είναι συντομότερες και πιο κομψές σε σύγκριση με τις συμβατικές δηλώσεις συναρτήσεων.
• Δεν έχουν το δικό τους πλαίσιο this, γεγονός που απλοποιεί τη χρήση τους σε συναρτήσεις επανάκλησης.
• Η σύνταξη σάς επιτρέπει να κάνετε τον κώδικα πολύ πιο ευανάγνωστο.

Περίληψη

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