"Cakupan" mengacu pada konteks eksekusi saat ini di mana kode Anda dapat merujuk atau "melihat" nilai dan ekspresi. Variabel, objek, dan fungsi dari berbagai bagian kode dapat diakses berdasarkan cakupannya.
Dalam JavaScript, variabel, objek, dan fungsi dapat memiliki lingkup global, lingkup modul, lingkup blok, atau lingkup fungsi.
Lingkup Global dalam JavaScript
Nilai apa pun yang dideklarasikan di luar fungsi atau blok dalam skrip memiliki cakupan global dan file skrip lainnya di program Anda dapat mengaksesnya.
Misalnya, mendeklarasikan variabel global dalam satu file:
// indeks.js
biarkan variabel global = "beberapa nilai"
Berarti skrip lain di program Anda dapat mengaksesnya:
// skrip lain.js
menghibur.log (Variabel global) // beberapa nilai
Mendeklarasikan variabel JavaScript dalam lingkup global adalah praktik yang buruk karena dapat menyebabkan polusi namespace. Namespace global adalah ruang atas Javascript yang berisi variabel, objek, dan fungsi. Di browser, itu dilampirkan ke Jendela objek, sedangkan NodeJS menggunakan objek bernama global.
Mencemari namespace global dapat menyebabkan tabrakan nama. Ini adalah situasi di mana kode Anda mencoba menggunakan nama variabel yang sama untuk hal yang berbeda dalam namespace yang sama. Tabrakan nama sering ditemui dalam proyek besar yang menggunakan beberapa perpustakaan pihak ketiga.
Lingkup Modul
Modul adalah file mandiri yang merangkum dan mengekspor potongan kode untuk modul lain dalam proyek untuk digunakan. Ini memungkinkan Anda untuk mengatur dan memelihara basis kode Anda dengan lebih efisien.
Modul ES diformalkan pola modul JavaScript dalam JavaScript pada tahun 2015.
Variabel yang Anda deklarasikan dalam modul dicakup ke modul itu, artinya tidak ada bagian lain dari program yang dapat mengaksesnya.
Anda hanya dapat menggunakan variabel yang dideklarasikan dalam modul di luarnya jika modul mengekspor variabel tersebut menggunakan ekspor kata kunci. Anda kemudian dapat mengimpor nama itu ke modul lain menggunakan impor kata kunci.
Berikut adalah contoh yang menunjukkan ekspor kelas:
// indeks.js
eksporkelasFoo{
konstruktor(properti_1, properti_2) {
ini.properti_1 = properti_1
ini.properti_2 = properti_2
}
}
Dan inilah cara Anda mengimpor modul itu dan menggunakan properti yang diekspornya:
// someModule.js
impor { Foo } dari './index.js'const bar = Foo baru('foo', 'batang')
menghibur.log (bar.properti_1) // foo
File tidak dideklarasikan sebagai modul secara default di JavaScript.
Di JavaScript sisi klien, Anda dapat mendeklarasikan skrip sebagai modul dengan menyetel Tipe atribut untuk modul pada naskah menandai:
<jenis skrip ="modul" src="index.js"></script>
Di NodeJS, Anda dapat mendeklarasikan skrip sebagai modul dengan mengatur Tipe properti untuk modul di kamu package.json mengajukan:
{
"Tipe": "modul"
}Lingkup Blok
Blok dalam JavaScript adalah tempat sepasang kurung kurawal dimulai dan diakhiri.
Variabel yang dideklarasikan dalam satu blok dengan membiarkan, dan konstan kata kunci dicakup ke blok itu, artinya Anda tidak dapat mengaksesnya di luar itu. Lingkup ini tidak berlaku untuk variabel yang dideklarasikan menggunakan var kata kunci:
{ // Awal blok
const satu = '1'
biarkan dua = '2'
var tiga = '3'
} // Akhir blokmenghibur.log (satu) // melempar kesalahan
menghibur.log (tiga) // "3"
Variabel yang diapit dalam blok di atas dan dideklarasikan sebagai const atau let hanya dapat diakses di dalam blok. Namun, Anda dapat mengakses variabel yang dideklarasikan menggunakan var kata kunci di luar blok.
Lingkup Fungsi
Variabel yang dideklarasikan di dalam suatu fungsi biasanya disebut sebagai variabel lokal dan dicakupkan ke dalam fungsi tersebut. Anda tidak dapat mengaksesnya di luar fungsi. Lingkup ini berlaku untuk variabel yang dideklarasikan dengan var, membiarkan, dan konstan kata kunci.
Karena variabel yang dideklarasikan dalam suatu fungsi bersifat lokal untuk fungsi tersebut, nama variabel dapat digunakan kembali. Menggunakan kembali nama variabel cakupan fungsi dikenal sebagai variabel shadowing, dan variabel luar dikatakan "dibayangi."
Sebagai contoh:
fungsiberkembang biak() {
membiarkan satu = 1
var dua = 2
konstan tiga = 3kembali satu dua tiga
}
// Bayangan variabel
konstan tiga = 'tiga' // Tidak menimbulkan kesalahan
Pemahaman tentang Aturan Cakupan Sangat Penting
Memahami cakupan yang tersedia dalam JavaScript memudahkan Anda menghindari kesalahan. Mencoba mengakses variabel yang tidak tersedia dalam lingkup tertentu adalah sumber bug yang matang.
Pemahaman tentang ruang lingkup juga melibatkan konsep seperti polusi namespace global, yang dapat membuat kode Anda lebih rentan terhadap bug.