Συντ. JavaScript

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

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

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

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

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

Οι μεταβλητές που ορίζονται με const έχουν Εύρος αποκλεισμού

Δεν είναι δυνατή η εκ νέου ανάθεση

Δεν είναι δυνατή η εκ νέου αντιστοίχιση μιας μεταβλητής const:

Παράδειγμα

const PI = 3.141592653589793;
PI = 3.14;      // This will give an error
PI = PI + 10;   // This will also give an error

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>

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

<script>
try {
  const PI = 3.141592653589793;
  PI = 3.14;
}
catch (err) {
  document.getElementById("demo").innerHTML = err;
}
</script>

</body>
</html>

Πρέπει να ανατεθεί

Στις μεταβλητές const JavaScript πρέπει να εκχωρηθεί μια τιμή όταν δηλώνονται:

Σωστός

const PI = 3.14159265359;

Ανακριβής

const PI;
PI = 3.14159265359;

Πότε να χρησιμοποιήσετε το JavaScript const;

Να δηλώνετε πάντα μια μεταβλητή με const όταν γνωρίζετε ότι η τιμή δεν πρέπει να αλλάξει.

Χρησιμοποιήστε το const όταν δηλώνετε:

Ένας νέος πίνακας
Ένα νέο αντικείμενο
Μια νέα Λειτουργία
Ένα νέο RegExp

Σταθερά αντικείμενα και πίνακες

Η λέξη-κλειδί const είναι λίγο παραπλανητική.

Δεν ορίζει σταθερή τιμή. Ορίζει μια σταθερή αναφορά σε μια τιμή.

Εξαιτίας αυτού ΔΕΝ μπορείτε:

Εκχωρήστε ξανά μια σταθερή τιμή
Εκ νέου αντιστοίχιση ενός σταθερού πίνακα
Εκ νέου αντιστοίχιση ενός σταθερού αντικειμένου

Αλλά μπορείς:

Αλλάξτε τα στοιχεία του σταθερού πίνακα
Αλλάξτε τις ιδιότητες του σταθερού αντικειμένου

Σταθεροί πίνακες

Μπορείτε να αλλάξετε τα στοιχεία ενός σταθερού πίνακα:

Παράδειγμα

// You can create a constant array:
const cars = ["Saab", "Volvo", "BMW"];

// You can change an element:
cars[0] = "Toyota";

// You can add an element:
cars.push("Audi");

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>

<p>Declaring a constant array does NOT make the elements unchangeable:</p>

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

<script>
// Create an Array:
const cars = ["Saab", "Volvo", "BMW"];

// Change an element:
cars[0] = "Toyota";

// Add an element:
cars.push("Audi");

// Display the Array:
document.getElementById("demo").innerHTML = cars; 
</script>

</body>
</html>

Αλλά ΔΕΝ μπορείτε να εκχωρήσετε ξανά τον πίνακα:

Παράδειγμα

const cars = ["Saab", "Volvo", "BMW"];

cars = ["Toyota", "Volvo", "Audi"];    // ERROR

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>

<p>You can NOT reassign a constant array:</p>

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

<script>
try {
  const cars = ["Saab", "Volvo", "BMW"];
  cars = ["Toyota", "Volvo", "Audi"];
}
catch (err) {
  document.getElementById("demo").innerHTML = err;
}
</script>

</body>
</html>

Σταθερά Αντικείμενα

Μπορείτε να αλλάξετε τις ιδιότητες ενός σταθερού αντικειμένου:

Παράδειγμα

// You can create a const object:
const car = {type:"Fiat", model:"500", color:"white"};

// You can change a property:
car.color = "red";

// You can add a property:
car.owner = "Johnson";

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>

<p>Declaring a constant object does NOT make the objects properties unchangeable:</p>

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

<script>
// Create an object:
const car = {type:"Fiat", model:"500", color:"white"};

// Change a property:
car.color = "red";

// Add a property:
car.owner = "Johnson";

// Display the property:
document.getElementById("demo").innerHTML = "Car owner is " + car.owner; 
</script>

</body>
</html>

Αλλά ΔΕΝ μπορείτε να εκχωρήσετε ξανά το αντικείμενο:

Παράδειγμα

const car = {type:"Fiat", model:"500", color:"white"};

car = {type:"Volvo", model:"EX60", color:"red"};    // 
  ERROR

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript const</h2>

<p>You can NOT reassign a constant object:</p>

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

<script>
try {
  const car = {type:"Fiat", model:"500", color:"white"};
  car = {type:"Volvo", model:"EX60", color:"red"};
}
catch (err) {
  document.getElementById("demo").innerHTML = err;
}
</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

Μπλοκ πεδίου

Η δήλωση μιας μεταβλητής με const είναι παρόμοια με το let όταν πρόκειται για Εύρος αποκλεισμού.

Το x που δηλώνεται στο μπλοκ, σε αυτό το παράδειγμα, δεν είναι το ίδιο με το x που δηλώνεται εκτός του μπλοκ:

Παράδειγμα

const x = 10;
// Here x is 10

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

// Here x is 10

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

<!DOCTYPE html>
<html>
<body>

<h2>JavaScropt const variables has block scope</h2>

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

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

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

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

</body>
</html>

Μπορείτε να μάθετε περισσότερα σχετικά με το εύρος μπλοκ στο κεφάλαιο Πεδίο εφαρμογής JavaScript.

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

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

Παράδειγμα

var x = 2;     // Allowed
var x = 3;     // Allowed
  x = 4;         // Allowed

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

Παράδειγμα

var x = 2;     // Allowed
const x = 2;   // Not allowed

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

{
const x = 2;   // Allowed
const x = 2;   // Not allowed
}

Η εκ νέου αντιστοίχιση μιας υπάρχουσας μεταβλητής const, στο ίδιο πεδίο, δεν επιτρέπεται:

Παράδειγμα

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

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

Παράδειγμα

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

Ανέλκυση

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

Σημασία: Μπορείτε να χρησιμοποιήσετε τη μεταβλητή πριν δηλωθεί:

Παράδειγμα

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

 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>Οι μεταβλητές που ορίζονται με const ανυψώνονται επίσης στην κορυφή, αλλά δεν έχει αρχικοποιηθεί.

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

Παράδειγμα

alert (carName);
const carName = "Volvo";

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

<!DOCTYPE html>
<html>
<body>

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

<script>

try {
  alert(carName);
  const carName = "Volvo";
}
catch (err) {
  document.getElementById("demo").innerHTML = err;
}

</script>
</body>
</html>