Section Artikel
ECMAScript 2015
ES2015 memperkenalkan dua kata kunci JavaScript baru yang penting: let dan const.
Variabel yang didefinisikan dengan const berperilaku seperti variabel let, kecuali variabel const tidak dapat ditetapkan kembali.
Contoh:
<!DOCTYPE html> <html> <body> <h2>JavaScript const</h2> <p>Anda tidak dapat mengubah nilai primitif.</p> <p id="demo"></p> <script> try { const PI = 3.141592653589793; PI = 3.14; } catch (err) { document.getElementById("demo").innerHTML = err; } </script> </body> </html>
Lingkup Blok
Mendeklarasikan variabel dengan const mirip dengan let ketika menjadi Lingkup Blok.
X yang dideklarasikan di blok, dalam contoh ini, tidak sama dengan x yang dideklarasikan di luar blok.
Contoh:
<!DOCTYPE html> <html> <body> <h2>Mendeklarasikan Variabel Menggunakan const</h2> <p id="demo"></p> <script> var x = 10; // Here x is 10 { const x = 2; // Here x is 2 } // Here x is 10 document.getElementById("demo").innerHTML = x; </script> </body> </html>
Ditugaskan saat Dideklarasikan
Variabel const JavaScript harus diberi nilai ketika dideklarasikan, contoh:
Salah
const PI; PI = 3.14159265359;
Benar
const PI = 3.14159265359;
Bukan Konstanta Nyata
Kata kunci const sedikit menyesatkan.
Kata kunci ini TIDAK mendefinisikan nilai konstan tetapi mendefinisikan referensi konstan ke sebuah nilai.
Karena itu, kita tidak dapat mengubah nilai primitif konstan, tetapi kita dapat mengubah properti objek konstan.
Nilai Primitif
Jika kita menetapkan nilai primitif ke sebuah konstanta, kita tidak dapat mengubah nilai primitif tersebut.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript const</h2>
<p> Anda tidak dapat mengubah nilai primitif. </p>
<p id="demo"></p>
<script>
try {
const PI = 3.141592653589793;
PI = 3.14;
}
catch (err) {
document.getElementById("demo").innerHTML = err;
}
</script>
</body>
</html>
Objek Konstan dapat Berubah
Tetapi kita dapat mengubah properti objek konstan.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript const</h2>
<p> Mendeklarasikan objek konstan TIDAK membuat properti objek tidak bisa diubah: </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>
Tetapi Anda TIDAK dapat menetapkan ulang objek konstan.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript const</h2>
<p> Tapi Anda TIDAK dapat menetapkan ulang objek konstan: </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>
Array Konstanta dapat Berubah
Anda dapat mengubah elemen array konstanta.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript const</h2>
<p> Mendeklarasikan array konstan TIDAK membuat elemen tidak berubah: </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>
Tetapi Anda TIDAK dapat menetapkan ulang array konstan:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript const</h2>
<p> Anda TIDAK dapat menetapkan kembali array konstan: </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>
Dukungan Browser
Kata kunci const tidak didukung di Internet Explorer 10 atau versi yang lebih lama.
Tabel berikut menjelaskan versi browser pertama dengan dukungan penuh untuk kata kunci const:
| Chrome | Egde | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome 49 | IE / Edge 11 | Firefox 36 | Safari 10 | Opera 36 |
| Mar, 2016 | Oct, 2013 | Feb, 2015 | Sep, 2016 | Mar, 2016 |
Mendeklarasikan ulang
Mendeklarasikan ulang variabel JavaScript diperbolehkan di mana saja dalam program, contoh:
var x = 2; // Allowed var x = 3; // Allowed x = 4; // Allowed
Mendeklarasikan ulang atau menetapkan ulang var yang ada atau membiarkan variabel menjadi const, dalam cakupan yang sama, atau dalam blok yang sama, tidak diperbolehkan. Contoh:
var x = 2; // Allowed
const x = 2; // Not allowed
{
let x = 2; // Allowed
const x = 2; // Not allowed
}Mendeklarasikan ulang atau menetapkan ulang variabel const yang ada, dalam cakupan yang sama, atau dalam blok yang sama, tidak diperbolehkan. Contoh:
const x = 2; // Allowed
const x = 3; // Not allowed
x = 3; // Not allowed
var x = 3; // Not allowed
let x = 3; // Not allowed
{
const x = 2; // Allowed
const x = 3; // Not allowed
x = 3; // Not allowed
var x = 3; // Not allowed
let x = 3; // Not allowed
}Mendeklarasikan ulang variabel dengan const, di lingkup lain, atau di blok lain, diperbolehkan.
Contoh:
const x = 2; // Allowed
{
const x = 3; // Allowed
}
{
const x = 4; // Allowed
}Hoisting
Variabel yang ditentukan dengan var akan diangkat ke atas dan dapat diinisialisasi kapan saja (jika Anda tidak tahu apa itu Hoisting, baca Bab Hoisting tutorial pada web ini).
Artinya: Anda dapat menggunakan variabel sebelum dideklarasikan:
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Hoisting</h2>
<p> Dengan <b> var </b>, Anda dapat menggunakan variabel sebelum dideklarasikan: </p>
<p id="demo"></p>
<script>
carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
var carName;
</script>
</body>
</html>
Variabel yang ditentukan dengan konstanta diangkat ke atas blok, tetapi tidak diinisialisasi.
Artinya: Blok kode mengetahui adanya variabel, tetapi tidak dapat digunakan sampai dideklarasikan.
Menggunakan variabel const sebelum dideklarasikan akan menghasilkan SyntaxError.
Variabel berada dalam “zona mati sementara” dari awal blok hingga dideklarasikan.
Contoh:
Ini akan menghasilkan SyntaxError
<!DOCTYPE html> <html> <body> <h2>JavaScript Hoisting</h2> <p> Dengan <b> const </b>, Anda tidak dapat menggunakan variabel sebelum dideklarasikan: </p> <p id="demo"></p> <script> // Check the console, this next line will produce an error: carName = "Volvo"; document.getElementById("demo").innerHTML = carName; const carName; </script> </body> </html>
