Scope Dasar
Belajar membaca area akses variable: global scope, function scope, dan block scope.
Tujuan belajar
- Membedakan global scope, function scope, dan block scope
- Memprediksi apakah sebuah variable bisa diakses dari posisi tertentu
- Menghindari variable yang bocor ke area yang tidak perlu
Isi lesson
7 blok- 1.Variable tidak selalu bisa dibaca dari mana sajaBelum selesaiWajib
- 2.Tiga scope yang perlu kamu baca duluBelum selesaiWajib
- 3.Membaca batas akses variableBelum selesaiWajib
- 4.Jangan menjadikan semuanya globalBelum selesaiWajib
- 5.Cek pemahamanBelum selesaiWajib
- 6.Coding practiceBelum selesaiWajib
- 7.RingkasanBelum selesaiWajib
Variable tidak selalu bisa dibaca dari mana saja
WajibDi Level 4, kamu sudah memakai variable, function, DOM event, localStorage, dan fetch. Saat kode mulai lebih panjang, pertanyaan pentingnya bukan hanya value apa yang disimpan, tetapi juga di mana value itu boleh dibaca.
Scope adalah batas akses variable. Scope membantu kode tetap rapi karena data kecil tidak perlu tersedia di seluruh file. Kalau semua variable dibuat global, fitur kecil bisa saling mengganggu dan debugging menjadi lebih melelahkan.
Bagian ini memengaruhi progres lesson.
Tiga scope yang perlu kamu baca dulu
WajibGlobal scope berarti variable dibuat di area paling luar file dan bisa dibaca oleh kode setelahnya di file yang sama. Function scope berarti variable dibuat di dalam function dan hanya aman dipakai di function itu. Block scope berarti variable let atau const dibuat di dalam block seperti if atau for, lalu tidak bisa dibaca dari luar block.
Saat membaca kode, mulai dari posisi variable dibuat. Lalu tanyakan: apakah kode yang membaca variable berada di dalam area yang sama, di area yang lebih dalam, atau sudah keluar dari area itu?
Bagian ini memengaruhi progres lesson.
Membaca batas akses variable
Wajibconst appName = "FluentStack";
function showLessonStatus() {
const lessonTitle = "Scope Dasar";
if (lessonTitle.length > 0) {
const status = "Siap dipelajari";
console.log(appName);
console.log(lessonTitle);
console.log(status);
}
console.log(appName);
console.log(lessonTitle);
// console.log(status); // Tidak bisa dibaca di sini.
}
showLessonStatus();appName dibuat di global scope, jadi function bisa membacanya. lessonTitle dibuat di function, jadi masih bisa dibaca di dalam function. status dibuat di dalam block if dengan const, jadi hanya bisa dibaca di dalam block itu.
Bagian ini memengaruhi progres lesson.
Kesalahan umum
WajibJangan menjadikan semuanya global
Global variable terasa mudah di awal karena bisa dibaca dari banyak tempat. Tetapi semakin besar file, global variable membuat perubahan kecil lebih berisiko. Simpan variable sedekat mungkin dengan kode yang benar-benar membutuhkannya.
Bagian ini memengaruhi progres lesson.
Cek pemahaman
WajibJawab duluCek pemahaman singkat
Jika const message dibuat di dalam block if, apa yang terjadi saat kode di luar block if mencoba membaca message?
Progres lesson naik setelah jawaban benar.
Coding practice
WajibDibuka di workspace khususPrediksi akses variable
Latihan memprediksi apakah variable masih bisa dibaca dari posisi tertentu.
Tujuan awal: Fokus di tab JS.
Practice ini dibuka di workspace khusus. Buka practice untuk memakai editor, preview, dan cek otomatis.
Tombol selesai aktif setelah semua validasi wajib lolos.
Ringkasan
Wajib- Scope menentukan area tempat variable bisa dibaca.
- Global scope berada di area paling luar file.
- Function scope membatasi variable di dalam function.
- Block scope membatasi let dan const di dalam block seperti if atau for.
- Berikutnya, kamu akan melihat closure: function yang tetap mengingat variable dari scope luarnya.
Bagian ini memengaruhi progres lesson.
Langkah berikutnya
Selesaikan bagian penting lesson ini
Lanjutkan blok wajib berikutnya: Variable tidak selalu bisa dibaca dari mana saja.