JavaScript Let

Πίνακας περιεχομένων

Εμφάνιση πίνακα περιεχομένων

Εισήχθη η λέξη-κλειδί let ES6 (2015)

Οι μεταβλητές που ορίζονται με let δεν μπορούν να δηλωθούν ξανά

Οι μεταβλητές που ορίζονται με let πρέπει να δηλωθούν πριν από τη χρήση

Οι μεταβλητές που ορίζονται με let έχουν Block Scope

Δεν μπορεί να επαναδηλωθεί

Οι μεταβλητές που ορίζονται με let δεν μπορούν να δηλωθούν εκ νέου.

Δεν μπορείτε να επαναδηλώσετε κατά λάθος μια μεταβλητή που έχει δηλωθεί με let.

Με το ας δεν μπορείτε να κάνετε αυτό:

let x = "John Doe";

let x = 0;

Με το var μπορείτε:

var x = "John Doe";

var x = 0;

Μπλοκ πεδίου

Πριν από το ES6 (2015), η JavaScript είχε Παγκόσμιο εύρος και Εύρος λειτουργίας.

Το ES6 παρουσίασε δύο σημαντικές νέες λέξεις-κλειδιά JavaScript: let και const.

Αυτές οι δύο λέξεις-κλειδιά παρέχουν Εύρος αποκλεισμού σε JavaScript.

Δεν είναι δυνατή η πρόσβαση στις μεταβλητές που δηλώνονται μέσα σε ένα μπλοκ { } έξω από το μπλοκ:

Παράδειγμα

{ 
  let x = 2;
  }
// x can NOT be used here

Οι μεταβλητές που δηλώνονται με τη λέξη-κλειδί var ΔΕΝ μπορούν να έχουν εμβέλεια αποκλεισμού.

Οι μεταβλητές που δηλώνονται μέσα σε ένα μπλοκ { } είναι προσβάσιμες από έξω από το μπλοκ.

Παράδειγμα

{ 
  var x = 2; 
  }
// x CAN be used here

Εκ νέου δήλωση μεταβλητών

Η εκ νέου δήλωση μιας μεταβλητής χρησιμοποιώντας τη λέξη-κλειδί var μπορεί να δημιουργήσει προβλήματα.

Η εκ νέου δήλωση μιας μεταβλητής μέσα σε ένα μπλοκ θα επαναδηλώσει επίσης τη μεταβλητή έξω από το μπλοκ:

Παράδειγμα

var x = 10;
// Here x is 10

{ 
var x = 2;
// Here x is 2
}

// Here x is 2

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>Redeclaring a Variable Using var</h2>

<p id="demo"></p>

<script>
var  x = 10;
// Here x is 10

{  
var x = 2;
// Here x is 2
}

// Here x is 2
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Η εκ νέου δήλωση μιας μεταβλητής χρησιμοποιώντας τη λέξη-κλειδί let μπορεί να λύσει αυτό το πρόβλημα.

Η εκ νέου δήλωση μιας μεταβλητής μέσα σε ένα μπλοκ δεν θα επαναδηλώνει τη μεταβλητή εκτός το μπλοκ:

Παράδειγμα

let x = 10;
// Here x is 10

{
let x = 2;
// Here x is 2
}

// Here x is 10

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>Redeclaring a Variable Using let</h2>

<p id="demo"></p>

<script>
let  x = 10;
// Here x is 10

{  
  let x = 2;
  // Here x is 2
}

// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Διαφορά μεταξύ var, let και const

	Scope	Redeclare	Reassign	Hoisted	Binds this
var	No	Yes	Yes	Yes	Yes
let	Yes	No	Yes	No	No
const	Yes	No	No	No	No

Τι είναι καλό?

ας και const έχουν μπλοκ εμβέλειας.

ας και const δεν μπορεί να επαναδηλωθεί.

ας και const πρέπει να δηλωθεί πριν από τη χρήση.

ας και const δεν δεσμεύεται σε αυτό.

ας και const δεν ανυψώνονται.

Τι δεν είναι καλό;

Το var δεν χρειάζεται να δηλωθεί.

Το var ανυψώνεται.

Το var συνδέεται με αυτό.

Υποστήριξη προγράμματος περιήγησης

Οι λέξεις-κλειδιά let και const είναι δεν υποστηρίζεται στον Internet Explorer 11 ή παλαιότερη έκδοση.

Ο παρακάτω πίνακας ορίζει τις πρώτες εκδόσεις του προγράμματος περιήγησης με πλήρη υποστήριξη:


Chrome 49	Edge 12	Firefox 36	Safari 11	Opera 36
Mar, 2016	Jul, 2015	Jan, 2015	Sep, 2017	Mar, 2016

Επαναδηλώνοντας

Επιτρέπεται η εκ νέου δήλωση μεταβλητής JavaScript με var οπουδήποτε σε ένα πρόγραμμα:

Παράδειγμα

var x = 2;
// Now x is 2

var x = 3;
// Now x is 3

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript let</h2>

<p>Redeclaring a JavaScript variable with <b>var</b> is allowed anywhere in a program:</p>

<p id="demo"></p>

<script>
var x = 2;
// Now x is 2

var x = 3;
// Now x is 3

document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Με το let, ΔΕΝ επιτρέπεται η εκ νέου δήλωση μεταβλητής στο ίδιο μπλοκ:

Παράδειγμα

var x = 2;   // Allowed
let x = 3;   // Not allowed

{
let x = 2;   // Allowed
let x = 3;   // Not allowed
}

{
let x = 2;   // Allowed
var x = 3;   // Not allowed
}

Επιτρέπεται η εκ νέου δήλωση μεταβλητής με let, σε άλλο μπλοκ:

Παράδειγμα

let x = 2;   // Allowed
{
let x = 3;   // Allowed
  }
  
  {
let x = 4;    // Allowed
  }

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript let</h2>

<p>Redeclaring a variable with <b>let</b>, in another scope, or in another block, is allowed:</p>

<p id="demo"></p>

<script>
let x = 2;   // Allowed

{
  let x = 3;   // Allowed
}

{
  let x = 4;   // Allowed
}
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>

Αφήστε Ανύψωση

Οι μεταβλητές που ορίζονται με var ανυψώνονται στην κορυφή και μπορεί να αρχικοποιηθεί ανά πάσα στιγμή. <p>Σημασία: Μπορείτε να χρησιμοποιήσετε τη μεταβλητή πριν δηλωθεί:

Παράδειγμα

Αυτό είναι εντάξει:

 carName = "Volvo";
  var carName;

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>

<p>With <b>var</b>, you can use a variable before it is declared:</p>

<p id="demo"></p>

<script>
carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
var carName;
</script>

</body>
</html>

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

Σημασία: Η χρήση μιας μεταβλητής let πριν δηλωθεί θα έχει ως αποτέλεσμα Σφάλμα αναφοράς:

Παράδειγμα

carName = "Saab";
let carName = "Volvo";

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Hoisting</h2>
<p>With <b>let</b>, you cannot use a variable before it is declared.</p>
<p id="demo"></p>

<script>
try {
  carName = "Saab";
  let carName = "Volvo";
}
catch(err) {
  document.getElementById("demo").innerHTML = err;
}
</script>

</body>
</html>