Pada video ini, kita akan mempelajari mengenai scope. Kalau kita menerjemahkan kata scope ke bahasa Indonesia, artinya adalah ruang lingkup. Jadi scope ini mengatur sampai batas mana suatu variable masih dapat dilihat atau masih dapat digunakan.

Pertama kita bahas mengenai function scope terlebih dahulu. Apabila ada variable yang kita deklarasikan di dalam function, maka variable tersebut hanya bisa digunakan di dalam function. Sebagai contoh disini ada function greet, yang di dalamnya ada variable name. Kita bisa menggunakan variable ini di dalam function. Namun diluar function, variable ini sudah tidak dapat digunakan.

Kita coba praktek coding ya. Pertama kita buat dahulu function greet yang memiliki variable name di dalamnya.

function greet()
{
  let name = "David";
  console.log(name);
}

Kemudian diluar dari function, kita melakukan pemanggilan function greet(). Setelah itu kita coba tuliskan isi variable name di console.

greet();
console.log(name);

Kita simpan dan jalankan di browser. Perhatikan bahwa seharusnya browser menuliskan “David” sebanyak dua kali. Namun yang kelihatan di console hanya satu. Kalau kita lihat di sebelah kanan, kita bisa melihat bahwa kode yang menuliskan “David” berada di baris keempat. Sedangkan yang kosong berada di baris ke delapan.

Kalau kita kembali ke kode, maka kita bisa melihat bahwa yang berada di baris keempat adalah console.log yang berada di dalam function greet. Sedangkan yang berada di baris kedelapan adalah console.log yang berada di luar function greet. Artinya variable name ini hanya bisa diakses dari dalam function saja. Setelah keluar dari function, maka isi dari variable ini sudah langsung dihapus.

Yang kedua adalah Global Scope. Apabila kita mendeklarasikan sebuah variable di luar function, maka variable tersebut dapat digunakan dimana saja. Termasuk di dalam function. Kalau kita lihat di contoh source codenya, sekarang deklarasi dari variable name berada di luar function, sebelum pemanggilan function. Dan browser dapat menampilkan isi dari variable, baik dari dalam function maupun dari luar function.

Kita kembali ke source code. Sekarang kita pindahkan deklarasi variable name dari dalam function menjadi di luar function. Tepatnya sebelum kita memanggil function greet(). Kita simpan dan jalankan di browser. Sekarang kedua console.log sudah bisa menampilkan isi dari variable name.

Kita lihat kembali source code kita. Variable name berada di luar function, sehingga menjadi global variable. Global variable ini bisa diakses dari mana saja, termasuk dari dalam function. Namun perlu diperhatikan ya, walaupun cara ini bisa berjalan dengan benar, namun tidak disarankan untuk membuat function seperti ini. Mengapa? Karena function ini memiliki dependancy ke variable name yang berada di luar function.

Misalkan suatu saat nanti kita sedang mengerjakan proyek lain dan kita ingin melakukan copy paste terhadap function greet(). Namun yang kita copy ternyata hanya function-nya saja. Maka kita mendapatkan error di source code baru kita, karena function ini menggunakan variable name yang berada di luar function. Hal ini perlu diperhatikan ya, pada saat kita membuat suatu function, maka pastikan bahwa function tersebut bisa berfungsi secara mandiri, tanpa ada ketergantungan ke variable luar. Lebih baik kita menggunakan parameter untuk mengirimkan nama ke dalam function.

Kita masuk ke materi ketiga, yaitu block scope. Yang dimaksud dengan block disini adalah satu kumpulan kode yang kita taruh di dalam kurung kurawal. Apabila kita membuat deklarasi variable di dalam kurung kurawal, maka variable tersebut hanya bisa diakses di dalam kurung kurawal. Kita lihat ke contoh kodenya, disini ada percabangan menggunakan if yang diikuti oleh kurung kurawal. Kemudian di dalam kurung kurawal, ada deklarasi variable message. Berhubung console.log yang menggunakan variable message berada di luar kurung kurawal, maka terjadi error karena variable message sudah tidak bisa diakses.

Kita coba di kode ya. Kita hapus semua kode kita dan kita ganti dengan kode seperti pada contoh di slide.

let number = 10;

if(number % 2 == 0)
{
  let message = "Genap";
}

console.log(message);

Kita simpan dan jalankan di browser. Maka kita mendapatkan error bahwa variable message belum di definisikan. Padahal sudah kita definisikan ya, di dalam kurung kurawal if. Namun variable ini hanya bisa diakses di dalam kurung kurawal saja. Jadi kalau kita pindahkan console.log ke dalam kurung kurawal, maka pesan bisa keluar dengan benar. Namun kalau kita pindahkan lagi ke luar kurung kurawal, maka terjadi error lagi.

Solusi dari masalah ini adalah kita harus melakukan deklarasi variable message sebelum percabangan if. Misalkan kita deklarasikan dengan nilai awal string kosong.

let message = "";

Lalu di dalam percabangan, kita jangan menggunakan kata kunci let lagi. Kita langsung ubah nilai variable message menjadi “Genap”. Kita simpan dan jalankan di browser. Dan sekarang kode kita sudah berjalan dengan benar. Block scope ini penting untuk diperhatikan apabila kita hendak menuliskan kode untuk percabangan dan perulangan, karena biasanya kita menggunakan kurung kurawal.

Sekarang kita masuk ke materi keempat, yaitu Lexical Scope. Perhatikan contoh kodenya. Misalkan kita membuat fungsi induk atau parent. Dan kemudian di dalam kurung kurawal induk, kita buat lagi sebuah fungsi anak atau child. Disini mesti diperhatikan ya, bahwa function child berada di dalam kurung kurawal induk.

Perhatikan lagi kita membuat deklarasi variable name di dalam fungsi induk. Dan kemudian kita memanggil fungsi anaknya. Sedangkan di dalam fungsi anak, kita memanggil console.log yang menggunakan variable name. Fungsi ini dapat berjalan dengan benar. Ini yang kita sebut dengan Lexical Scope. Variable yang deklarasinya berada di fungsi induk, masih bisa diakses oleh fungsi anak. Namun perlu diperhatikan bahwa aturan ini tidak berlaku sebaliknya ya. Variable di dalam fungsi anak tidak bisa diakses pada fungsi induk. Untuk Lexical Scope, teman-teman bisa mencoba sendiri di browser ya.

Kita masuk ke materi terakhir dari video kita, yaitu Name Conflict. Name conflict ini terjadi apabila kita melakukan deklarasi variable dengan nama yang sama dengan variable sebelumnya. Sebagai contoh pada kode ini adalah variable message. Sebelum percabangan if, kita telah melakukan deklarasi variable message dengan nilai awal string kosong. Kemudian di dalam kurung kurawal if, kita mendeklarasikan lagi variable message dengan nilai awal “Genap”.

Browser akan membuat dua buah variable yang berbeda, dengan menggunakan nama yang sama. Semua kode yang berada di dalam block scope, akan menggunakan variable message yang berada di dalam block, sehingga console.log di dalam block menghasilkan nilai “Genap”. Sedangkan diluar dari block, variable yang digunakan adalah variable message global dengan nilai string kosong, sehingga console.log yang terakhir akan menghasilkan string kosong.

Kita coba praktekkan di dalam coding ya. Misalkan di dalam kurung kurawal if, kita tambahkan kata kunci let. Dan kemudian kita panggil console.log untuk menuliskan isi dari variable message.

Kita simpan dan jalankan di browser. Dan kita mendapatkan hasil yang sesuai dengan slide tadi ya. Console.log yang berada di dalam block menggunakan variable message yang berada di dalam block, yang isinya adalah “Genap”. Sedangkan console.log yang berada diluar block menggunakan variable global message, yang isinya adalah string kosong.

Name conflict ini perlu diperhatikan ya. Jangan sampai kita melakukan kesalahan typo dengan menambahkan kata kunci let di dalam kurung kurawal if. Hal ini menyebabkan terjadinya 2 buah variable yang berbeda, sehingga variable message yang di global ini tidak pernah diisi dengan nilai “Genap”.

Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.

Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.