Di rumah Anda, Anda mungkin memiliki barang-barang di dapur atau di lorong yang dapat diakses oleh siapa saja yang tinggal di sana. Di kamar Anda, Anda mungkin memiliki beberapa barang pribadi yang mungkin Anda sukai hanya untuk digunakan sendiri. Contoh ini pada dasarnya adalah cara kerja cakupan di JavaScript. Ini adalah definisi aturan tentang bagaimana variabel, objek, dan fungsi dapat diakses saat kode dijalankan.

Cakupan dalam JavaScript mendefinisikan konteks kode saat ini. Pada tingkat dasar, ada dua cakupan dalam JavaScript, cakupan global dan cakupan lokal dan pada dasarnya ini menentukan variabel mana yang dapat diakses dan terlihat saat kode berjalan.

Apa cakupan globalnya?

Dalam JavaScript, program kami memiliki satu cakupan global. Variabel yang berada dalam lingkup global dapat diakses, diubah, dan terlihat dari mana saja dalam kode kita. Variabel dalam lingkup global juga tersedia sepanjang masa program kami dijalankan. Variabel yang dideklarasikan di luar suatu fungsi atau blok adalah bagian dari lingkup global.

Penting untuk berhati-hati saat mendeklarasikan variabel dalam lingkup global dan menjelaskan alasan kami melakukannya. Mendeklarasikan variabel dalam lingkup global dapat memakan memori ketika program dijalankan dan insiden penamaan dapat terjadi ketika variabel dengan nama yang sama dideklarasikan secara terpisah dalam lingkup kode kita yang berbeda. Di bawah ini adalah contoh variabel yang dideklarasikan dalam lingkup global.

var ourGlobalVariable = "Hello";
function someFunction() {
  return ourGlobalVariable;
}
someFunction();
//Returns ---> 'Hello'

Pada contoh di atas, kita mendeklarasikan variabel global ourGlobalVariable dan menginisialisasinya dengan string hello. Selanjutnya, kita mendefinisikan fungsi bernama someFunction yang akan mengembalikan ourGlobalVariable ketika dipanggil. Terakhir kita lanjutkan dan panggil fungsi someFunction yang mengembalikan string dari ourGlobalVariable. Semua ini hanya mungkin terjadi karena OurGlobalVariable berada dalam cakupan global dan dapat diakses dari mana saja.

Apa cakupan lokalnya?

Setiap kali cakupan baru dibuat di dalam cakupan global, misalnya, setiap kali Anda membuat fungsi, cakupan lokal baru akan dibuat. Variabel apa pun yang dibuat dalam lingkup lokal ini hanya dapat diakses dari dalam fungsi ini. Parameter fungsi juga digolongkan sebagai berada dalam lingkup lokal. Jika Anda mencoba mengaksesnya dari luar fungsi, JavaScript akan menimbulkan kesalahan.

Sejak ES6 kita dapat membagi cakupan lokal menjadi dua bagian, cakupan fungsi dan cakupan blok. Saat kita menggunakan variabel saat ini, kita biasanya menggunakan let atau const. Mengingat banyaknya kode yang ditulis sebelum ES6, ada baiknya kita mengenal var. Masing-masing variabel tersebut menggunakan scoping yang berbeda-beda seperti gambar di bawah ini:

  • var: Cakupan fungsi
  • const: Cakupan blok
  • biarkan: Blokir cakupannya

Apa itu ruang lingkup fungsi?

Ketika suatu variabel didefinisikan di dalam suatu fungsi, kita dapat mengatakan bahwa variabel tersebut memiliki cakupan fungsi. Jika Anda mencoba mengakses variabel lokal dari luar fungsi, itu didefinisikan sebagai kesalahan, khususnya, kesalahan referensi akan terjadi saat Anda menjalankan kode. Variabel yang didefinisikan dengan kata kunci let dan const akan berperilaku sama dalam lingkup fungsi seperti dalam lingkup blok.

function someFunction() {
  let ourLocalVariable = "Hello";
  return ourLocalVariable;
}
console.log(ourLocalVariable);
//Returns ---> VM95:7 Uncaught ReferenceError: ourGlobalVariable is not defined

Dalam contoh di atas, kita mendefinisikan fungsi yang disebut someFunction. Di dalam beberapa fungsi, pertama-tama kita mendeklarasikan sebuah variabel bernama OurLocalVariableyang diinisialisasi dengan string Hello. Fungsi tersebut kemudian mengembalikan variabel. Di luar fungsinya, jadi kembali ke lingkup global kami mencoba untuk console.log out nilai ourLocalVariable. Kami mendapatkan kesalahan referensi karena kami mencoba mengakses variabel cakupan lokal dari cakupan global.

function someFunction() {
  const ourGlobalVariable = "Hello";
  return ourGlobalVariable;
}
console.log(ourGlobalVariable);
//Returns ---> VM95:7 Uncaught ReferenceError: ourGlobalVariable is not defined

Pada contoh berikutnya, kita mengulangi langkah yang sama menggunakan variabel yang dibuat menggunakan const. Karena const dan let keduanya memiliki cakupan blok, kami mengalami masalah yang sama.

Apa itu cakupan blok?

Dalam JavaScript, blok adalah potongan kode yang ditempatkan di dalam sepasang kurung kurawal. Pernyataan kondisional dan loop keduanya merupakan contoh blok.

Cakupan blok berarti bahwa setiap kali blok dibuat, maka cakupan lokal baru juga dibuat. Saat kita membuat variabel di dalam sebuah blok, variabel tersebut kemudian dimasukkan ke dalam blok tersebut. Ini berarti bahwa variabel tidak dapat diakses dari luar blok. Jika Anda mencoba mengakses variabel yang didefinisikan di dalam blok dari luar blok, JavaScript akan menimbulkan kesalahan (kesalahan referensi). Cakupan blok tidak berlaku ketika kita mendefinisikan variabel dengan kata kunci var.

function ourScopeExample(){
    if (true){
        var one = "I was created using var";

    }
    console.log(one);
}

ourScopeExample();
//Returns ---> I was created using var

Pada contoh di atas, kita membuat fungsi bernama ourScopeExample. Di dalam fungsinya, kita membuat blok menggunakan pernyataan if. Di dalam pernyataan if kita kemudian membuat variabel bernama satuyang diinisialisasi dengan string. Di luar blok kita kemudian mencoba untuk console.log nilai variabel satu. Terakhir, kita memanggil fungsi ourScopeExample . Ketika kode ini dijalankan, string yang satu inisialisasi akan dicetak ke konsol. Alasan mengapa ini berhasil adalah karena var memiliki cakupan fungsi sehingga tidak ada aturan pelingkupan blok yang berlaku.

function ourScopeExample(){
    if(true){
        let two = "I was created using let";

    }
    console.log(two);
}

ourScopeExample();
//Returns ---> Uncaught ReferenceError: two is not defined

Kita sekarang melanjutkan dan mengulangi langkah yang sama tapi kali ini kita menggunakan let daripada var. Ketika kode dijalankan kali ini, kesalahan referensi dikembalikan karena let tercakup dalam blok dan tidak dapat diakses dari luar blok tempat kode itu dibuat. Jika kita ingin menjalankan kode ini, kita perlu melakukan sesuatu seperti contoh berikut.

function ourScopeExample(){
    if(true){
        let two = "I was created using let";
        console.log(two);
    }
}

ourScopeExample();
//Returns ---> I was created using let

Alternatifnya, kita bisa membawa let ke luar cakupan blok dan ke dalam cakupan luar fungsi. Hal ini membawa kita pada ruang lingkup leksikal.

function ourScopeExample(){
    let two = "I was created using let";
    if(true){
        console.log(two);
    }
}

ourScopeExample();
//Returns ---> I was created using let

Ruang lingkup leksikal

Cakupan leksikal adalah cara cakupan fungsi dapat mengakses variabel dari cakupan luar atau induk. Fungsi dalam atau anak terikat secara leksikal dengan fungsi luar/induk. Artinya, suatu fungsi dapat mengakses semua cakupannya, mulai dari cakupannya sendiri hingga dan termasuk cakupan global.

function outerParent(){
    var one = "I was created using var";        
    let two = "I was created using let";
    function innerChild(){
        console.log(one);
        console.log(two);
    }
    innerChild();
}

outerParent();
//Returns --->
//I was created using var
//I was created using let

Contoh di atas memberikan contoh lain dari lingkup leksikal. Kita membuat fungsi bernama outerParent yang didalamnya kita membuat dua variabel, one yang dibuat dengan var dan two yang dibuat dengan let. Kedua variabel ini diinisialisasi dengan string. Selanjutnya, kita membuat fungsi lain dan kita menyebutnya innerChild. Di dalam fungsi innerChild kita konsol mencatat nilai variabel satu dan dua. Tepat di luar fungsi innerChild, kita memanggil fungsi innerChild. Terakhir, di luar fungsi outerParent, kita memanggil fungsi outerParent. Ketika kode ini dijalankan di kedua console.logs berfungsi dengan sukses.

Saya harap Anda menikmati artikel ini, silakan kirimkan komentar, pertanyaan, atau masukan apa pun dan ikuti saya untuk konten lainnya!