JavaScript - Kedudukan Variabel

Hai sana, para ahli JavaScript masa depan! Hari ini, kita akan melangkah ke dalam dunia yang menarik dari kedudukan variabel. Jangan khawatir jika Anda masih baru dalam pemrograman - saya akan menjadi panduan ramah Anda, dan kita akan menjelajahi konsep ini bersama, langkah demi langkah. Jadi, ambil keyboard Anda (tongkat sihir) dan mari kita masuk ke dalam!

JavaScript - Variable Scope

Kedudukan Variabel JavaScript

Kedudukan variabel seperti tempat permainan di mana variabel Anda bisa bermain. Ini menentukan di mana dalam kode Anda variabel dapat terlihat dan digunakan. Bayangkan itu sebagai "jangkauan visibility" variabel Anda. Mari kita mulai dengan contoh sederhana:

let globalVar = "Saya terlihat di mana saja!";

function sayHello() {
console.log(globalVar);
let localVar = "Saya hanya terlihat dalam fungsi ini!";
console.log(localVar);
}

sayHello();
console.log(globalVar);  // Ini berjalan
console.log(localVar);   // Ini akan menyebabkan kesalahan

Dalam contoh ini, globalVar seperti anak populer di sekolah - semua orang kenal dan bisa berbicara dengannya. Tetapi localVar lebih seperti anak malu yang hanya muncul saat kelas seni (fungsi sayHello).

Kedudukan Blok JavaScript

Sekarang, mari bicarakan tentang kedudukan blok. Dalam JavaScript, blok ditentukan oleh kurung kurawal {}. Variabel yang dideklarasikan dengan let dan const adalah blok-scoped, yang berarti mereka hanya terlihat dalam blok tempat mereka dideklarasikan.

if (true) {
let blockScopedVar = "Saya hanya terlihat dalam blok ini!";
console.log(blockScopedVar);  // Ini berjalan
}

console.log(blockScopedVar);  // Ini akan menyebabkan kesalahan

Bayangkan kedudukan blok seperti rumah klub rahasia. Hanya anak-anak keren (variabel) di dalam rumah klub (blok) yang tahu shake hand rahasia (dapat mengakses variabel).

Kedudukan Fungsi JavaScript

Kedudukan fungsi seperti kamar pribadi untuk variabel Anda. Setiap variabel yang dideklarasikan dalam fungsi hanya dapat diakses dalam fungsi itu sendiri. Mari kita lihat contoh:

function outer() {
let outerVar = "Saya dalam fungsi luar!";

function inner() {
let innerVar = "Saya dalam fungsi dalam!";
console.log(outerVar);  // Ini berjalan
console.log(innerVar);  // Ini berjalan
}

inner();
console.log(outerVar);  // Ini berjalan
console.log(innerVar);  // Ini akan menyebabkan kesalahan
}

outer();

Di sini, outerVar seperti orang tua yang bisa melihat ke dalam kamar anaknya (inner fungsi), tetapi mainan anak (innerVar) tinggal di kamar anaknya.

Kedudukan Lokal JavaScript

Kedudukan lokal merujuk kepada variabel yang hanya dapat diakses dalam bagian tertentu dari kode Anda. Ini bisa dalam fungsi (kedudukan fungsi) atau blok (kedudukan blok). Mari kita lihat contoh yang lebih kompleks:

let globalVar = "Saya global!";

function outerFunction() {
let outerVar = "Saya dari fungsi luar!";

if (true) {
let blockVar = "Saya dari blok!";
var functionVar = "Saya terlihat sepanjang fungsi!";

console.log(globalVar);    // Berjalan
console.log(outerVar);     // Berjalan
console.log(blockVar);     // Berjalan
console.log(functionVar);  // Berjalan
}

console.log(globalVar);    // Berjalan
console.log(outerVar);     // Berjalan
console.log(functionVar);  // Berjalan
console.log(blockVar);     // Kesalahan!
}

outerFunction();
console.log(globalVar);    // Berjalan
console.log(outerVar);     // Kesalahan!
console.log(functionVar);  // Kesalahan!
console.log(blockVar);     // Kesalahan!

Contoh ini seperti pesta besar keluarga. globalVar adalah kakek/nenek yang semua orang kenal. outerVar seperti orang tua, dikenal dalam keluarga outerFunction. blockVar adalah sepupu malu yang hanya muncul di satu ruangan (blok if). functionVar, dideklarasikan dengan var, adalah paman keras yang semua orang di dalam fungsi bisa dengar.

Sekarang, mari rangkum jenis deklarasi variabel dan kedudukannya dalam tabel praktis:

Deklarasi Kedudukan Penembusan Dapat Diubah
var Fungsi Ya Ya
let Blok Tidak Ya
const Blok Tidak Tidak

Ingat, var adalah anak lama yang cool yang bisa sedikit tak tentu. let dan const adalah anak baru di blok yang memainkan peraturan yang lebih ketat.

Memahami kedudukan variabel sangat penting dalam JavaScript. Ini membantu Anda menulis kode yang bersih dan efisien serta menghindari kutukan yang menyusahkan. Selalu ingat untuk mendeklarasikan variabel Anda dalam kedudukan yang sesuai dan berhati-hati saat mencoba mengaksesnya.

Saat ini, bayangkan kode Anda seperti kota yang terorganisir baik. Variabel global adalah taman umum yang semua orang bisa kunjungi. Kedudukan fungsi adalah seperti bangunan dengan lantai yang berbeda (blok), setiap lantai memiliki kamar (kedudukan lokal) sendiri. Dengan menjaga variabel Anda di "rumah" mereka yang sesuai, Anda akan menciptakan kota JavaScript yang harmonis dan berfungsi baik!

Terus latihan, dan segera Anda akan menjadi ahli kedudukan variabel. Sampaijumpa lagi, coding yang gembira!

Credits: Image by storyset