Halaman ini diterjemahkan oleh Cloud Translation API.

Cakupan variabel global dan lokal

Dalam artikel ini, Anda akan mempelajari cakupan dan cara kerjanya di JavaScript.

Cakupan adalah konsep dasar dalam JavaScript dan bahasa pemrograman lainnya yang menentukan konteks di mana variabel diakses dan digunakan. Hal ini akan menjadi lebih berguna dan berlaku untuk kode Anda saat Anda terus mempelajari JavaScript dan bekerja lebih banyak dengan variabel.

Cakupan dapat membantu Anda:

Gunakan memori secara lebih efisien: Cakupan memberikan kemampuan untuk memuat variabel hanya saat diperlukan. Jika variabel berada di luar cakupan, Anda tidak perlu menyediakannya untuk kode yang sedang dieksekusi.
Menemukan dan memperbaiki bug dengan lebih mudah: Mengisolasi variabel dengan cakupan lokal mempermudah pemecahan bug dalam kode karena, tidak seperti variabel global, Anda dapat memercayai bahwa kode dari luar cakupan tidak dapat memanipulasi variabel cakupan lokal.
Membuat blok kecil kode yang dapat digunakan kembali: Misalnya, Anda dapat menulis fungsi murni yang tidak bergantung pada cakupan luar. Anda dapat dengan mudah memindahkan fungsi seperti itu ke tempat lain dengan sedikit perubahan.

Apa yang dimaksud dengan ruang lingkup?

Cakupan variabel menentukan tempat Anda dapat menggunakan variabel di dalam kode.

JavaScript menentukan variabel cakupan global atau lokal:

Variabel dengan cakupan global tersedia dari semua cakupan lain dalam kode JavaScript.
Variabel dengan cakupan lokal hanya tersedia dalam konteks lokal tertentu dan dibuat oleh kata kunci, seperti var, let, dan const. Jika Anda menggunakan kata kunci var, let, atau const untuk membuat variabel dalam fungsi, variabel tersebut memiliki cakupan lokal.

Bagian selanjutnya dalam artikel ini membahas cakupan blok dan leksikal:

Variabel cakupan blok tersedia secara lokal untuk blok seperti yang ditentukan oleh lokasi tanda kurung kurawal tempat pernyataan blok ditentukan. Hanya variabel yang dideklarasikan dengan kata kunci let atau const yang memiliki cakupan blok.
Cakupan leksikal menggunakan lokasi tempat variabel dideklarasikan dalam kode sumber untuk menentukan tempat variabel tersebut tersedia. Anda menggunakanclosure untuk memberikan akses fungsi tertutup ke variabel yang direferensikan dalam cakupan luar yang dikenal sebagai lingkungan leksikal.

Jika variabel diakses dalam cakupannya, JavaScript akan menampilkan nilai yang ditetapkan atau menghasilkan error.

Untuk mendeklarasikan variabel:

Gunakan kata kunci var, const, atau let untuk mendeklarasikan variabel cakupan lokal atau global.
Gunakan kata kunci const atau let untuk mendeklarasikan variabel cakupan blok.

Saat Anda mendeklarasikan variabel var dalam suatu fungsi, deklarasi tersebut akan membuat variabel tersedia untuk fungsi penyertaan terdekat. Anda tidak dapat menggunakan kata kunci var untuk mendeklarasikan variabel dengan cakupan blok.

Contoh cakupan

Contoh ini menunjukkan cakupan global karena variabel greeting dideklarasikan di luar fungsi atau blok apa pun, yang membuat nilainya tersedia untuk semua kode dalam dokumen saat ini:

const greeting = 'hello';
console.log(greeting); // 'hello'

Dalam contoh cakupan global, variabel greeting diberi nilai hello.

Contoh ini menunjukkan cakupan lokal karena mendeklarasikan variabel greeting dengan kata kunci let dalam suatu fungsi. Variabel greeting adalah variabel cakupan lokal dan tidak tersedia di luar fungsi.

function greet() {
  let greeting = 'Hello World!';
  console.log(greeting);
}

Contoh ini menunjukkan cakupan blok karena mendeklarasikan variabel greeting dalam blok sehingga variabel hanya dapat diakses dalam tanda kurung kurawal:

if (true) {
   const greeting = 'hello';
}

console.log(greeting); // ReferenceError: greeting is not defined

Perhatikan bahwa saat fungsi console.log mencoba menghasilkan nilai variabel greeting, JavaScript akan menampilkan pesan error ReferenceError, bukan pesan hello yang diharapkan. Mengapa?

Error ditampilkan karena variabel greeting memiliki cakupan blok dan blok terdekat adalah bagian dari pernyataan kondisional if. Anda tidak dapat mengakses variabel let dan const yang dideklarasikan di dalam blok dari luar blok. Dengan demikian, Anda hanya dapat mengakses variabel greeting dalam tanda kurung kurawal, yang menentukan cakupan blok.

Contoh ini memperbaiki error karena memindahkan metode console.log(message) ke dalam tanda kurung kurawal. Kode yang diupdate akan memindahkan metode console.log(message) ke dalam blok.

if (true) {
   const greeting = 'hello';
   console.log(greeting);
}

Jenis cakupan

Cakupan global

Anda dapat mengakses variabel dengan cakupan global dari mana saja dalam program ini.

Pertimbangkan file HTML yang mengimpor dua file JavaScript: file-1.js dan file-2.js:

<script src="file-1.js"></script>
<script src="file-2.js"></script>

Dalam contoh ini, variabel globalMessage memiliki cakupan global dan ditulis di luar fungsi. Selama dijalankan dan dieksekusi, Anda dapat mengakses nilai variabel globalMessage dari mana saja dalam program JavaScript.

Anda dapat melihat konten file file-1.js dan file-2.js dalam cuplikan kode ini. Perhatikan ketersediaan variabel globalMessage di kedua file.

// file-1.js
function hello() {
    var localMessage = 'Hello!';
}

var globalMessage = 'Hey there!';

// file-2.js
console.log(localMessage); // localMessage is not defined
console.log(globalMessage); // Hey there!

Ada jenis cakupan lain yang tidak banyak dibahas dalam artikel ini. Jika Anda membuat variabel di dalam modul JavaScript, tetapi di luar fungsi atau blok, variabel tersebut tidak memiliki cakupan global, melainkan cakupan modul. Variabel dengan cakupan modul tersedia di mana saja dalam modul saat ini, tetapi tidak tersedia dari file atau modul lain. Agar variabel cakupan modul tersedia untuk file lain, Anda harus mengekspornya dari modul tempat variabel dibuat, lalu import dari modul yang perlu mengakses variabel.

Cakupan lokal dan cakupan fungsi

Saat Anda membuat variabel dalam fungsi JavaScript dengan kata kunci var, let, atau const, variabel tersebut bersifat lokal untuk fungsi sehingga Anda hanya dapat mengaksesnya dari dalam fungsi. Variabel lokal dibuat saat fungsi dimulai dan dihapus secara efektif saat eksekusi fungsi selesai.

Contoh ini mendeklarasikan variabel total dalam fungsi addNumbers(). Anda hanya dapat mengakses variabel a, b,, dan total dalam fungsi addNumbers().

function addNumbers(a, b) {
    const total = a + b;
}

addNumbers(3, 4);

Anda dapat menggunakan kata kunci let dan const untuk memberi nama variabel. Saat Anda menggunakan kata kunci let, JavaScript dapat memperbarui variabel. Namun, dengan kata kunci const, variabel tersebut tetap konstan.

var variable1 = 'Declared with var';
var variable1 = 'Redeclared with var';
variable1; // Redeclared with var

let variable2 = 'Declared with let. Cannot be redeclared.';
variable2 = 'let cannot be redeclared, but can be updated';
variable2; // let cannot be redeclared, but can be updated

const variable3 = 'Declared with const. Cannot be redeclared or updated';
variable3; // Declared with const. Cannot be redeclared or updated

Cakupan blok

Blok digunakan untuk mengelompokkan satu pernyataan atau serangkaian pernyataan bersama. Anda dapat menggunakan kata kunci const atau let untuk mendeklarasikan variabel lokal cakupan blok. Perhatikan bahwa Anda tidak dapat menggunakan kata kunci var untuk mendeklarasikan variabel dengan cakupan blok.

Misalnya, dalam blok ini, cakupan untuk variabel name dan nilai "Elizabeth" berada dalam tanda kurung kurawal. Variabel dalam cakupan blok tidak tersedia di luar blok tersebut.

{
    const name = "Elizabeth";
}

Anda dapat menggunakan variabel cakupan blok dalam pernyataan if, for, atau while.

Catat dua loop for dalam cuplikan kode ini. Satu loop for menggunakan kata kunci var untuk mendeklarasikan variabel penginisialisasi, yang menambahkan angka 0, 1, dan 2. Loop for lainnya menggunakan kata kunci let untuk mendeklarasikan variabel penginisialisasi.

for (var i = 0; i < 2; i++) {
    // ...
}

console.log(i); // 2

for (let j = 0; j < 2; j++) {
    // ...
}

console.log(j); // The j variable isn't defined.

Pada contoh kode sebelumnya, Anda mungkin melihat bahwa variabel i di loop for pertama bocor di luar loop for dan masih mempertahankan nilai 2 karena kata kunci var tidak menggunakan cakupan blok. Masalah ini diperbaiki di loop for kedua tempat variabel j yang dideklarasikan dengan kata kunci let dicakupkan ke blok loop for dan tidak ada setelah loop for selesai.

Penggunaan kembali nama variabel dalam cakupan yang berbeda

Cakupan dapat mengisolasi variabel dalam fungsi, bahkan saat Anda menggunakan kembali nama variabel yang sama di tempat lain dalam cakupan yang berbeda.

Contoh ini menunjukkan bagaimana penggunaan cakupan memungkinkan Anda menggunakan kembali nama variabel yang sama dalam fungsi yang berbeda:

function listOne() {
    let listItems = 10;
    console.log(listItems); // 10
}

function listTwo() {
   let listItems = 20;
   console.log(listItems); // 20
}

listOne();
listTwo();

Variabel listItems dalam fungsi listOne() dan listTwo() diberi nilai yang diharapkan sehingga tidak bertentangan satu sama lain.

{i>Closures<i} (penutupan) dan cakupan leksikal

Penutupan mengacu pada fungsi tertutup di mana fungsi dalam dapat mengakses cakupan fungsi luar, yang juga dikenal sebagai lingkungan leksikal. Dengan demikian, dalam JavaScript, Anda menggunakanclosure untuk memungkinkan fungsi mereferensikan lingkungan leksikal luar, yang memungkinkan kode dalam variabel referensi fungsi yang dideklarasikan di luar fungsi. Bahkan, Anda dapat mengkodekan rantai referensi ke lingkungan leksikal luar sehingga fungsi dipanggil oleh fungsi, yang kemudian dipanggil oleh fungsi lain.

Dalam contoh ini, kode membentuk penutupan dengan lingkungan leksikal yang dibuat saat fungsi outer() dipanggil, yang ditutup melalui variabel hello. Dengan demikian, variabel hello digunakan dalam fungsi callback setTimeout.

function outer() {
    const hello = 'world';

    setTimeout(function () {
        console.log('Within the closure!', hello)
    }, 100);
}

outer();

Dengan cakupan leksikal, cakupan ditentukan selama kompilasi kode sumber, bukan saat runtime. Untuk mempelajari lebih lanjut lingkungan leksikal, lihat Cakupan dan penutupan leksikal.

Modul

Modul JavaScript membantu mengatur kode JavaScript. Jika digunakan dengan tepat, keduanya memberikan struktur yang efektif ke codebase Anda dan membantu penggunaan kembali kode. Daripada menggunakan variabel global untuk membagikan variabel ke berbagai file, modul JavaScript memberikan teknik untuk mengekspor dan import variabel.

// hello.js file
function hello() {
  return 'Hello world!';
}

export { hello };

// app.js file
import { hello } from './hello.js';

console.log(hello()); // Hello world!

Demo visualizer cakupan

Cakupan adalah konsep dasar yang harus dipahami oleh setiap developer JavaScript. Untuk lebih memahami sistem cakupan, Anda dapat mencoba menulis kode Anda sendiri dengan JS Scope Visualizer. Demo ini menggunakan warna dalam kode untuk membantu Anda memvisualisasikan cakupan JavaScript.

Kesimpulan

Artikel ini memperkenalkan berbagai jenis ruang lingkup. Cakupan JavaScript adalah salah satu konsep yang lebih canggih dalam pengembangan web, jadi bagus jika Anda telah membaca materi ini dan meluangkan waktu untuk memahami topik ini.

Cakupan bukan fitur yang dilihat pengguna. Hal ini hanya memengaruhi developer web yang menulis kode, tetapi pengetahuan tentang cara kerja cakupan dapat membantu Anda memperbaiki bug yang muncul.