Masukkan Password
24 Cakupan Lokal & Global
Lecture ini membahas scope dalam JavaScript.
Kalau disederhanakan, scope menjawab satu pertanyaan besar:
“Variable atau function ini bisa digunakan di mana?”
Ini penting sekali karena semakin besar program JavaScript kamu, semakin banyak variable dan function yang dibuat. Kalau tidak memahami scope, kamu akan sering menemukan error seperti:
ReferenceError: x is not defined
Di lecture ini ada 3 scope utama yang perlu kamu pahami:
- Global Scope
- Local Scope / Function Scope
- Block Scope
Kita bahas satu per satu dengan analogi sederhana.
1. Apa itu Scope?
Scope adalah wilayah di dalam program tempat sebuah variable atau function dapat diakses.
Bayangkan kamu punya sebuah rumah.
🏠 Rumah
├── ruang tamu
├── kamar
└── dapur
Ada barang di ruang tamu:
TV
Semua orang di dalam rumah bisa melihat TV.
Tapi ada barang di dalam kamar:
Laptop
Barang tersebut mungkin hanya kamu gunakan di kamar.
Nah, konsep scope mirip seperti itu.
GLOBAL
↓
bisa diakses dari banyak tempat
FUNCTION
↓
hanya di dalam function
BLOCK
↓
hanya di dalam block
2. Tiga Scope yang Perlu Kamu Kenal
Secara sederhana:
| Scope | Dibuat di mana? | Bisa diakses di mana? |
|---|---|---|
| Global | di luar function/block | hampir seluruh program |
| Function/Local | di dalam function | function tersebut dan scope di dalamnya |
| Block | di dalam {} block | block tersebut dan scope di dalamnya |
Contoh gambarnya:
GLOBAL SCOPE
│
│ user
│
├── FUNCTION SCOPE
│ │
│ │ message
│ │
│ └── BLOCK SCOPE
│ │
│ │ y
│ │
│ └── ...
│
└── ...
Semakin ke dalam, semakin terbatas aksesnya.
3. Global Scope
Kita mulai dari yang paling luas.
Contoh:
let user = "John";
console.log(user);
Variable user dibuat di luar function dan di luar block.
Maka:
user
↓
Global Scope
Karena global, variable tersebut bisa digunakan dari berbagai tempat dalam program.
Contohnya:
let user = "John";
function greetings() {
console.log(user);
}
console.log(user);
greetings();
Output:
John
John
Kenapa?
Karena user berada di global scope.
4. Analogi Global Scope
Bayangkan sebuah sekolah.
Ada pengumuman di papan utama:
📢 "Besok libur."
Pengumuman itu berada di tempat yang bisa dilihat banyak orang.
Mirip dengan:
let user = "John";
yang berada di global scope.
Function di dalam program bisa “melihat” variable global tersebut.
5. Global Variable
Variable yang dibuat di global scope disebut:
Global Variable
Contoh:
let username = "John";
let age = 25;
Keduanya global.
Global Scope
├── username
└── age
Kita bisa menggunakan:
console.log(username);
console.log(age);
Dan function juga bisa mengaksesnya:
function showUser() {
console.log(username);
console.log(age);
}
6. Local Scope / Function Scope
Sekarang kita masuk ke scope yang lebih sempit.
Misalnya:
function greetings() {
let message = "Good morning";
}
Variable:
message
dibuat di dalam function.
Maka message memiliki local scope/function scope.
Artinya:
message
↓
hanya bisa digunakan di dalam greetings()
Misalnya:
function greetings() {
let message = "Good morning";
console.log(message);
}
Ini valid.
Output:
Good morning
7. Tetapi tidak bisa digunakan di luar function
Kalau kita melakukan:
function greetings() {
let message = "Good morning";
}
console.log(message);
Akan terjadi error:
ReferenceError: message is not defined
Kenapa?
Karena message hanya dikenal di wilayah:
function greetings() {
↓
message
↓
}
Di luar function:
message ❌
8. Analogi kamar
Bayangkan:
🏠 Rumah
│
├── Ruang tamu
│
└── Kamar
│
└── Laptop
Laptop berada di kamar.
Orang yang berada di kamar bisa menggunakan laptop.
Tetapi seseorang yang hanya berada di ruang tamu tidak otomatis bisa menggunakan laptop tersebut.
Sama seperti:
function greetings() {
let message = "Hello";
}
message hanya berada di “kamar” greetings().
9. Parameter function juga memiliki local scope
Ini penting.
Misalnya:
function greetings(name, timeOfDay) {
let message = `Good ${timeOfDay} ${name}`;
}
Ada tiga variable di dalam function:
name
timeOfDay
message
Ketiganya hanya bisa digunakan dalam function tersebut.
Jadi:
function greetings(name, timeOfDay) {
let message = `Good ${timeOfDay} ${name}`;
console.log(name);
console.log(timeOfDay);
console.log(message);
}
valid.
Tetapi:
function greetings(name, timeOfDay) {
let message = `Good ${timeOfDay} ${name}`;
}
console.log(name);
console.log(timeOfDay);
console.log(message);
❌ Tidak valid.
Ketiganya berada di local/function scope.
10. Kenapa parameter juga local?
Karena parameter sebenarnya bisa dianggap sebagai variable yang dimiliki oleh function tersebut.
Contoh:
function greetings(name) {
console.log(name);
}
Ketika:
greetings("John");
secara konsep:
function greetings
↓
name = "John"
name hanya relevan untuk function greetings.
Function lain tidak otomatis mengenal name.
11. Scope function secara visual
Contoh:
let user = "John";
function greetings(name) {
let message = `Hello ${name}`;
console.log(user);
console.log(name);
console.log(message);
}
Scope-nya kira-kira:
GLOBAL SCOPE
│
├── user
│
└── greetings()
│
├── name
└── message
user → global.
name → local ke greetings.
message → local ke greetings.
12. Function juga bisa memiliki scope
Lecture kemudian menunjukkan bahwa bukan hanya variable yang memiliki scope.
Function juga memiliki scope.
Contoh:
function greetings() {
function sayHello() {
console.log("Hello World");
}
sayHello();
}
Di sini:
greetings
↓
sayHello
greetings berada di luar function lain, sehingga bisa dianggap global jika dibuat di top-level.
Sedangkan:
sayHello
dibuat di dalam greetings.
Jadi sayHello hanya dapat diakses dari dalam greetings dan scope yang berada di dalamnya.
13. Memanggil function di dalam scope yang benar
Ini valid:
function greetings() {
function sayHello() {
console.log("Hello World");
}
sayHello();
}
greetings();
Output:
Hello World
Karena sayHello() dipanggil dari dalam scope greetings.
14. Tetapi tidak bisa dari luar
Kalau:
function greetings() {
function sayHello() {
console.log("Hello World");
}
}
sayHello();
❌ Error.
Kurang lebih:
ReferenceError: sayHello is not defined
Karena:
GLOBAL
│
└── greetings
│
└── sayHello
global tidak bisa langsung melihat sayHello.
15. Sekarang masuk ke Block Scope
Ini bagian yang sering membingungkan pemula.
Apa itu block?
Block adalah sekumpulan kode yang dibungkus oleh:
{
...
}
Contohnya:
if (true) {
let x = 10;
}
Bagian:
{
let x = 10;
}
adalah sebuah block.
16. if memiliki block
Contoh:
if (true) {
let message = "Hello";
}
Kurung kurawal:
{
let message = "Hello";
}
menandai sebuah code block.
Variable:
message
dibuat di dalam block tersebut.
Karena menggunakan let, variable tersebut memiliki block scope.
17. Variable block hanya bisa digunakan di dalam block
Contoh:
if (true) {
let message = "Hello";
console.log(message);
}
Valid.
Output:
Hello
Tetapi:
if (true) {
let message = "Hello";
}
console.log(message);
❌ Error.
Karena message hanya hidup dalam block if.
18. Analogi block scope
Bayangkan kamu punya sebuah ruangan khusus:
🏠 Rumah
│
├── Ruang utama
│
└── 🔒 Ruang khusus
│
└── Barang X
Barang X hanya tersedia di ruangan khusus tersebut.
Sama:
if (condition) {
let x = 10;
}
x hanya bisa digunakan di dalam {} tersebut.
19. Contoh dari lecture: x dan y
Lecture memberikan contoh seperti:
let x = 11;
if (x > 10) {
let y = x++;
console.log(y);
}
Di sini:
x → global
y → block
Karena x dibuat di luar block:
let x = 11;
Sedangkan y dibuat di dalam:
if (x > 10) {
let y = x++;
}
Maka:
Global Scope
│
└── x
Block Scope
│
└── y
20. Kenapa y bernilai 11?
Ini menghubungkan dengan materi increment operator yang sebelumnya kamu pelajari.
Kode:
let y = x++;
Kalau:
x = 11
x++ adalah post-increment.
Artinya:
- gunakan nilai lama
- kemudian increment
Jadi:
x = 11
y = x++
↓
y = 11
x = 12
Maka:
console.log(y);
menghasilkan:
11
Sedangkan setelah itu:
console.log(x);
akan menghasilkan:
12
21. Tetapi y tidak bisa digunakan setelah block
Contoh:
let x = 11;
if (x > 10) {
let y = x++;
console.log(y);
}
console.log(y);
Bagian pertama:
console.log(y);
✅ valid.
Bagian kedua:
console.log(y);
❌ error.
Karena bagian kedua berada di luar block.
22. Scope bertingkat
Sekarang bagian yang sangat penting.
Scope bisa berada di dalam scope lainnya.
Contoh:
let user = "John";
function greetings() {
let message = "Hello";
if (true) {
let x = 10;
}
}
Strukturnya:
GLOBAL
│
├── user
│
└── greetings FUNCTION
│
├── message
│
└── if BLOCK
│
└── x
Ada tiga level:
Global
↓
Function
↓
Block
23. Scope luar bisa dilihat dari scope dalam
Ini konsep yang sangat penting.
Misalnya:
let user = "John";
function greetings() {
console.log(user);
}
greetings() bisa mengakses user.
Kenapa?
Karena user berada di scope luar.
GLOBAL
│
└── user
↑
│ bisa diakses
│
FUNCTION
└── greetings()
Jadi inner scope bisa mengakses outer scope.
24. Tetapi scope luar tidak bisa melihat ke dalam
Contoh:
function greetings() {
let message = "Hello";
}
console.log(message);
Tidak bisa.
Kenapa?
Karena:
GLOBAL
│
└── greetings
│
└── message
message berada lebih dalam.
Global scope tidak bisa “masuk” dan mengambil variable lokal tersebut.
Jadi ada prinsip penting:
Scope dalam dapat mengakses scope luar, tetapi scope luar tidak dapat mengakses variable yang hanya dimiliki scope dalam.
25. Analogi gedung
Bayangkan:
🏢 GEDUNG
│
├── Lantai 1
│ └── kantor
│
└── Lantai 2
└── ruangan pribadi
Orang di ruangan pribadi bisa mengetahui sesuatu yang ada di lantai 1 jika memang bisa mengaksesnya.
Tetapi orang di lantai 1 tidak otomatis bisa masuk ke ruangan pribadi di lantai 2.
Begitu pula scope.
Outer scope
↓
Inner scope
Inner bisa melihat outer.
26. Block scope di dalam function
Ini persis seperti contoh lecture.
function greetings() {
let message = "Hello";
if (true) {
let y = 10;
console.log(message);
console.log(y);
}
}
Di dalam block if, kita bisa mengakses:
message
meskipun message bukan dibuat di block tersebut.
Kenapa?
Karena message berada di scope luar:
greetings function
Sedangkan block berada di dalam function.
27. Tapi message tidak bisa mengakses y
Di luar block:
function greetings() {
if (true) {
let y = 10;
}
console.log(y);
}
❌ Error.
Karena:
greetings()
│
└── if block
│
└── y
y lebih dalam daripada tempat console.log(y).
28. Global → Function → Block
Cara mengingatnya:
GLOBAL
↓
FUNCTION
↓
BLOCK
Semakin masuk ke dalam:
akses ke luar → bisa
akses ke dalam → tidak bisa
Contoh:
let a = 1;
function test() {
let b = 2;
if (true) {
let c = 3;
console.log(a); // ✅
console.log(b); // ✅
console.log(c); // ✅
}
console.log(a); // ✅
console.log(b); // ✅
console.log(c); // ❌
}
console.log(a); // ✅
console.log(b); // ❌
console.log(c); // ❌
Ini contoh yang sangat bagus untuk memahami scope.
29. Kenapa let penting dalam Block Scope?
Dalam lecture ini variable dibuat menggunakan:
let
let memiliki block scope.
Contoh:
if (true) {
let x = 10;
}
console.log(x);
❌ Error.
Hal yang sama juga berlaku untuk:
const
Contoh:
if (true) {
const x = 10;
}
console.log(x);
❌ Error.
Jadi untuk materi sekarang:
letdanconstmemiliki block scope.
30. Bagaimana dengan var?
Kamu mungkin nanti menemukan:
var x = 10;
var memiliki behavior scope yang berbeda dari let dan const, khususnya terkait block scope.
Contoh:
if (true) {
var x = 10;
}
console.log(x);
Dengan var, x masih dapat diakses di luar block if.
Ini salah satu alasan modern JavaScript lebih sering menggunakan:
let
const
daripada var.
Untuk sekarang, kamu belum perlu mendalami var. Cukup ingat:
let → block scoped
const → block scoped
var → function scoped
Ini akan sangat membantu saat nanti kamu belajar perbedaan ketiganya.
31. Function juga punya scope
Sekarang kembali ke function.
Contoh:
function greetings() {
function sayHello() {
console.log("Hello World");
}
sayHello();
}
sayHello adalah function yang dibuat di dalam greetings.
Jadi:
GLOBAL
│
└── greetings
│
└── sayHello
greetings bisa menggunakan sayHello.
Tetapi dari luar:
sayHello();
❌ tidak bisa.
32. Scope function vs scope variable
Prinsipnya sama.
Variable:
function test() {
let x = 10;
}
x hanya bisa digunakan di dalam test.
Function:
function test() {
function hello() {
console.log("Hello");
}
}
hello juga hanya bisa digunakan di dalam test.
Jadi scope berlaku untuk:
- variable
- parameter
- function
- dan berbagai declaration lainnya.
33. Contoh besar untuk latihan
Perhatikan:
let username = "John";
function greetings(name) {
let message = `Hello ${name}`;
if (name) {
let x = 10;
console.log(username);
console.log(name);
console.log(message);
console.log(x);
}
}
Mari kita petakan:
GLOBAL SCOPE
│
└── username
│
└── greetings()
│
├── name
├── message
│
└── if BLOCK
│
└── x
Sekarang kita tanyakan satu per satu.
username?
Global.
Bisa digunakan di:
global
greetings
if block
name?
Parameter greetings.
Bisa digunakan di:
greetings
if block
Tidak bisa dari global.
message?
Dibuat di greetings.
Bisa digunakan di:
greetings
if block
Tidak bisa dari global.
x?
Dibuat di if.
Hanya bisa digunakan di:
if block
Tidak bisa di luar block.
34. Cara berpikir saat mendapat error “not defined”
Misalnya kamu mendapatkan:
ReferenceError: message is not defined
Jangan langsung panik.
Tanyakan:
1. Di mana message dibuat?
Misalnya:
function greetings() {
let message = "Hello";
}
2. Di mana message digunakan?
Misalnya:
console.log(message);
3. Apakah tempat penggunaannya masih berada dalam scope?
Kalau tidak:
message dibuat
↓
di dalam function
message digunakan
↓
di luar function
❌ tidak bisa
Jadi error not defined sering kali berhubungan dengan scope.
35. Scope bukan berarti variable langsung hilang dari memory
Untuk pemahaman dasar, jangan mengartikan:
“Begitu keluar block, variable langsung dihancurkan.”
Itu terlalu menyederhanakan.
Yang perlu kamu pahami sekarang adalah:
Di luar scope-nya, identifier tersebut tidak dapat diakses secara normal.
Nanti ketika kamu belajar lebih jauh tentang execution context, closure, dan garbage collection, kamu akan melihat detail yang lebih dalam.
Untuk sekarang cukup fokus pada aksesibilitas.
36. Hubungan dengan Function Expression dan Callback
Ini juga sebenarnya berhubungan dengan materi sebelumnya.
Misalnya:
function doHomework(subject, callback) {
let message = `Working on ${subject}`;
callback();
}
subject, callback, dan message berada dalam scope function:
doHomework
├── subject
├── callback
└── message
Sedangkan:
doHomework("Math", function() {
console.log("Finished");
});
anonymous callback function tersebut juga memiliki scope-nya sendiri.
Jadi materi-materi yang kamu pelajari mulai saling terhubung.
37. Kesalahan pemula yang sering terjadi
Kesalahan 1 — Menganggap semua variable bisa diakses di mana saja
❌:
function test() {
let x = 10;
}
console.log(x);
Tidak bisa.
Kesalahan 2 — Menganggap variable dalam if bisa dipakai setelah if
❌:
if (true) {
let x = 10;
}
console.log(x);
Tidak bisa.
Kesalahan 3 — Menganggap parameter adalah global
❌:
function greetings(name) {
console.log(name);
}
console.log(name);
Tidak bisa.
name hanya milik greetings.
Kesalahan 4 — Menganggap function di dalam function bisa dipanggil dari luar
❌:
function outer() {
function inner() {
console.log("Hello");
}
}
inner();
Tidak bisa.
38. Cheat Sheet Scope
Global
let user = "John";
function test() {
console.log(user); // ✅
}
console.log(user); // ✅
Function / Local
function test() {
let message = "Hello";
console.log(message); // ✅
}
console.log(message); // ❌
Parameter
function greetings(name) {
console.log(name); // ✅
}
console.log(name); // ❌
Block
if (true) {
let x = 10;
console.log(x); // ✅
}
console.log(x); // ❌
Nested scope
let a = 1;
function test() {
let b = 2;
if (true) {
let c = 3;
console.log(a); // ✅
console.log(b); // ✅
console.log(c); // ✅
}
console.log(a); // ✅
console.log(b); // ✅
console.log(c); // ❌
}
39. Cara mengingat scope dengan “kotak”
Ini menurut saya cara paling mudah untuk kamu ingat.
Bayangkan setiap {} atau function sebagai kotak.
GLOBAL BOX
│
│ a
│
└── FUNCTION BOX
│
│ b
│
└── BLOCK BOX
│
│ c
│
Aturannya:
Dari dalam → boleh melihat keluar
BLOCK
↓
FUNCTION
↓
GLOBAL
Dari luar → tidak boleh melihat ke dalam
GLOBAL
❌→ FUNCTION local variable
FUNCTION
❌→ BLOCK variable
Ini mental model yang sangat berguna.
40. Satu contoh untuk menguji pemahaman
Coba perhatikan:
let a = 10;
function test() {
let b = 20;
if (true) {
let c = 30;
console.log(a);
console.log(b);
console.log(c);
}
console.log(a);
console.log(b);
console.log(c);
}
console.log(a);
console.log(b);
console.log(c);
Hasilnya:
10
20
30
10
20
Kemudian program berhenti/error ketika mencoba:
console.log(c);
di luar if.
Dan setelah itu b serta c juga tidak bisa diakses dari global.
Scope-nya:
GLOBAL
│
├── a
│
└── test()
│
├── b
│
└── if
│
└── c
🎯 Inti lecture ini
Kalau kamu hanya mengingat beberapa hal, ingat ini:
1. Scope = wilayah di mana sesuatu bisa diakses
"Variable ini bisa digunakan di mana?"
Itulah pertanyaan tentang scope.
2. Global Scope
Dibuat di luar function/block:
let user = "John";
Bisa digunakan dari scope yang berada di dalamnya.
3. Local / Function Scope
Dibuat di dalam function:
function test() {
let x = 10;
}
x hanya bisa digunakan dalam function tersebut dan scope yang berada di dalamnya.
4. Parameter juga local
function greetings(name) {
// name hanya tersedia di sini
}
5. Block Scope
let dan const yang dibuat di dalam {} hanya tersedia di block tersebut:
if (true) {
let x = 10;
}
Di luar block:
console.log(x); // ❌
6. Function juga punya scope
function greetings() {
function sayHello() {
console.log("Hello");
}
}
sayHello hanya tersedia di dalam scope greetings.
7. Aturan emas scope
Scope yang lebih dalam bisa mengakses scope di luarnya, tetapi scope luar tidak bisa mengakses variable yang hanya dibuat di dalam scope yang lebih dalam.
Secara visual:
GLOBAL
↓
FUNCTION
↓
BLOCK
Dari bawah ke atas: ✅ bisa akses
Dari atas ke bawah: ❌ tidak bisa akses
Dan ini adalah fondasi penting sebelum kamu masuk ke konsep yang lebih lanjut seperti closure, DOM event handler, callback yang mengakses variable luar, dan lexical scope.