Υποενότητα 7.1: Εισαγωγή στην ES6

let vs var

Το 2015, κυκλοφόρησε ή ES6 (ECMAScript 6). Η EcmaScript δεν είναι άλλη γλώσσα, είναι στην πραγματικότητα το επίσημο όνομα για τηJavaScript.

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

Μία από τις κύριες αλλαγές αλλάζει πώς δηλώνουμε μια μεταβλητή με την αντικατάσταση του  var  με το let. 

Ποια είναι λοιπόν η διαφορά μεταξύ var και let;

Όταν δηλώνουμε μια μεταβλητή χρησιμοποιώντας var, αυτή η μεταβλητή έχει πεδίο "δράσης"  - function scope. Με αυτό, εννοούμε ότι η καθορισμένη μεταβλητή είναι προσβάσιμη σε οποιοδήποτε τμήμα του κώδικα της συνάρτησης.

Ας δούμε ένα παράδειγμα:

function myFunc () {
for (var i=0; i<10; i++) { 
// do something 
};
console.log(i);
}
myFunc ();

Σε αυτή την περίπτωση, το αποτέλεσμα του console.log θα είναι 10.

Εάν κάνουμε το ίδιο πράγμα χρησιμοποιώντας let:

function myFunc () {
for (let i=0; i<10; i++) { 
// do something 
};
console.log(i);
}
myFunc ();

το αποτέλεσμα θα είναι: "Uncaught ReferenceError: i is not defined"

Αυτό συμβαίνει επειδή σε αντίθεση με var, το let έχει πεδίο "δράσης" - block scope. Αυτό σημαίνει ότι η μεταβλητή είναι διαθέσιμη μόνο μέσα στο μπλοκ όπου δημιουργήθηκε

Στο επόμενο κεφάλαιο θα μάθουμε ποιο είναι το πλεονέκτημα της χρήσης block scope αντί γοα function scope. 

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

Πλεονεκτήματα του let

Το block scope οπου δρα το let μας βοηθά να ελαχιστοποιήσουμε τις πιθανότητες να κάνουμε λάθη.

Φανταστείτε ότι έχετε ένα μεγάλο κομμάτι κώδικα και χρησιμοποιείτε το var για να δηλώσετε τις μεταβλητές σας.

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

Για παράδειγμα:

function myFunc () {
var x = 100;
var x = 200;
console.log(x);
}
myFunc ();

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

Αν προσπαθήσουμε να εφαρμόσουμε το ίδιο παράδειγμα χρησιμοποιώντας let:

function myFunc () {
let x = 100;
let x = 200;
console.log(x);
}
myFunc ();

Η έξοδος της κονσόλας θα είναι:: "Uncaught SyntaxError: Identifier 'x' has already been declared"

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

Επιπλέον, το γεγονός ότι το let περιορίζεται σε block scope, καθιστά τον γενικότερο κώδικα πιο οργανωμένο, καθώς οι μεταβλητές υπάρχουν μόνο όταν πρέπει και όχι σε όλο τον κώδικα.

Συναρτήσεις βέλους – Arrow functions

Συναρτήσεις βέλους - Arrow functions είναι ένα ακόμη νέο χαρακτηριστικό της ES6. 

Παρέχουν έναν τρόπο γραφής συναρτήσεων με συντομότερη σύνταξη. Κυρίως, οι συναρτήσεις που μετατρέπονται σε Συναρτήσεις βέλους – Arrow functions είναι οι ανώνυμες συναρτήσεις - anonymous functions. 

Τι είναι ανώνυμες συναρτήσεις -  anonymous functions?

Anonymous είναι οι συναρτήσεις που δεν έχουν όνομα.

Η σύνταξη μιας anonymous function είναι:

function (parameters) {
// do something
}

Η μετατροπή της συνάρτησης αυτής σε arrow function είναι:

(parameters) => {
// do something
}

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

Αυτό που είναι ενδιαφέρον είναι ότι αυτό μπορεί να γίνει ακόμη πιο συνοπτικό.

Αν έχετε μόνο μια expression μπορείτε να παραλείψετε τα {}

(param1, param2, …, paramN) => expression

Αν έχετε μόνο μια parameter οι παρενθέσεις είναι προαιρετικές.

singleParam => { statements }

Παράδειγμα

Arrow function Example

Δείτε περισσότερα για τις Arrow functions

Άσκηση

Exercise

1. Κέντε δεξί κλικ για να κατεβάσετε - Download το αρχείο exersice07.1.3.html στον φάκελο "yourNameWEB2JS". Ανοίξτε το αρχείο στο πρόγραμμα περιήγησής σας για να δείτε τα αποτελέσματα.
2. Ανοίξτε το αρχείο στον επεξεργαστή σας και αντικαταστήστε τις functions wμε ith arrow functions. Θέλουμε να έχουμε το ίδιο αποτέλεσμα.

Answer:

//Example 1
    let setNameIds = (id, name) => ({ id: id, name: name });
//Example 2
    let multiply = (x, y) => { return x * y };
//Example 3
    let phraseSplitter = phrase => phrase.split(' ');