Arrow Function JavaScript Tutorial - Πώς να δηλώσετε μια συνάρτηση JS με τη νέα σύνταξη ES6

Ίσως έχετε δει τις λειτουργίες βέλους να γράφονται με διάφορους τρόπους.

//example 1 const addTwo = (num) => {return num + 2;}; //example 2 const addTwo = (num) => num + 2; //example 3 const addTwo = num => num + 2; //example 4 const addTwo = a => { const newValue = a + 2; return newValue; }; 

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

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

console.log(addTwo(2)); //Result: 4 

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

Μια σημαντική διαφορά

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

//Function expression const addNumbers = function(number1, number2) { return number1 + number2; }; //Arrow function expression const addNumbers = (number1, number2) => number1 + number2; 

Όταν επικαλούμεμε αυτές τις συναρτήσεις με τα ίδια επιχειρήματα, έχουμε το ίδιο αποτέλεσμα.

console.log(addNumbers(1, 2)); //Result: 3 

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

Παρενθέσεις

Ορισμένες λειτουργίες βέλους έχουν παρενθέσεις γύρω από τις παραμέτρους και άλλες όχι.

//Example with parentheses const addNums = (num1, num2) => num1 + num2; //Example without parentheses const addTwo = num => num + 2; 

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

Μια λειτουργία βέλους με μηδενικές παραμέτρους απαιτεί παρενθέσεις.

const hello = () => "hello"; console.log(hello()); //Result: "hello" 

Μια λειτουργία βέλος με μία παράμετρο δεν δεν απαιτεί παρενθέσεις. Με άλλα λόγια, οι παρενθέσεις είναι προαιρετικές.

const addTwo = num => num + 2; 

Έτσι μπορούμε να προσθέσουμε παρενθέσεις στο παραπάνω παράδειγμα και η λειτουργία βέλους εξακολουθεί να λειτουργεί.

const addTwo = (num) => num + 2; console.log(addTwo(2)); //Result: 4 

Η λειτουργία βέλους με πολλές παραμέτρους απαιτεί παρενθέσεις.

const addNums = (num1, num2) => num1 + num2; console.log(addNums(1, 2)); //Result: 3 

Οι λειτουργίες βέλους υποστηρίζουν επίσης παραμέτρους ανάπαυσης και καταστροφή . Και τα δύο χαρακτηριστικά απαιτούν παρενθέσεις.

Αυτό είναι ένα παράδειγμα μιας λειτουργίας βέλους με μια παράμετρο ανάπαυσης .

const nums = (first, ...rest) => rest; console.log(nums(1, 2, 3, 4)); //Result: [ 2, 3, 4 ] 

Και εδώ είναι που χρησιμοποιεί καταστροφές .

const location = { country: "Greece", city: "Athens" }; const travel = ({city}) => city; console.log(travel(location)); //Result: "Athens" 

Συνοψίζοντας: εάν υπάρχει μόνο μία παράμετρος - και δεν χρησιμοποιείτε παραμέτρους ανάπαυσης ή καταστροφή - τότε οι παρενθέσεις είναι προαιρετικές. Διαφορετικά, φροντίστε να τα συμπεριλάβετε.

Το σώμα λειτουργίας

Τώρα που έχουμε καλύψει τους κανόνες παρενθέσεων, ας στραφούμε στο σώμα λειτουργίας μιας λειτουργίας βέλους.

Ένα σώμα λειτουργίας βέλους μπορεί είτε να έχει "συνοπτικό σώμα" είτε "σώμα σώματος". Ο τύπος σώματος επηρεάζει τη σύνταξη.

Πρώτον, η σύνταξη «συνοπτικού σώματος».

const addTwo = a => a + 2; 

Η σύνταξη «συνοπτικού σώματος» είναι ακριβώς αυτό: είναι συνοπτικό! Δεν χρησιμοποιούμε τοreturnλέξη-κλειδί ή αγκύλες.

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

Τώρα ας δούμε τη σύνταξη “block body”.

const addTwo = a => { const total = a + 2; return total; } 

Σημειώστε ότι χρησιμοποιούμε τόσο αγκύλες και τη returnλέξη-κλειδί στο παραπάνω παράδειγμα.

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

Αντικείμενα και λειτουργίες βέλους

Υπάρχει μια ακόμη απόχρωση σύνταξης που πρέπει να γνωρίζετε: τυλίξτε το σώμα λειτουργίας σε παρένθεση όταν θέλετε να επιστρέψετε μια κυριολεκτική έκφραση αντικειμένου.

const f = () => ({ city:"Boston" }) console.log(f().city) 

Χωρίς παρενθέσεις, λαμβάνουμε ένα σφάλμα.

const f = () => { city:"Boston" } //Result: error 

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

Γράφω για την εκμάθηση του προγράμματος και τους καλύτερους τρόπους για να το κάνουμε ( amymhaddad.com).