Μοντέρνο JavaScript με ES6-ES13 (οδηγός JS)

Αυτό σε περιμένει σε αυτό το μάθημα JavaScript ES6.

Το JavaScript υπάρχει εδώ και πολλά χρόνια στους περιηγητές. Σχεδόν κάθε ιστοσελίδα περιέχει περισσότερο ή λιγότερο κώδικα JS. Αν και οι πρώτες εκδόσεις ήταν ακόμα πολύ τραχειες, μέχρι σήμερα μπορούσε να δουλέψει αρκετά καλά με το πρότυπο ES5, τουλάχιστον αν μπορούσε να αντιμετωπίσει διακριτικά τα εμπόδια και τις αβεβαιότητες. Λοιπόν, γιατί λοιπόν να μάθει κανείς κάτι νέο και να μην μείνει στα δοκιμασμένα; Σε αυτό το μάθημα δείχνω τα πλεονεκτήματα του νέου προτύπου ES6 και τους λόγους για τους οποίους στην πραγματικότητα δεν μπορείτε να το αγνοήσετε.

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

Ο κάθε web developer γνωρίζει τον βρόχο For. Συχνά χρησιμοποιείται για τη διάσχιση πίνακων. Με το ES6 υπάρχει μια παραλλαγή του For loop που επιτρέπει αυτό με πολύ μικρότερο και συμπαγές τρόπο.

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

Τα προαιρετικά παράμετρα μπορούν να υλοποιηθούν λίγο δύσκολα στο ES5 και δεν φαίνονται στον καλούντα μια συνάρτηση. Με το ES6, τα προαιρετικά παράμετρα μαζί με τις προκαθορισμένες τους τιμές γράφονται απευθείας στην υπογραφή της συνάρτησης.

Η αποσυνδυασμός (Destructuring) επιτρέπει τη στοχευμένη εξαγωγή στοιχείων από αντικείμενα και πίνακες. Καθώς κοιτάζουμε πιο προσεκτικά, πολλές εφαρμογές προκύπτουν που καθιστούν τον κώδικα JS πιο κομψό και συμπαγή.

Η χρήση της arguments-μεταβλητής ήταν απαραίτητη μέχρι το ES6 για να επιτραπεί μεταβλητός αριθμός παραμέτρων στις συναρτήσεις. Αυτό είναι πολύ πιο εύκολο στο ES6 με τα ούτω καλούμενα Rest-Παράμετρα.

Οχι μονο στον ορισμο συναρτησεων χρησιμοποιειται ο τελεστης …- με τους υπολοιπους παραμετρους, επισης με την ανα λυση πινακων μπορει να χρησιμοποιηθει για να "αποκτησει" τα "υπολοιπα" στοιχεια και να τα παρεχει ως πινακα.

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

Το αντίθετο του τελεστή υπολοίπου είναι ο τελεστής εξάπλωσης. Φαίνεται ακριβώς το ίδιο (…), αλλά βρίσκεται στην άλλη πλευρά μιας ανάθεσης και διαδίδει τον πίνακα στα μεμονωμένα του στοιχεία.

Το "κόλπος" με τον τελεστή διάδοσης λειτουργεί πολύ καλά και με αντικείμενα. Με αυτόν τον τρόπο μπορούμε να "ανακατεύουμε" αντικείμενα μέσα σε άλλα αντικείμενα. Ωστόσο, με τη χρήση της Object.assign() υπάρχει επίσης μια πολύ καλή εναλλακτική λύση γι' αυτό.

Οι λειτουργίες σε αντικειμενικά κλάσματα είναι πολύ δυσκίνητες να γραφτούν με τη λέξη-κλειδί function-. Με το ES6, όμως, μπορούν επίσης να γραφτούν πολύ πιο σύντομα και ευκολομνημόνευτα.

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

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

Αφού με τις υποσχέσεις μπορεί να αποφευχθεί η κόλαση των επαναλήψεων, το async/await-κονστράκτο επιβάλλει ακόμη περισσότερο τη σύνταξη ζάχαρης. Βασίζεται στις υποσχέσεις και επιτρέπει την προγραμματισμό ασύγχρονων ενεργειών σχεδόν σαν σύγχρονων. Όποιος έχει προγραμματίσει με async/await, αποφεύγει στο εξής την άμεση χρήση της μεθόδου then-των υποσχέσεων (και ακόμη περισσότερο τη χρήση των επαναλήψεων).

Πέρα από τη στατική εισαγωγή μονάδων με τη λέξη-κλειδί import, το ES6 υποστηρίζει επίσης τη δυναμική εισαγωγή με τη λειτουργία import-. Καθώς όλα αυτά λειτουργούν ασύγχρονα, επιστρέφεται ένα Promise, στο οποίο μπορεί να αναμένει κανείς εύκολα χρησιμοποιώντας το await. Έτσι, δεν υπάρχει πλέον εμπόδιο στη φόρτωση μονάδων κατά την εκτέλεση σε οποιαδήποτε σημείο.

Η κληρονομία βασίζεται ακόμη σε πρωτότυπα, γράφεται στο ES6 με τη λέξη-κλειδί extends ωστόσο πολύ πιο απλά και ευκολότερα. Κατά τη χρήση του, πρέπει να καλέσετε τον constructor της βασικής κλάσης την σωστή στιγμή με τη λέξη-κλειδί super. Πώς να το κάνετε αυτό εξηγείται φυσικά και σε αυτό το μάθημα.

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

Με τη νέα λέξη-κλειδί class και τα συναφή χαρακτηριστικά όπως η κληρονομικότητα και η ενθάρρυνση των δεδομένων (ιδιωτικά πεδία), οφείλουν να είναι ικανοποιημένοι όλοι οι αντικειμενοστρεφείς προγραμματιστές, σωστά; Θα ήθελα να παρουσιάσω σε αυτό το μάθημα μια εναλλακτική για τη δημιουργία αντικειμένων που λειτουργεί χωρίς κλάσεις, πρωτότυπα και this, αλλά που επιτρέπει μια ευέλικτη μορφή "κληρονομικότητας" ή, ακόμη καλύτερα, "σύνθεση".

Τα σημαντικότερα χαρακτηριστικά της έκδοσης ES6 και μεταγενέστερων πρέπει να έχουν αναλυθεί τώρα. Ωστόσο, συνεχώς προστίθενται νεώτερες εξελίξεις. Κάποιες λιγότερο συχνά χρησιμοποιούμενες λειτουργίες δεν έχουν ακόμη αναφερθεί. Σε αυτό το μάθημα θα εξηγηθεί τι ακόμη μπορεί να αναμένεται στο μέλλον και ποιες λειτουργίες μπορεί να είναι ακόμη ενδιαφέρουσες σε ειδικές περιπτώσεις.