Kali ini, saya akan membahas tentang scope dalam JavaScript, salah satu konsep dasar yang harus kamu pahami jika kamu ingin belajar bahasa pemrograman web yang satu ini. Scope adalah area di mana sebuah variabel (atau fungsi) ada dan dapat diakses. Scope menentukan aksesibilitas (visibility) variabel, objek, dan fungsi dari berbagai bagian kode. Ada tiga jenis scope di JavaScript, yaitu:

• Global scope

• Function scope

• Block scope

Yuk, simak penjelasan dan contoh scope dalam JavaScript berikut ini!

Apa itu Global Scope?

Global scope adalah scope default untuk semua kode yang berjalan dalam mode skrip. Variabel yang dideklarasikan di luar fungsi apa pun menjadi global. Variabel global dapat diakses dari mana saja di dalam program JavaScript. Variabel global memiliki global scope: Semua skrip dan fungsi di halaman web dapat mengaksesnya.

Contoh:

// Variabel global
var name = "John";

// Fungsi yang mengakses variabel global
function greet() {
console.log("Hello, " + name);
}

// Memanggil fungsi greet
greet(); // Hello, John

Kode di atas akan menampilkan “Hello, John”, karena variabel name adalah global dan dapat diakses oleh fungsi greet. Jika kita mengubah nilai variabel name, maka fungsi greet akan menampilkan nilai yang baru.

Contoh:

// Variabel global
var name = "John";

// Fungsi yang mengakses variabel global
function greet() {
console.log("Hello, " + name);
}

// Mengubah nilai variabel global
name = "Jane";

// Memanggil fungsi greet
greet(); // Hello, Jane

Kode di atas akan menampilkan “Hello, Jane”, karena variabel name telah diubah sebelum memanggil fungsi greet.

Apa itu Function Scope?

Function scope adalah scope yang dibuat dengan function. Variabel yang dideklarasikan di dalam fungsi hanya dapat diakses dari dalam fungsi tersebut. Variabel lokal memiliki function scope: Mereka hanya dapat diakses dari dalam fungsi. Variabel lokal dibuat saat fungsi dimulai, dan dihapus saat fungsi selesai.

Contoh:

// Variabel global
var name = "John";

// Fungsi yang mendeklarasikan variabel lokal
function greet() {
var message = "Hello, " + name;
console.log(message);
}

// Memanggil fungsi greet
greet(); // Hello, John

// Mencoba mengakses variabel lokal
console.log(message); // ReferenceError: message is not defined

Kode di atas akan menampilkan “Hello, John”, karena fungsi greet dapat mengakses variabel global name. Namun, kode di atas juga akan menghasilkan error, karena variabel lokal message tidak dapat diakses di luar fungsi greet.

Apa itu Block Scope?

Block scope adalah scope yang dibuat dengan blok kode. Blok kode adalah kumpulan pernyataan yang dibatasi oleh kurung kurawal { ... }. Blok kode dapat ditemukan di dalam fungsi, if statement, for loop, dan lain-lain. Variabel yang dideklarasikan di dalam blok kode hanya dapat diakses dari dalam blok tersebut.

Sebelum ES6 (2015), JavaScript tidak memiliki block scope. Variabel yang dideklarasikan dengan kata kunci var tidak dapat memiliki block scope. Variabel yang dideklarasikan di dalam blok kode dapat diakses dari luar blok.

Contoh:

// Variabel yang dideklarasikan dengan var
var x = 10;

// Blok kode
{
var x = 20;
console.log(x); // 20
}

// Di luar blok kode
console.log(x); // 20

Kode di atas akan menampilkan 20 dua kali, karena variabel x yang dideklarasikan di dalam blok kode mengubah nilai variabel x yang dideklarasikan di luar blok kode.

ES6 memperkenalkan dua kata kunci baru untuk mendeklarasikan variabel, yaitu let dan const. Kedua kata kunci ini memberikan block scope di JavaScript. Variabel yang dideklarasikan dengan let atau const di dalam blok kode tidak dapat diakses dari luar blok.

Contoh:

// Variabel yang dideklarasikan dengan let
let x = 10;

// Blok kode
{
let x = 20;
console.log(x); // 20
}

// Di luar blok kode
console.log(x); // 10

Kode di atas akan menampilkan 20 dan 10, karena variabel x yang dideklarasikan di dalam blok kode tidak mengubah nilai variabel x yang dideklarasikan di luar blok kode.

Mengapa Scope Penting?

Scope adalah salah satu konsep dasar yang sangat penting dalam pemrograman. Dengan memahami scope, kamu bisa:

• Membuat kode yang lebih modular, reusable, dan maintainable, dengan membatasi aksesibilitas variabel, objek, dan fungsi sesuai dengan kebutuhan.

• Membuat kode yang lebih rapi, mudah dibaca, dan mudah dimodifikasi, dengan menggunakan nama variabel yang unik dan konsisten, dan menghindari konflik atau tumpang tindih nama variabel.

• Membuat web yang lebih interaktif, dinamis, dan responsif, dengan menggunakan scope yang tepat untuk mengatur data, konten, gaya, dan perilaku halaman web.

Penutup

Demikianlah artikel mengenai scope dalam JavaScript yang saya buat untuk kamu. Semoga artikel ini bisa memberikan kamu pemahaman yang jelas dan mudah tentang scope, dan menginspirasi kamu untuk belajar lebih dalam tentang JavaScript.

JavaScript adalah bahasa pemrograman web yang sangat populer dan berguna, yang wajib kamu kuasai jika kamu ingin menjadi developer yang handal.