Variabel JavaScript Dijelaskan: var vs let vs const, Lingkup, dan Praktik Terbaik

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Pendahuluan

JavaScript adalah salah satu bahasa pemrograman yang paling banyak digunakan dalam pengembangan web. Khususnya, dalam pengembangan front-end, ia esensial untuk membangun halaman web interaktif. Dalam konteks itu, variabel memainkan peran krusial dalam mengelola data dalam program Anda.

Dalam artikel ini, kami akan menjelaskan variabel JavaScript secara detail—dari dasar hingga topik yang lebih lanjut. Secara khusus, Anda akan belajar cara mendeklarasikan variabel, memahami konsep scope, mengikuti konvensi penamaan, dan mencegah kesalahan umum, semuanya dengan contoh kode praktis.

1.1 Apa yang Akan Anda Pelajari dalam Artikel Ini

Dengan membaca artikel ini, Anda akan memperoleh pengetahuan dan keterampilan berikut.

1. Memahami konsep dasar dan peran variabel dalam JavaScript
2. Belajar perbedaan antara var , let , dan const serta cara menggunakannya dengan benar
3. Mengelola scope dan masa pakai secara efektif
4. Menerapkan variabel dengan teknik praktis menggunakan contoh kode nyata
5. Mengidentifikasi penyebab kesalahan umum dan belajar cara memperbaikinya

1.2 Untuk Siapa Artikel Ini

• Pemula yang ingin belajar dasar JavaScript
• Pembelajar menengah yang memiliki pengalaman coding tetapi ingin pemahaman lebih dalam tentang perbedaan variabel dan scope
• Siapa saja yang ingin mengurangi kesalahan coding dan merancang program lebih efisien

Panduan ini menjelaskan konsep dengan contoh kode sehingga pemula tidak akan tersangkut. Ia juga mencakup tips pencegahan kesalahan dan bagian FAQ sehingga pembelajar menengah dapat memperoleh pengetahuan praktis yang diterapkan.

Di bagian selanjutnya, mari kita lihat lebih dekat apa itu “variabel” sebenarnya.

2. Apa Itu Variabel dalam JavaScript?

Dalam JavaScript, sebuah variabel adalah wadah bernama yang digunakan untuk menyimpan data secara sementara dan menggunakannya kembali saat diperlukan. Menggunakan variabel membuat pengelolaan data dalam program lebih efisien.

2.1 Apa Peran dari Sebuah Variabel?

Dalam pemrograman, variabel seperti “kotak” yang menyimpan informasi. Dengan memasukkan data ke dalam kotak dan mengeluarkannya, Anda dapat mengelola status program dan melakukan perhitungan.

Misalnya, kode berikut menggunakan variabel untuk menampilkan pesan.

let greeting = "Hello!";
console.log(greeting);

Dalam kode ini:

• Variabel greeting menyimpan string "Hello!" .
• console.log() mengeluarkan isi variabel tersebut.

Inilah cara variabel memungkinkan Anda memanipulasi data secara dinamis dalam program Anda.

2.2 Karakteristik Utama Variabel dalam JavaScript

Variabel JavaScript memiliki karakteristik berikut.

1. Dynamic typing

• Dalam JavaScript, tipe variabel (number, string, array, dll.) ditentukan secara otomatis. Anda tidak perlu menentukan tipe saat mendeklarasikan variabel.
• Contoh:

  let number = 10;         // number
  let text = "Hello!";     // string
  let isTrue = true;       // boolean
  

2. Fleksibilitas

• Anda dapat menetapkan nilai dengan tipe berbeda ke variabel yang sama (meskipun tidak direkomendasikan untuk keterbacaan).
• Contoh:

  let data = 10;     // number
  data = "string";   // changed to string
  

3. Scope (visibilitas)

• Rentang penggunaan variabel tergantung pada tempat di mana ia dideklarasikan (detailnya nanti).

3. Reassignment dan redeclaration

• Apakah reassignment atau redeclaration diizinkan tergantung pada kata kunci yang digunakan.
• Contoh:

  var x = 5;
  var x = 10; // redeclaration allowed (not recommended)
  
  let y = 5;
  // let y = 10; // Error (cannot redeclare)
  
  const z = 5;
  // z = 10; // Error (cannot reassign)
  

2.3 Manfaat Menggunakan Variabel

1. Kemampuan digunakan kembali

• Jika Anda perlu menggunakan nilai yang sama berulang kali, menyimpannya dalam variabel membuat pengelolaan lebih mudah.

1. Pembaruan lebih mudah

• Dengan memperbarui nilai variabel, perubahan akan tercermin di seluruh program.

1. Peningkatan keterbacaan dan kemudahan pemeliharaan

• Menggunakan variabel bernama menjelaskan maksud dan membantu pengembang lain memahami kode Anda.

2.4 Contoh Sederhana Menggunakan Variabel

Berikut adalah program perhitungan dasar menggunakan variabel.

let price = 500;              // item price
let quantity = 3;             // quantity
let total = price * quantity; // calculate total
console.log(`Total is ${total} yen.`);

Dalam contoh ini, harga dan kuantitas disimpan dalam variabel, dan total jumlah dihitung secara dinamis dan ditampilkan. Inilah cara variabel meningkatkan fleksibilitas dan efisiensi dalam program Anda.

3. Cara Mendeklarasikan Variabel dan Perbedaan Antara Kata Kunci

Di JavaScript, Anda menggunakan tiga kata kunci untuk mendeklarasikan variabel: var, let, dan const. Memahami karakteristiknya dan cara memilih di antara mereka membantu mencegah kesalahan dan meningkatkan keterbacaan.

3.1 Perbedaan Dasar Antara var, let, dan const

1. var – Deklarasi Warisan

var telah digunakan sejak versi awal JavaScript.

Karakteristik:

• Memungkinkan redeklarasi dan penugasan ulang.
• Memiliki lingkup fungsi (lingkup blok diabaikan).
• Hoisting memindahkan deklarasi ke bagian atas lingkupnya.

Contoh:

var x = 10;
console.log(x); // 10

var x = 20; // redeclaration allowed
console.log(x); // 20

if (true) {
  var y = 30; // ignores block scope
}
console.log(y); // 30

Catatan:

• Karena mengabaikan lingkup blok, hal ini dapat menyebabkan perilaku yang tidak diinginkan.
• Ini dianggap usang dalam JavaScript modern; hindari dalam kode baru.

2. let – Pilihan yang Direkomendasikan untuk Penugasan Ulang

let diperkenalkan pada ES6 (2015) dan kini banyak digunakan.

Karakteristik:

• Tidak dapat dideklarasikan ulang, tetapi dapat ditugaskan ulang.
• Memiliki lingkup blok.
• Hoisting terjadi, tetapi menggunakan sebelum inisialisasi menyebabkan error ( Temporal Dead Zone ).

Contoh:

let a = 10;
console.log(a); // 10

a = 20; // reassignment allowed
console.log(a); // 20

if (true) {
  let b = 30; // valid only inside this block
  console.log(b); // 30
}
// console.log(b); // Error: b is out of scope

Catatan:

• Gunakan let ketika penugasan ulang diperlukan, tetapi lebih pilih const ketika Anda tidak memerlukan penugasan ulang.

3. const – Untuk Konstanta

const juga diperkenalkan pada ES6 dan digunakan untuk mendeklarasikan konstanta (nilai yang tidak boleh ditugaskan ulang).

Karakteristik:

• Tidak dapat dideklarasikan ulang atau ditugaskan ulang.
• Memiliki lingkup blok.
• Harus diinisialisasi pada saat deklarasi.

Contoh:

const pi = 3.14;
console.log(pi); // 3.14

// pi = 3.1415; // Error: cannot reassign

if (true) {
  const gravity = 9.8;
  console.log(gravity); // 9.8
}
// console.log(gravity); // Error: out of scope

Catatan:

• Anda tidak dapat menugaskan ulang variabel itu sendiri, tetapi jika itu adalah objek atau array, Anda masih dapat memodifikasi properti/elemen-elemennya.

Contoh:

const user = { name: "Alice" };
user.name = "Bob"; // property mutation is allowed
console.log(user.name); // Bob

3.2 Tabel Perbandingan: var vs let vs const

3.3 Cara Memilih dengan Tepat

1. Gunakan const secara default

• Jika Anda tidak memerlukan penugasan ulang, gunakan const untuk meningkatkan keamanan.

2. Gunakan let hanya ketika penugasan ulang diperlukan

• Gunakan untuk penghitung loop atau variabel status yang harus berubah seiring waktu.

3. Hindari var

• Anda mungkin menemukan dalam kode warisan, tetapi tidak disarankan untuk basis kode modern.

3.4 Ringkasan Penggunaan Cepat

const PI = 3.14;           // constant
let count = 0;             // value that changes
for (let i = 0; i < 5; i++) {
  count += i;
}
console.log(count);        // display total

let userName = "Alice";
console.log(userName); // "Alice"
userName = "Bob";
console.log(userName); // "Bob"

4. Lingkup dan Masa Hidup Variabel

Di JavaScript, memahami lingkup (di mana variabel dapat diakses) dan masa hidup (berapa lama variabel ada di memori) suatu variabel sangat penting. Dengan menguasai konsep‑konsep ini, Anda dapat menghindari bug yang tidak terduga dan menulis kode yang lebih efisien.

4.1 Apa Itu Lingkup?

Lingkup mengacu pada rentang di mana sebuah variabel dapat diakses. Dalam JavaScript, lingkup berbeda tergantung pada cara variabel tersebut dideklarasikan.

1. Lingkup Global

Lingkup global berarti sebuah lingkup yang dapat diakses dari mana saja dalam program.

Contoh:

var globalVar = "Global variable";

function showGlobalVar() {
  console.log(globalVar); // Accessible
}

showGlobalVar();
console.log(globalVar); // Accessible

Catatan:
Karena variabel global dapat diakses dari mana saja, mereka rentan terhadap benturan nama dan penimpaan yang tidak disengaja. Anda sebaiknya meminimalkan penggunaannya.

2. Lingkup Lokal

Lingkup lokal mengacu pada sebuah lingkup yang hanya berlaku di dalam fungsi atau blok tertentu.

Contoh:

function localExample() {
  let localVar = "Local variable";
  console.log(localVar); // Accessible
}

// console.log(localVar); // Error: out of scope

Dalam contoh ini, variabel localVar hanya dapat diakses di dalam fungsi dan tidak dapat direferensikan di luar fungsi tersebut.

3. Lingkup Blok

Variabel yang dideklarasikan dengan let dan const hanya berlaku di dalam sebuah blok (bagian yang dibungkus dengan {}).

Contoh:

{
  let blockVar = "Block scope";
  console.log(blockVar); // Accessible
}
// console.log(blockVar); // Error: out of scope

Penting:
Jika Anda mendeklarasikan variabel menggunakan var, lingkup blok diabaikan, jadi berhati‑hati.

{
  var blockVar = "Block scope ignored";
}
console.log(blockVar); // Accessible (not recommended)

4.2 Apa Itu Masa Hidup?

Masa hidup mengacu pada berapa lama sebuah variabel tetap ada di memori.

1. Masa Hidup variabel global

• Mereka ada sejak program dimulai hingga selesai.

1. Masa Hidup variabel lokal

• Mereka hanya ada sejak fungsi dipanggil hingga fungsi selesai.

Contoh:

function showMessage() {
  let message = "Temporary message";
  console.log(message);
}

showMessage();
// console.log(message); // Error: message is not accessible after the function ends

Dalam contoh ini, setelah fungsi selesai, variabel message dihancurkan dan tidak dapat lagi direferensikan.

4.3 Apa Itu Rantai Lingkup?

Ketika lingkup bersarang terbentuk (seperti fungsi bersarang), JavaScript mencari variabel menggunakan mekanisme yang disebut rantai lingkup.

Contoh:

let outerVar = "Outside";

function outerFunction() {
  let innerVar = "Inside";

  function innerFunction() {
    console.log(outerVar); // Accesses outer scope
    console.log(innerVar); // Accesses inner scope
  }

  innerFunction();
}

outerFunction();

Dalam contoh ini, innerFunction mencari variabel terlebih dahulu di lingkupnya sendiri, kemudian di lingkup induk, dan akhirnya di lingkup global jika diperlukan. Proses pencarian ini adalah rantai lingkup.

4.4 Memahami Penutupan

Penutupan adalah fitur di mana sebuah fungsi dalam terus mempertahankan akses ke variabel dari fungsi luar.

Contoh:

function createCounter() {
  let count = 0; // Outer variable

  return function () {
    count++; // Accesses outer variable
    return count;
  };
}

const counter = createCounter();
counter(); // 1
counter(); // 2

Dalam contoh ini, fungsi dalam terus mengakses variabel luar count, memungkinkan ia mempertahankan keadaan. Closures berguna untuk penghitung, manajemen konfigurasi, dan lain-lain.

4.5 Poin Penting untuk Menggunakan Scope dan Lifetime Secara Efektif

1. Minimalkan penggunaan variabel global

• Untuk mencegah benturan nama dan penimpaan yang tidak sengaja, hindari penggunaan variabel global yang tidak diperlukan.

1. Manfaatkan scope lokal dengan baik

• Mengelola variabel dalam fungsi atau blok membantu mencegah bug yang tidak terduga.

1. Lebih pilih const

• Jika Anda tidak memerlukan penugasan ulang, gunakan const untuk meningkatkan keamanan.

1. Pahami kapan closures berguna

• Gunakan closures secara proaktif ketika Anda membutuhkan manajemen state atau enkapsulasi fungsi.

5. Inisialisasi Variabel dan Penanganan Undefined

Dalam JavaScript, menginisialisasi variabel dengan benar sangat penting. Variabel yang tidak diinisialisasi dan nilai undefined dapat menyebabkan kesalahan yang tidak terduga, jadi Anda perlu memahami perilakunya.

5.1 Apa Itu Inisialisasi Variabel?

Inisialisasi berarti memberikan nilai pertama ke sebuah variabel setelah mendeklarasikannya.

Contoh:

let count = 0;  // initialized
let message;    // uninitialized

Dalam contoh ini, count diinisialisasi dengan aman ke 0. Sementara itu, message tidak memiliki nilai yang diberikan, yang dapat menyebabkan perilaku tidak terduga di kemudian hari.

5.2 Bekerja dengan Undefined

1. Apa Itu undefined?

undefined adalah nilai khusus yang secara otomatis diberikan dalam kasus berikut:

• Variabel yang tidak diinisialisasi
• Properti objek atau elemen array yang tidak ada
• Fungsi yang tidak mengembalikan nilai

Contoh:

let value; // uninitialized variable
console.log(value); // undefined

let obj = {};
console.log(obj.property); // undefined (property does not exist)

function noReturn() {}
console.log(noReturn()); // undefined (no return value)

Catatan:

• Karena undefined sering muncul secara tidak sengaja, Anda perlu menanganinya dengan tepat dalam kode Anda.

2. Cara Memeriksa undefined

Berikut adalah cara aman untuk memeriksa apakah sebuah variabel atau properti bernilai undefined.

Contoh:

let data;

// Method 1: typeof operator
if (typeof data === "undefined") {
  console.log("The variable is undefined");
}

// Method 2: strict comparison
if (data === undefined) {
  console.log("The variable is undefined");
}

Menggunakan typeof lebih aman karena tidak akan menghasilkan error meskipun variabel tersebut tidak pernah dideklarasikan.

5.3 Bekerja dengan null

1. Apa Itu null?

null mewakili nilai “kosong secara sengaja”. Berbeda dengan undefined, nilai ini diatur secara manual oleh pengembang.

Contoh:

let value = null;
console.log(value); // null

2. Perbedaan antara undefined dan null

Contoh:

console.log(undefined == null);  // true
console.log(undefined === null); // false

Catatan:

• Gunakan null untuk secara eksplisit menunjukkan “nilai kosong”.
• Membedakannya dari undefined memperjelas maksud Anda dalam kode.

5.4 Praktik Terbaik untuk Inisialisasi

1. Selalu inisialisasi

Berikan nilai pada saat deklarasi untuk menghindari keadaan undefined.

Contoh:

let count = 0;     // initialized
let message = "";  // initialized with an empty string

2. Gunakan null untuk membuat maksud eksplisit

Jika data belum ditentukan, inisialisasi dengan null untuk menunjukkan bahwa Anda berencana mengaturnya nanti.

Contoh:

let result = null; // will be assigned later

3. Periksa apakah nilai sudah diinisialisasi

Periksa apakah argumen fungsi atau nilai kembali bernilai undefined.

Contoh:

function greet(name) {
  if (name === undefined || name === null) {
    console.log("No name provided");
  } else {
    console.log(`Hello, ${name}!`);
  }
}

greet();        // No name provided
greet("Taro");  // Hello, Taro!

5.5 Kesalahan Umum dan Cara Memperbaikinya

1. ReferenceError

Penyebab: Mengakses variabel yang tidak pernah dideklarasikan.
Contoh:

console.log(name); // Error: name is not defined

Perbaikan:
Deklarasikan dan inisialisasi variabel sebelum menggunakannya.

2. TypeError

Penyebab: Mencoba mengakses properti pada null atau undefined.
Contoh:

let obj = null;
console.log(obj.property); // Error: cannot read properties

Perbaikan:
Periksa nilai tersebut terlebih dahulu.

if (obj !== null && obj !== undefined) {
  console.log(obj.property);
}

5.6 Ringkasan

Inisialisasi variabel dan penanganan nilai undefined adalah keterampilan dasar JavaScript. Dengan menginisialisasi secara tepat dan melakukan pemeriksaan yang aman, Anda dapat mencegah kesalahan yang tidak terduga.

6. Aturan Penamaan Variabel dan Praktik Terbaik

Di JavaScript, cara Anda menamai variabel memiliki dampak signifikan pada keterbacaan dan pemeliharaan kode. Dengan mengikuti konvensi penamaan yang tepat, maksud kode Anda menjadi lebih jelas dan kesalahan lebih mudah dihindari. Bagian ini menjelaskan aturan penamaan variabel dan praktik terbaik secara detail.

6.1 Aturan Dasar untuk Nama Variabel

Di JavaScript, nama variabel harus mengikuti aturan berikut.

1. Karakter yang Diizinkan

• Huruf alfabet ( a–z , A–Z )
• Angka ( 0–9 )
• Garis bawah ( _ )
• Tanda dolar ( $ )

2. Pola yang Tidak Diizinkan

• Nama variabel tidak boleh dimulai dengan angka. Contoh:

  let 1name = "Error"; // Error
  let name1 = "Correct";
  

• Kata kunci yang dipesan JavaScript tidak dapat digunakan (misalnya, let , const , class ). Contoh:

  let const = "Error"; // Error
  let value = "Correct";
  

• Spasi dan karakter khusus tidak diperbolehkan. Contoh:

  let user name = "Error"; // Error
  let userName = "Correct";
  

6.2 Gaya Penamaan Umum

Ada beberapa gaya penamaan yang umum digunakan di JavaScript.

1. camelCase (Direkomendasikan)

Kata pertama dimulai dengan huruf kecil, dan kata-kata berikutnya dimulai dengan huruf kapital.

Contoh:

let userName = "Taro";      // Recommended
let totalAmount = 500;     // Recommended

2. snake_case (Penggunaan Terbatas)

Kata dipisahkan dengan garis bawah (_). Gaya ini sering digunakan untuk konstanta atau dalam kode yang berhubungan dengan basis data.

Contoh:

let user_name = "Taro"; // Allowed but not common in JavaScript

3. PascalCase (Untuk Kelas dan Konstruktor)

Setiap kata dimulai dengan huruf kapital. Umumnya dipakai untuk nama kelas dan fungsi konstruktor.

Contoh:

class UserProfile {
  constructor(name) {
    this.name = name;
  }
}

4. UPPER_SNAKE_CASE untuk Konstanta

Konstanta biasanya ditulis dengan huruf kapital dan garis bawah.

Contoh:

const MAX_VALUE = 100;
const DEFAULT_TIMEOUT = 5000;

6.3 Praktik Terbaik

1. Gunakan Nama yang Bermakna

Nama variabel harus jelas menggambarkan tujuan mereka.

Contoh Buruk:

let x = 10; // Meaning unclear

Contoh Baik:

let itemCount = 10; // Clearly represents the number of items

2. Hindari Singkatan Berlebihan

Singkatan yang berlebihan mengurangi keterbacaan.

Contoh Buruk:

let nm = "Taro"; // Unclear

Contoh Baik:

let userName = "Taro"; // Clear intent

3. Pertahankan Konsistensi

Gunakan konvensi penamaan yang sama di seluruh kode Anda.

Contoh Buruk:

let user_name = "Taro"; // snake_case
let userAge = 25;       // camelCase (inconsistent)

Contoh Baik:

let userName = "Taro";
let userAge = 25; // Consistent camelCase

4. Gunakan Nama Logis untuk Flag Boolean

Variabel boolean harus menggambarkan kondisi atau status.

Contoh Buruk:

let flag = true; // Ambiguous

Contoh Baik:

let isLoggedIn = true; // Clearly represents state

5. Jelaskan Angka dan Satuan

Ketika variabel mewakili nilai numerik atau satuan, buatlah hal itu eksplisit.

Contoh Buruk:

let size = 10; // Unit unclear

Contoh Baik:

let fontSizePx = 10; // Font size in pixels

6.4 Pedoman Penamaan dan Catatan

1. Gunakan Bahasa Inggris Pemrograman menggunakan Bahasa Inggris sebagai bahasa standar. Hindari menggunakan nama variabel dalam bahasa Jepang atau romanisasi.

Contoh Buruk:

let namae = "Taro"; // Avoid romanized Japanese

Contoh Baik:

let userName = "Taro"; // Use English

2. Gunakan awalan dan akhiran bila membantu Menambahkan awalan atau akhiran dapat memperjelas peran sebuah variabel.

Contoh:

let btnSubmit = document.getElementById("submit"); // Button element
let arrUsers = ["Taro", "Hanako"];                 // Array

7. Kesalahan Umum dan Cara Memperbaikinya

Dalam JavaScript, kesalahan yang terkait dengan deklarasi dan penggunaan variabel sering terjadi. Kesalahan ini dapat menghentikan eksekusi kode atau menyebabkan perilaku yang tidak diinginkan. Bagian ini menjelaskan kesalahan umum dan cara menanganinya.

7.1 ReferenceError

Penyebab

Sebuah ReferenceError terjadi ketika Anda mencoba mengakses variabel yang tidak ada atau berada di luar cakupannya.

Contoh: Mengakses variabel yang belum dideklarasikan

console.log(value); // Error: value is not defined

Cara Memperbaiki

1. Deklarasikan variabel sebelum menggunakannya.

   let value = 10;
   console.log(value); // 10
   

2. Periksa cakupan (scope) variabel.

   function test() {
     let localVar = "Local variable";
   }
   // console.log(localVar); // Error: out of scope
   

7.2 TypeError

Penyebab

Sebuah TypeError terjadi ketika sebuah nilai tidak memiliki tipe yang diharapkan.

Contoh: Mengakses properti dari undefined

let obj;
console.log(obj.property); // Error: Cannot read properties of undefined

Cara Memperbaiki

1. Periksa inisialisasi dan tipe data sebelumnya.

   let obj = {};
   console.log(obj.property); // undefined (no error)
   

2. Gunakan operator optional chaining ( ?. ).

   let obj;
   console.log(obj?.property); // undefined (no error)
   

7.3 SyntaxError

Penyebab

Sebuah SyntaxError terjadi ketika ada kesalahan tata bahasa dalam kode.

Contoh: Hilangnya titik koma

let x = 10
let y = 20;

Cara Memperbaiki

1. Gunakan editor kode atau alat linting (misalnya, ESLint) untuk mendeteksi masalah sintaks.
2. Jalankan kode Anda dan periksa pesan kesalahan di dev tools browser atau Node.js.

7.4 Uncaught Error

Penyebab

Sebuah Uncaught Error muncul ketika sebuah pengecualian dilemparkan tanpa ditangani oleh try...catch.

Contoh:

throw new Error("Something went wrong!");

Cara Memperbaiki

1. Tambahkan penanganan pengecualian.

   try {
     throw new Error("Error occurred!");
   } catch (error) {
     console.log(error.message); // Error occurred!
   }
   

2. Log pesan kesalahan dengan tepat agar proses debugging menjadi lebih mudah.

7.5 RangeError

Penyebab

Sebuah RangeError terjadi ketika sebuah nilai berada di luar rentang yang diizinkan.

Contoh 1: Indeks array di luar jangkauan

let arr = [1, 2, 3];
console.log(arr[5]); // undefined (not an error, but unintended)

Contoh 2: Panjang array tidak valid

new Array(-1); // Error: Invalid array length

Cara Memperbaiki

1. Periksa indeks sebelum mengakses array.

   let arr = [1, 2, 3];
   if (arr[5] !== undefined) {
     console.log(arr[5]);
   } else {
     console.log("Out of range");
   }
   

2. Kendalikan kondisi loop dan panjang array dengan tepat.

7.6 Kesalahan Umum Lainnya

1. NaN

Penyebab: Terjadi ketika operasi numerik menghasilkan nilai yang bukan angka.
Contoh:

let result = parseInt("abc"); // NaN

Cara Memperbaiki

• Gunakan isNaN() untuk memeriksa.

  if (isNaN(result)) {
    console.log("Invalid number");
  }
  

2. Infinity

Penyebab: Terjadi ketika membagi dengan nol atau melakukan perhitungan yang sangat besar.
Contoh:

let value = 1 / 0; // Infinity

Cara Memperbaiki

• Validasi nilai sebelum melakukan perhitungan.

  let value = 10;
  if (value !== 0) {
    console.log(100 / value);
  } else {
    console.log("Cannot divide by zero");
  }
  

7.7 Ringkasan

Kesalahan tidak dapat dihindari dalam pengembangan JavaScript, tetapi dengan memahami penyebabnya dan menerapkan teknik penanganan yang tepat, Anda dapat menjaga program tetap stabil. Mengantisipasi area yang rawan kesalahan dan menerapkan penanganan kesalahan yang sesuai sangat penting untuk kode yang dapat diandalkan.

8. Contoh Praktis: Program Menggunakan Variabel JavaScript

Pada bagian ini, kami menerapkan apa yang telah dipelajari tentang variabel JavaScript dengan membangun contoh program konkret. Kami akan membahasnya langkah demi langkah, mulai dari kasus sederhana hingga yang sedikit lebih maju.

8.1 Contoh 1: Aplikasi Perhitungan

Masalah:

Buat program yang menyimpan harga dan kuantitas produk dalam variabel, kemudian menghitung dan menampilkan total biaya.

Contoh Kode:

const pricePerItem = 500;        // price per item (constant)
let quantity = 3;               // quantity (variable)
let totalPrice = pricePerItem * quantity; // calculate total

console.log(`The total price is ${totalPrice} yen.`);

Penjelasan:

1. Konstanta pricePerItem mewakili harga barang, yang tidak berubah.
2. Variabel quantity menyimpan jumlah barang dan dapat diperbarui.
3. Hasil perhitungan disimpan dalam totalPrice dan ditampilkan menggunakan template literal.

8.2 Contoh 2: Perhitungan Diskon dengan Logika Kondisional

Masalah:

Buat program yang menerapkan diskon berdasarkan total jumlah pembelian.

Contoh Kode:

let totalAmount = 1200; // total purchase amount
let discount = 0;       // discount rate (initialized)

if (totalAmount >= 1000) {
  discount = 0.1; // 10% discount
} else if (totalAmount >= 500) {
  discount = 0.05; // 5% discount
}

let discountedAmount = totalAmount - totalAmount * discount;
console.log(`The discounted price is ${discountedAmount} yen.`);

Penjelasan:

1. Menginisialisasi discount mencegah error bahkan jika tidak ada kondisi yang cocok.
2. Tarif diskon ditentukan menggunakan pernyataan kondisional.
3. Menggunakan variabel memudahkan modifikasi kondisi atau nilai.

8.3 Contoh 3: Manajemen Data dengan Array dan Loop

Masalah:

Kelola daftar produk dan harganya menggunakan array, kemudian hitung total biaya.

Contoh Kode:

const items = ["Apple", "Banana", "Orange"]; // item names
const prices = [100, 200, 150];              // prices
let totalCost = 0;                           // total cost

for (let i = 0; i < items.length; i++) {
  console.log(`${items[i]}: ${prices[i]} yen`);
  totalCost += prices[i];
}

console.log(`Total cost: ${totalCost} yen`);

Penjelasan:

1. Array memungkinkan Anda mengelola banyak titik data terkait secara efisien.
2. Loop memproses setiap item tanpa menduplikasi kode.
3. Variabel totalCost mengakumulasi jumlah.

8.4 Contoh 4: Perhitungan yang Dapat Digunakan Kembali dengan Fungsi

Masalah:

Buat fungsi yang dapat digunakan kembali untuk menghitung pajak.

Contoh Kode:

function calculateTax(price, taxRate = 0.1) {
  return price + price * taxRate;
}

let itemPrice = 1000;                 // item price
let finalPrice = calculateTax(itemPrice); // price including tax
console.log(`Price with tax: ${finalPrice} yen`);

Penjelasan:

1. Fungsi calculateTax mengembalikan harga termasuk pajak.
2. Parameter default memungkinkan fungsi bekerja tanpa menentukan tarif pajak.
3. Fungsi yang dapat digunakan kembali meningkatkan pemeliharaan dan efisiensi.

8.5 Contoh 5: Menangani Input Pengguna

Masalah:

Buat program yang menanyakan nama dan usia pengguna, kemudian menentukan apakah mereka sudah dewasa.

Contoh Kode:

let userName = prompt("Please enter your name:");
let age = parseInt(prompt("Please enter your age:"), 10);

if (age >= 18) {
  console.log(`${userName} is an adult.`);
} else {
  console.log(`${userName} is a minor.`);
}

Penjelasan:

1. prompt digunakan untuk mengumpulkan input pengguna.
2. parseInt mengubah input string menjadi angka.
3. Nama variabel yang jelas membuat kode lebih mudah dipahami.

8.6 Ringkasan

Di bagian ini, kami mengeksplor contoh praktis menggunakan variabel JavaScript.

Poin penting:

1. Aplikasi perhitungan: Implementasikan aritmetika dasar dan manajemen variabel.
2. Diskon kondisional: Mengubah nilai secara dinamis berdasarkan kondisi.
3. Array dan loop: Mengelola serta memproses banyak titik data secara efisien.
4. Fungsi: Meningkatkan kemampuan penggunaan kembali dan pemeliharaan.
5. Input pengguna: Membuat program interaktif menggunakan variabel.

9. FAQ (Pertanyaan yang Sering Diajukan)

Bagian ini menjawab pertanyaan umum tentang variabel JavaScript, mencakup jebakan bagi pemula dan masalah yang lebih lanjutan.

Q1: Mana yang harus saya gunakan: var, let, atau const?

A:

Dalam kebanyakan kasus, gunakan const secara default.

• Ini mencegah penugasan ulang dan deklarasi ulang, membuat kode lebih aman.
• Ini secara jelas menyatakan niat bahwa nilai tidak boleh berubah.

Gunakan let hanya ketika penugasan ulang diperlukan.

Hindari var dalam JavaScript modern karena mengabaikan block scope dan dapat menyebabkan bug yang tidak terduga.

Q2: Apakah saya perlu mendeklarasikan tipe variabel di JavaScript?

A:

Tidak. JavaScript adalah bahasa yang bertipe dinamis, sehingga tipe variabel ditentukan secara otomatis oleh nilai yang diberikan.

Contoh:

let value = 10;     // number
value = "string";  // string (no error)

Namun, pengetikan dinamis dapat menyebabkan bug yang tidak diinginkan, jadi berhati-hatilah. Menggunakan TypeScript dapat meningkatkan keamanan tipe.

Q3: Apakah saya dapat memodifikasi properti objek yang dideklarasikan dengan const?

A:

Ya. const mencegah penugasan ulang pada variabel itu sendiri, tetapi properti objek masih dapat dimodifikasi.

Contoh:

const user = { name: "Alice" };
user.name = "Bob"; // property update allowed
console.log(user);

// user = {}; // Error: reassignment not allowed

Q4: Apa perbedaan antara undefined dan null?

A:

• undefined: Sebuah variabel telah dideklarasikan tetapi belum diberikan nilai.
• null: Nilai “kosong” yang secara eksplisit diberikan.

Contoh:

let a;        // undefined
let b = null; // explicitly empty

Q5: Mengapa variabel global harus dihindari?

A:

Variabel global dapat menimbulkan beberapa masalah:

1. Tabrakan nama: Risiko lebih tinggi terjadi konflik nama.
2. Pemeliharaan lebih rendah: Sulit melacak di mana nilai berubah.
3. Kesulitan debugging: Nilai dapat ditimpa secara tak terduga.

Solusi:
Jika diperlukan, kelompokkan variabel global ke dalam objek namespace.

Contoh:

const App = {
  userName: "Alice",
  userAge: 25
};

console.log(App.userName);

Q6: Konvensi penamaan apa yang harus saya gunakan?

A:

Konvensi yang direkomendasikan meliputi:

1. camelCase: Untuk variabel dan fungsi.

   let userName = "Alice";
   

2. PascalCase: Untuk kelas dan konstruktor.

   class UserProfile {}
   

3. UPPER_SNAKE_CASE: Untuk konstanta.

   const MAX_COUNT = 100;
   

Q7: Apa itu closure?

Jawaban:

Closure adalah fitur di mana sebuah fungsi tetap memiliki akses ke variabel‑variabel dari lingkup luarannya.

Contoh:

function counter() {
  let count = 0;

  return function () {
    count++;
    return count;
  };
}

const increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2

Closure berguna untuk manajemen state dan enkapsulasi.

10. Kesimpulan

Dalam artikel ini, kami membahas variabel JavaScript secara komprehensif, dari konsep dasar hingga penggunaan lanjutan. Variabel merupakan hal mendasar untuk mengelola data dan menulis program yang fleksibel serta efisien.

10.1 Ringkasan Poin Penting

1. Dasar‑dasar Variabel

• Variabel menyimpan data sementara untuk digunakan kembali.
• Pengetikan dinamis menawarkan fleksibilitas tetapi memerlukan pengelolaan yang hati‑hati.

2. Metode Deklarasi

• var: Lingkup fungsi, dapat dideklarasikan ulang, tetapi tidak direkomendasikan.
• let: Lingkup blok, dapat ditugaskan ulang.
• const: Lingkup blok, pilihan paling aman untuk kebanyakan kasus.

3. Lingkup dan Umur

• Lingkup menentukan di mana variabel dapat diakses.
• Minimalkan variabel global dan manfaatkan lingkup lokal/blok.

4. Inisialisasi dan Penanganan Undefined

• undefined: Diberikan secara otomatis ketika tidak ada nilai yang ditetapkan.
• null: Secara eksplisit mewakili nilai kosong.

5. Penamaan dan Praktik Terbaik

• Gunakan nama yang bermakna dan konsisten (lebih disukai camelCase).
• Gunakan UPPER_SNAKE_CASE untuk konstanta.

6. Kesalahan Umum

• Memahami kesalahan umum (ReferenceError, TypeError, dll.) meningkatkan efisiensi debugging.
• Penanganan error yang tepat meningkatkan stabilitas program.

7. Contoh Kode Praktis

• Contoh langsung menunjukkan perhitungan, kondisi, array, fungsi, dan input pengguna.

10.2 Langkah Selanjutnya

1. Lanjut ke Topik Lanjutan

• Fungsi dan metode: Meningkatkan modularitas dan penggunaan kembali.
• Objek dan kelas: Bekerja dengan struktur data yang kompleks.
• Fitur modern ES6+: Template literal, fungsi panah, destrukturisasi, dan lainnya.

2. Praktik dengan Proyek Nyata

Menerapkan variabel dalam proyek nyata akan memperdalam pemahaman Anda.

Contoh:

• Membuat aplikasi ToDo sederhana.
• Membuat kalkulator atau alat kalender.
• Menerapkan validasi formulir.

10.3 Pemikiran Akhir

Variabel JavaScript adalah blok bangunan inti pemrograman. Dengan mendeklarasikan dan mengelolanya secara tepat, Anda dapat menulis kode yang aman, efisien, dan dapat dipelihara.

Dengan pengetahuan terstruktur yang diperoleh dalam artikel ini—dari dasar hingga penggunaan lanjutan—Anda siap melanjutkan praktik dan memperkuat keterampilan JavaScript Anda melalui coding langsung.