JavaScript telah berkembang pesat, dan salah satu peningkatannya adalah penggunaan let dan const dari ES6 (ECMAScript 2015). Berikut adalah dua kata kunci yang mengubah cara pengembang mendeklarasikan variabel, jauh lebih kuat dan lebih aman daripada var. Mempelajari cara kerja let dan const adalah faktor penting untuk menulis kode yang lebih bersih, lebih cepat, dan bebas dari bug.
Kekurangan dari var
Dengan diperkenalkannya ES6, var tidak lagi menjadi satu-satunya pilihan untuk mendeklarasikan variabel dalam JavaScript. Meskipun fungsional, var juga memiliki beberapa masalah:
- Lingkup Fungsi: var-Variabel yang Anda definisikan terbatas pada fungsi hanya di mana variabel tersebut didefinisikan. Penanganan lingkup yang hanya terbatas ini dapat menyebabkan beberapa perilaku yang aneh.
- Pengangkatan: Variabel yang dideklarasikan dengan var akan diangkat ke bagian atas ruang lingkupnya, tetapi tanpa nilai yang ditetapkan. Hal ini dapat menimbulkan ambiguitas dengan adanya variabel yang digunakan sebelum dideklarasikan.
- Tidak Ada Cakupan Level Blok: Sebuah var bukan merupakan lingkup blok, sehingga tersedia di luar blok mana pun ia berada. Hal ini dapat menyebabkan penimpaan atau kebocoran variabel yang tidak diinginkan.
Faktanya, itulah mengapa let dan const hadir sebagai padanan yang lebih modern untuk var yang kurang halus.
 |
| sumber:kodealgo.com |
Memahami let
Dengan let, Anda dapat mendefinisikan variabel dengan cakupan blok. Cakupan blok adalah area di dalam tanda kurung kurawal {}
Fitur-fitur let
1. Cakupan Tingkat Blok: Variabel yang dideklarasikan dengan menggunakan let memiliki cakupan blok, yang berarti variabel tersebut hanya dapat diakses di dalam blok definisinya.
if (true) {
let x = 10;
console.log(x); // Outputs: 10
}
console.log(x); // Error: x is not defined
2. Tanpa Pengangkatan (Untuk semua Tujuan Praktis): Let diangkat tetapi tidak diinisialisasi. Artinya, variabel tersebut tidak dapat diakses sampai setelah dideklarasikan.
console.log(y); // Error: Cannot access 'y' before initialization
let y = 20;
3. Penugasan Ulang Diizinkan: Variabel yang dideklarasikan menggunakan
let z = 5;
z = 15;
console.log(z); // Outputs: 15
Memahami const
Kata kunci const mendeklarasikan variabel dengan cakupan blok yang harus konstan - variabel tersebut tidak dapat ditugaskan ulang setelah ditetapkan.
Fitur-fitur const
1. Cakupan Tingkat Blok: Mirip dengan let, variabel const terbatas pada lingkup blok tempat variabel tersebut didefinisikan.
if (true) {
const a = 30;
console.log(a); // Outputs: 30
}
console.log(a); // Error: a is not defined
2. Tidak Ada Penugasan Ulang: Variabel konst tidak dapat diberikan nilai baru setelah ditetapkan
const b = 40;
b = 50; // Error: Assignment to constant variable.
3. Harus Diinisialisasi: variabel konst harus diberi nilai pada saat deklarasi.
const c; // Error: Missing initializer in const declaration.
Objek yang dapat berubah: Ini berarti kita tidak dapat menetapkan ulang variabel tetapi jika variabel tersebut menunjuk pada sebuah objek atau larik maka kita dapat mengubah isi objek atau isi larik tersebut.
const arr = [1, 2, 3];
arr.push(4);
console.log(arr); // Outputs: [1, 2, 3, 4]
Memilih Antara let dan const
Sebagai praktik terbaik secara umum, pilihlah const kecuali jika Anda tahu nilai variabel Anda akan berubah, dalam hal ini gunakan let. Hal ini membuat kode lebih mudah dibaca dan mencegah penugasan ulang yang tidak disengaja.
Contoh
const name = "Alice";
let age = 25;
age = 26;
console.log(`${name} is ${age} years old.`);
Penutup adalah bagian dari JavaScript ES5 dan memberi Anda cakupan leksikal. DEKLARASI VARIABEL 3ALUE Dalam contoh ini, nama dideklarasikan dengan const karena tidak akan berubah, sedangkan umur dideklarasikan dengan let karena nilainya diperbarui.
Kesimpulan
Pengenalan let dan const juga membantu meningkatkan JavaScript yang ditulis oleh para pengembang secara signifikan. Mereka menawarkan kode yang lebih aman dan lebih mudah diprediksi dengan memperkenalkan cakupan tingkat blok dan memperbaiki kesalahan var. Pendekatan ini membantu dalam membangun aplikasi yang lebih kuat dan mudah dipelihara.
kembali ke>>>> Memahami ES6: Fitur Baru dalam JavaScript