Tutorial Belajar JavaScript Bagian 8 : Variabel Dalam JavaScript

0
798

Pada tutorial sebelumnya,kita sudah belajar Tutorial Belajar JavaScript Bagian 7 : Cara Menangani Event di JavaScript. Dalam tutorial ini, Anda akan belajar cara menggunakan keyword let JavaScript untuk mendeklarasikan variabel dalam blok.

Pengantar keyword Let JavaScript

Di ES5, saat Anda mendeklarasikan variabel menggunakan keyword var, cakupan variabelnya adalah global atau lokal.

  • Jika Anda mendeklarasikan variabel di luar sebuah function, maka cakupan variabel bersifat global.
  • Jika Anda mendeklarasikan variabel di dalam suatu function, cakupan variabelnya adalah lokal.

ES6 menyediakan cara baru untuk mendeklarasikan variabel dengan menggunakan keyword let. Keyword let mirip dengan keyword var, bedanya, perintah Let dibatasi ruang lingkupnya.

Sebagai contoh:

let nama_variabel;

Dalam JavaScript, sebuah blok dilambangkan dengan symbol kurung kurawal {} , misalnya if else, for, do while, while, try catch dan sebagainya:

if(kondisi) {
   // di dalam blok
}

Lihat contoh berikut :

let x = 10;
if (x == 10) {
    let x = 20;
    console.log(x); // 20: nilai variabel x di dalam blok if
}
console.log(x); // 10: nilai variabel x di awal penulisan kode

Cara kerja skrip :

  • Pertama, deklarasikan variabel x dan beri nilainya 10.
  • Kedua, deklarasikan variabel baru dengan nama yang sama, x di dalam blok if tetapi dengan nilai 20.
  • Ketiga, panggil nilai variabel x di dalam blok kode if dan di luar blok kode if.

Masing-masing variable ini bisa dipanggil dan memunculkan hasil yang berbeda walaupun sama sama memiliki nama x.

Ketika JavaScript membaca blok if, maka nilai X yang dibaca adalah 20.

Saat JavaScript selesai mengeksekusi blok if, variabel x di dalam blok if sudah tidak dibaca lagi. Oleh karena itu, nilai variabel x yang mengikuti blok if adalah 10.

Hal ini tidak bisa Anda lakukan jika menggunakan perintah var. Browser akan mengeluarkan pesan error jika Anda membuat 2 buah variable dengan nama yang sama dan nilai berbeda.

Let JavaScript dan Global Object

Saat Anda mendeklarasikan variabel global menggunakan keyword var, Anda menambahkan variabel tersebut ke daftar properti global object. Dalam browser web, objek globalnya adalah window. Sebagai contoh:

var a = 10;
console.log(window.a); // 10

Namun, saat Anda menggunakan keyword let untuk mendeklarasikan variabel, variabel tersebut tidak dilampirkan ke global object sebagai properti. Sebagai contoh:

let b = 20;
console.log(window.b); // undefined

Let JavaScript dan callback function dalam for loop

Lihat contoh berikut.

for (var i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i);
    }, 1000);
}

Maksud dari kode ini adalah untuk menghasilkan angka dari 0 hingga 4 ke console setiap detik. Namun, ternyata yang ditampilkan angka 5 sebanyak lima kali:

Dalam contoh ini, variabel i adalah variabel global. Setelah loop, nilainya adalah 5. Saat fungsi callback diteruskan ke fungsi setTimeout() dijalankan, mereka mereferensikan variabel yang sama i dengan nilai 5.

Di ES5, Anda dapat memperbaiki masalah ini dengan membuat cakupan lain sehingga setiap fungsi callback mereferensikan variabel baru.

Dan untuk membuat ruang lingkup baru, Anda perlu membuat sebuah fungsi. Biasanya, Anda menggunakan pola IIFE sebagai berikut:

for (var i = 0; i < 5; i++) {
    (function (j) {
        setTimeout(function () {
            console.log(j);
        }, 1000);
    })(i);
}

Output :

Di ES6, keyword let mendeklarasikan variabel baru di setiap iterasi loop. Oleh karena itu, Anda hanya perlu mengganti keyword var dengan keyword let untuk memperbaiki masalah tersebut:

for (let i = 0; i < 5; i++) {
    setTimeout(function () {
        console.log(i);
    }, 1000);
}

Dalam ES6, Anda dapat menggunakan fungsi panah untuk mempersingkat sebuah function sebagai berikut:

for (let i = 0; i < 5; i++) {
    setTimeout(() => console.log(i), 1000);
}

Cara penggunaan funsi panah ini akan kita pelajari pada tutorial selanjutnya.

Redeclaration

Keyword var memungkinkan Anda untuk mendeklarasikan ulang variabel tanpa masalah apa pun:

var counter = 0;
var counter;
console.log(counter); // 0

Namun, mendeklarasikan ulang variabel menggunakan keyword let akan menghasilkan error:

let counter = 0;
let counter;
console.log(counter);

Berikut pesan kesalahan yang akan Anda lihat di browser :

JavaScript let Variabel dan Hoisting

Mari kita periksa contoh berikut:

{
    console.log(counter); //
    let counter = 10;
}

Kode ini menampilkan pesan kesalahan:

Dalam contoh ini, mengakses variabel counter sebelum mendeklarasikannya menyebabkan ReferenceError.

JavaScript akan mengangkat variabel yang dideklarasikan oleh keyword let ke bagian atas blok. Namun, JavaScript tidak menginisialisasi variabel.

Oleh karena itu, saat Anda mereferensikan variabel yang tidak diinisialisasi, Anda akan mendapatkan ReferenceError.

Temporal Death Zone (TDZ)

Variabel yang dideklarasikan oleh keyword let memiliki apa yang disebut Temporal Death Zone (TDZ). TDZ adalah waktu dari awal blok hingga deklarasi variabel diproses.

Contoh berikut mengilustrasikan bahwa TDZ berbasis waktu, bukan berbasis lokasi.

{ // masukkan ruang lingkup baru, TDZ dimulai
    let log = function () {
        console.log(pesan); // messagedeclared later
    };
    // Ini adalah TDZ dan log akses
    // akan menyebabkan ReferenceError
    let pesan = 'Halo'; // TDZ berakhir
    log(); // dipanggil di luar TDZ
}

Dalam contoh ini:

  1. Pertama, kurung kurawal memulai ruang lingkup blok baru, oleh karena itu, TDZ dimulai.
  2. Kedua, ekspresi fungsi log() mengakses variabel pesan. Namun, fungsi log() belum dijalankan.
  3. Ketiga, deklarasikan variabel message dan inisialisasi nilainya menjadi ‘Hello’. Waktu dari awal ruang lingkup blok hingga waktu variabel pesan diakses disebut TDZ. Saat JavaScript memproses deklarasi, TDZ berakhir.
  4. Terakhir, panggil fungsi log() yang mengakses variabel pesan di luar TDZ.

Perhatikan bahwa jika Anda mengakses variabel yang dideklarasikan oleh keyword let di TDZ, Anda akan mendapatkan ReferenceError seperti yang diilustrasikan dalam contoh berikut.

{ // TDZ dimulai
    console.log(typeof myVar); // undefined
    console.log(typeof pesan); // ReferenceError
    let pesan; // TDZ berakhir
}

Perhatikan bahwa variabel myVar adalah variabel yang tidak ada, oleh karena itu, maka nilainya undefined.

TDZ mencegah Anda mereferensikan variabel secara tidak sengaja sebelum deklarasinya.

Kesimpulan

  • Variabel yang dideklarasikan menggunakan keyword let memiliki cakupan blok, tidak diinisialisasi ke nilai apa pun, dan tidak dilampirkan ke objek global.
  • Mendeklarasikan ulang variabel menggunakan keyword let akan menyebabkan kesalahan.
  • TDZ dari variabel yang dideklarasikan menggunakan keyword let dimulai dari blok hingga inisialisasi dievaluasi.

Semoga tutorial ini membantu Anda untuk mengenal perintah variabel dalam bahasa pemrograman JavaScript.

TINGGALKAN KOMENTAR

Silakan masukkan komentar anda!
Silakan masukkan nama Anda di sini

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.