Kita bahas lecture ini pelan-pelan dari dasar, karena konsep variable adalah salah satu fondasi terpenting dalam JavaScript. Kalau bagian ini sudah kuat, nanti materi seperti data types, operators, functions, object, dan array akan jauh lebih mudah dipahami.

1. Apa itu Variable?

Bayangkan kamu punya sebuah kotak penyimpanan.

Di kotak tersebut kamu bisa menyimpan sesuatu, misalnya:

• nama → "John"
• umur → 25
• negara → "Indonesia"

Supaya kita tahu isi kotak mana yang ingin digunakan, kita memberikan nama pada kotak tersebut.

Dalam programming, kotak tersebut kita sebut variable.

Misalnya:

let username = "John";

Artinya:

Buat sebuah variable bernama username, lalu simpan nilai "John" di dalamnya.

Secara sederhana:

username
   ↓
"John"

Kemudian kapan pun kita membutuhkan "John", kita cukup menggunakan:

username

daripada menulis:

"John"

berulang-ulang.

2. Kenapa Variable Dibutuhkan?

Misalnya kita tidak menggunakan variable:

console.log("John");
alert("John");
document.write("John");

Kita menulis "John" berkali-kali.

Sekarang bayangkan nama tersebut berubah menjadi "Mark".

Kita harus mencari dan mengganti semua "John".

Dengan variable:

let username = "John";

console.log(username);
alert(username);
document.write(username);

Kalau nama berubah:

username = "Mark";

Maka semua penggunaan username akan mendapatkan nilai "Mark".

Jadi variable membantu membuat program:

• lebih mudah dibaca
• lebih mudah diubah
• lebih terorganisir
• mengurangi penulisan nilai yang sama berulang kali

3. Membuat Variable dengan let

Di JavaScript modern, kita bisa membuat variable menggunakan keyword:

let

Contoh:

let username;

Di sini kita baru membuat/mendeklarasikan variable.

Belum ada nilai yang diberikan.

4. Declaration vs Initialization

Ini istilah yang sangat penting.

A. Variable Declaration

let username;

Artinya kita mengatakan kepada JavaScript:

“Saya ingin membuat sebuah variable bernama username.”

Ini disebut declaration.

B. Variable Initialization

Kemudian kita memberikan nilai:

username = "John";

Ini disebut initialization dalam konteks lecture tersebut.

Sekarang:

username
   ↓
"John"

Jadi:

let username;       // declaration
username = "John";  // initialization

5. Declaration + Initialization Sekaligus

Kita tidak harus membuatnya dalam dua baris.

Kita bisa langsung:

let username = "John";

Ini melakukan dua hal sekaligus:

Declaration
    ↓
let username
    +
Initialization
    ↓
= "John"

Jadi:

let username = "John";

adalah cara yang sangat umum digunakan.

6. Menggunakan Isi Variable

Setelah variable dibuat:

let username = "John";

kita bisa menggunakan variable tersebut:

console.log(username);

Output:

John

Perhatikan:

console.log(username);

berbeda dengan:

console.log("username");

Yang pertama mengambil isi variable.

Yang kedua mencetak tulisan "username".

Contoh:

let username = "John";

console.log(username);
console.log("username");

Hasil:

John
username

Karena:

• username → nama variable
• "username" → string/tulisan literal

7. let Bisa Diubah Nilainya

Salah satu karakteristik penting let adalah:

Nilai yang disimpan oleh variable let bisa diganti.

Contoh:

let username = "John";

console.log(username);

Output:

John

Kemudian:

username = "Mark";

Sekarang isi variable berubah:

username
   ↓
"Mark"

Kalau:

console.log(username);

hasilnya:

Mark

8. Mengubah Nilai Variable Disebut Mutation

Lecture menyebut proses ini sebagai variable mutation.

Contoh:

let country = "USA";

country = "UK";

Awalnya:

country → "USA"

Kemudian:

country → "UK"

Nilainya berubah.

Ini disebut mutation.

9. const: Variable yang Tidak Bisa Di-reassign

Selain let, JavaScript modern juga memiliki:

const

Contoh:

const pi = 3.14;

Artinya kita membuat sebuah variable constant bernama pi.

Setelah itu kita tidak boleh memberikan nilai baru ke pi.

Misalnya:

const pi = 3.14;

pi = 4;

JavaScript akan menghasilkan error seperti:

Assignment to a constant variable

Artinya kira-kira:

Kamu mencoba memberikan nilai baru kepada variable yang dibuat dengan const.

10. Perbedaan let dan const

Ini salah satu hal wajib hafal.

Contoh let:

let age = 20;

age = 21;

✅ Boleh.

Contoh const:

const pi = 3.14;

pi = 4;

❌ Tidak boleh.

11. const Harus Langsung Diberi Nilai

Dengan let, ini boleh:

let username;

username = "John";

Tetapi dengan const:

const username;

username = "John";

❌ Tidak boleh.

Kalau menggunakan const, harus:

const username = "John";

Jadi:

let x;
x = 10;

✅

Sedangkan:

const x;
x = 10;

❌

12. Cara Memilih let atau const

Gunakan aturan sederhana ini:

Kalau nilainya tidak perlu di-reassign → gunakan const.

Contoh:

const pi = 3.14;
const countryCode = "ID";
const appName = "My App";

Kalau nilainya memang akan berubah:

let score = 0;

score = 10;
score = 20;

gunakan let.

Cara berpikir mudah:

Apakah nilai variable akan diganti?

        ↓

      YA
       ↓
      let

      TIDAK
       ↓
     const

Dalam JavaScript modern, praktik yang umum adalah lebih memilih const secara default, kemudian menggunakan let jika memang perlu melakukan reassign.

13. Bagaimana dengan var?

Sebelum JavaScript ES6, variable biasanya dibuat menggunakan:

var

Contoh:

var username = "John";

Sekarang var masih tersedia.

Tetapi dalam JavaScript modern, kita biasanya lebih sering menggunakan:

let
const

daripada:

var

Lecture juga menyebut bahwa nanti akan ada pembahasan khusus mengenai perbedaan:

var
let
const

Jadi untuk sekarang cukup ingat:

JavaScript modern → utamakan const dan let.

Jangan terlalu khawatir dengan var dulu.

14. ES6 Itu Apa?

Lecture menyebut bahwa let dan const diperkenalkan pada ES6.

ES6 adalah salah satu versi besar dari JavaScript, yang juga dikenal sebagai ECMAScript 2015.

Sebelum ES6, JavaScript menggunakan var untuk membuat variable.

Secara sederhana:

JavaScript lama
      ↓
     var

JavaScript modern
      ↓
   let / const

Nanti ketika masuk pembahasan JavaScript versions, konsep ini akan dijelaskan lebih dalam.

15. Membuat Banyak Variable

Kita bisa membuat beberapa variable:

let name = "Mary";
let age = 28;
let gender = "male";

Ini adalah gaya yang sangat mudah dibaca.

16. Bisa Juga Banyak Variable dalam Satu Statement

JavaScript juga memungkinkan:

let name = "Mary", age = 28, gender = "male";

Ini valid.

Tetapi untuk pemula dan terutama code yang lebih panjang, biasanya lebih mudah dibaca jika:

let name = "Mary";
let age = 28;
let gender = "male";

Karena masing-masing variable memiliki baris sendiri.

17. Alternatif: Satu let, Beberapa Baris

Bisa juga:

let name = "Mary",
    age = 28,
    gender = "male";

Ini juga valid.

Namun secara readability, saya lebih menyarankan:

let name = "Mary";
let age = 28;
let gender = "male";

Terutama saat masih belajar.

18. Nilai Variable Bisa Berasal dari Variable Lain

Ini konsep yang penting.

Misalnya:

let country = "USA";
let code = "UK";

Kita bisa memberikan isi code ke country:

country = code;

Sekarang:

country → "UK"
code    → "UK"

Yang terjadi bukan:

country → "code"

Tetapi:

country → isi dari code

Karena code berisi "UK".

19. Visualisasi Variable

Misalnya:

let country = "USA";
let code = "UK";

country = code;

Bayangkan seperti ini:

Awalnya

country
┌─────────┐
│  "USA"  │
└─────────┘

code
┌─────────┐
│  "UK"   │
└─────────┘

Setelah:

country = code;

menjadi:

country
┌─────────┐
│  "UK"   │
└─────────┘

code
┌─────────┐
│  "UK"   │
└─────────┘

Jadi JavaScript mengambil nilai yang disimpan oleh code, lalu memberikannya kepada country.

20. Comment dengan //

Lecture juga menunjukkan:

// console.log(username);

// digunakan untuk membuat comment satu baris.

Comment tidak dieksekusi oleh JavaScript.

Contoh:

let username = "John";

// console.log(username);

console.log("Hello");

JavaScript hanya menjalankan:

let username = "John";
console.log("Hello");

Sedangkan:

// console.log(username);

diabaikan.

Kenapa comment berguna?

Untuk:

• memberikan catatan
• menjelaskan code
• menonaktifkan sementara code
• debugging

Misalnya:

// Menyimpan nama user
let username = "John";

21. Aturan Penamaan Variable

Sekarang kita masuk bagian yang sangat penting.

Ketika membuat:

let username = "John";

username disebut sebagai variable name atau nama variable.

JavaScript memiliki aturan untuk nama variable.

22. Variable Name Boleh Mengandung Huruf

Contoh:

let name = "John";
let username = "John";
let firstName = "John";

✅ Valid.

23. Variable Name Boleh Mengandung Angka

Angka boleh digunakan:

let user1 = "John";
let user2 = "Mark";
let age20 = 20;

✅ Valid.

Tetapi ada aturan penting:

Variable name tidak boleh dimulai dengan angka.

24. Tidak Boleh Dimulai dengan Angka

Ini salah:

let 1name = "John";

❌ Tidak valid.

Karena dimulai dengan:

1

Yang benar:

let name1 = "John";

✅

Angka boleh berada di belakang atau bagian tengah.

Contoh:

let user123;
let user1Name;
let name2026;

✅

25. Bisa Menggunakan _

Underscore diperbolehkan.

Contoh:

let _name = "John";
let user_name = "John";

✅

Bahkan boleh diawali underscore:

let _username = "John";

✅

26. Bisa Menggunakan $

Dollar sign juga diperbolehkan.

Contoh:

let $name = "John";
let user$name = "John";

Secara sintaks, ini valid.

Bahkan:

let $ = 10;

juga secara sintaks memungkinkan.

Namun dalam praktik, $ biasanya digunakan dengan pola tertentu atau library/framework tertentu, jadi sebagai pemula lebih baik menggunakan nama yang jelas.

27. Tidak Boleh Menggunakan Special Character Sembarangan

Misalnya:

let user-name = "John";

❌ Tidak valid.

Begitu juga:

let user%name = "John";

❌

let user@name = "John";

❌

let user#name = "John";

❌

Secara sederhana, untuk nama variable kamu bisa berpegang pada:

A-Z
a-z
0-9
_
$

dengan syarat tidak dimulai angka.

28. Variable Name Bersifat Case Sensitive

Ini juga sangat penting.

JavaScript membedakan huruf besar dan kecil.

Misalnya:

let name = "John";
let Name = "Mark";

Ini adalah dua variable berbeda.

name → "John"

Name → "Mark"

JavaScript menganggap:

name

dan:

Name

berbeda.

Begitu juga:

username
UserName
USERNAME
Username

semuanya bisa dianggap sebagai nama yang berbeda.

29. Kenapa Case Sensitivity Penting?

Misalnya:

let username = "John";

console.log(Username);

❌ Error.

Kenapa?

Karena kita membuat:

username

tetapi mencoba menggunakan:

Username

Huruf u dan U berbeda.

Jadi JavaScript mengatakan:

Saya tidak menemukan variable bernama Username.

Tips

Konsistenlah dalam penamaan.

Misalnya gunakan:

let firstName = "John";
let lastName = "Doe";

30. Tidak Boleh Menggunakan Reserved Keywords

JavaScript memiliki kata-kata khusus yang sudah digunakan oleh bahasa itu sendiri.

Contohnya:

let
const
if
else
while
for
function
return
class

Kata-kata tersebut disebut reserved keywords atau keyword yang memiliki fungsi khusus.

Kita tidak boleh menggunakannya sebagai nama variable.

Contoh:

let const = 10;

❌

Karena const sudah memiliki fungsi khusus dalam JavaScript.

Begitu juga:

let while = 10;

❌

Karena while merupakan keyword JavaScript.

31. Kenapa Keyword Tidak Boleh Dipakai?

Bayangkan kamu membuat bahasa sendiri.

Kamu menetapkan:

"IF" = perintah untuk membuat kondisi
"WHILE" = perintah untuk looping
"FUNCTION" = perintah untuk function

Kemudian seseorang mencoba:

buat kotak bernama "IF"

Bahasa tersebut akan bingung:

"IF" ini perintah atau nama variable?

Karena itu JavaScript memiliki kata-kata khusus yang tidak boleh digunakan sembarangan.

32. Cheat Sheet Aturan Variable Name

33. Ada Satu Hal yang Perlu Diluruskan

Lecture mengatakan bahwa variable name hanya bisa mengandung:

letters, digits, underscores, dan dollar.

Untuk level dasar, aturan itu bagus untuk diingat.

Tetapi secara teknis JavaScript modern memiliki aturan identifier yang lebih luas, termasuk banyak karakter Unicode tertentu.

Namun untuk sekarang tidak perlu memikirkan itu.

Gunakan pola aman:

let firstName;
let userName;
let user_age;
let $price;

Ini sudah cukup untuk hampir semua latihan dasar.

34. Naming Convention yang Sebaiknya Digunakan

Walaupun beberapa nama secara teknis valid:

let x = "John";
let a = 20;

lebih baik menggunakan nama yang menjelaskan isinya:

let username = "John";
let age = 20;

Daripada:

let x = "John";
let y = 20;

karena saat membaca code beberapa hari kemudian:

username

langsung jelas:

Oh, ini menyimpan username.

Sedangkan:

x

kita harus mengingat lagi x itu apa.

35. Gunakan Nama yang Deskriptif

Contoh kurang jelas:

let x = "Indonesia";

Lebih jelas:

let country = "Indonesia";

Contoh:

let x = 25;

lebih baik:

let age = 25;

Contoh:

let n = "John";

lebih baik:

let firstName = "John";

36. Gunakan camelCase

Dalam JavaScript, gaya penamaan yang sangat umum adalah camelCase.

Misalnya:

let firstName = "John";
let lastName = "Doe";
let userAge = 25;
let phoneNumber = "123456";

Perhatikan:

firstName
    ↑
kata kedua dimulai huruf besar

Bukan:

let first_name = "John";

Walaupun snake_case valid, JavaScript biasanya banyak menggunakan camelCase.

37. Jangan Bingung: const Bukan Berarti “Isi Data Selamanya” dalam Semua Kasus

Ada sedikit konsep lanjutan yang perlu diketahui supaya tidak salah paham.

const berarti variable binding tidak boleh di-reassign.

Untuk tipe data sederhana seperti:

const age = 20;

kita memang tidak bisa:

age = 30;

Tetapi nanti ketika belajar object dan array, ada nuansa:

const user = {
    name: "John"
};

Kita masih bisa mengubah property:

user.name = "Mark";

Ini tidak sama dengan:

user = {};

Yang terakhir akan error.

Tapi jangan khawatir dulu. Konsep object dan reference akan dibahas nanti.

Untuk lecture sekarang, cukup pahami:

const tidak boleh di-reassign.

38. Bagaimana JavaScript Menjalankan Code?

Misalnya:

let name = "John";

console.log(name);

name = "Mark";

console.log(name);

JavaScript membaca dari atas ke bawah.

Langkah 1

let name = "John";

Variable dibuat:

name → John

Langkah 2

console.log(name);

Output:

John

Langkah 3

name = "Mark";

Nilai berubah:

name → Mark

Langkah 4

console.log(name);

Output:

Mark

Jadi hasil akhirnya:

John
Mark

39. Contoh Program Sederhana

Misalnya kita ingin menyimpan informasi user:

const firstName = "John";
const lastName = "Doe";
let age = 25;

console.log(firstName);
console.log(lastName);
console.log(age);

Output:

John
Doe
25

Kemudian umur bertambah:

age = 26;

Ini boleh karena:

let age

Kemudian:

console.log(age);

Output:

26

Sedangkan:

firstName = "Mark";

akan menghasilkan error karena:

const firstName

40. Analogi Sederhana: Label pada Kotak

Bayangkan variable seperti kotak yang punya label.

let

        let
         ↓
┌───────────────────┐
│ username          │
│                   │
│      "John"       │
└───────────────────┘

Kemudian isinya boleh diganti:

        ↓
┌───────────────────┐
│ username          │
│                   │
│      "Mark"       │
└───────────────────┘

const

       const
         ↓
┌───────────────────┐
│ pi                │
│                   │
│      3.14         │
└───────────────────┘

Kemudian kita mencoba:

pi = 4;

JavaScript berkata:

❌ Tidak boleh!

Karena variable tersebut dibuat dengan const.

41. Kesalahan yang Sering Dilakukan Pemula

Kesalahan 1 — Menggunakan const lalu mengubah nilainya

const age = 20;

age = 21;

❌ Error.

Gunakan:

let age = 20;
age = 21;

Kesalahan 2 — const tanpa nilai

const name;

❌ Error.

Harus:

const name = "John";

Kesalahan 3 — Variable dimulai angka

let 1name = "John";

❌

Gunakan:

let name1 = "John";

Kesalahan 4 — Menggunakan special character

let user-name = "John";

❌

Gunakan:

let userName = "John";

Kesalahan 5 — Salah kapitalisasi

let username = "John";

console.log(Username);

❌

Harus:

console.log(username);

Kesalahan 6 — Menggunakan reserved keyword

let const = 10;

❌

Karena const adalah keyword JavaScript.

42. Hubungan dengan Developer Console dari Lecture Sebelumnya

Di lecture sebelumnya kita belajar:

console.log()

Sekarang kita mulai menggabungkan konsep tersebut dengan variable.

Misalnya:

let username = "John";

console.log(username);

Alurnya:

let username = "John"
          ↓
Variable dibuat
          ↓
John disimpan
          ↓
console.log(username)
          ↓
Browser membaca isi username
          ↓
Console menampilkan John

Jadi console.log() akan sangat sering digunakan selama belajar JavaScript.

43. Contoh Latihan untuk Kamu

Coba buat:

1. Variable nama

let name = "Andi";

2. Variable umur

let age = 20;

3. Tampilkan keduanya

console.log(name);
console.log(age);

Kemudian ubah:

age = 21;

dan:

console.log(age);

Hasilnya:

21

44. Latihan const

Coba:

const country = "Indonesia";

console.log(country);

Ini berhasil.

Kemudian coba:

country = "Japan";

Kamu akan mendapatkan error.

Tujuannya supaya kamu bisa melihat sendiri perbedaan let dan const.

45. Ringkasan Besar Lecture Ini

Kalau semua penjelasan di atas diringkas, sebenarnya lecture ini ingin kamu memahami beberapa hal utama:

① Variable adalah tempat bernama untuk menyimpan nilai

let username = "John";

② let bisa di-reassign

let age = 20;

age = 21;

✅

③ const tidak bisa di-reassign

const pi = 3.14;

pi = 4;

❌

④ const harus langsung diberi nilai

const name = "John";

✅

⑤ var adalah cara lama

var name = "John";

Masih ada, tetapi JavaScript modern umumnya menggunakan:

let
const

⑥ Variable name tidak boleh dimulai angka

let 1name;

❌

let name1;

✅

⑦ Variable name case-sensitive

name
Name
NAME

adalah nama yang berbeda.

⑧ Jangan gunakan reserved keyword

let const;

❌

let while;

❌

⑨ Gunakan nama variable yang jelas

Lebih baik:

let firstName = "John";

daripada:

let x = "John";

46. Cheat Sheet

// LET
let username = "John";

username = "Mark"; // ✅ boleh

// CONST
const pi = 3.14;

pi = 4; // ❌ error

// CONST harus langsung diinisialisasi
const name = "John"; // ✅

// ANGKA tidak boleh di awal
let user1 = "John"; // ✅
let 1user = "John"; // ❌

// UNDERSCORE boleh
let _name = "John"; // ✅

// DOLLAR boleh
let $name = "John"; // ✅

// CASE SENSITIVE
let name = "John";
let Name = "Mark";

// name dan Name adalah variable berbeda

// RESERVED KEYWORD tidak boleh
let const = 10; // ❌
let while = 10; // ❌

47. Pola Berpikir yang Paling Penting

Jangan hanya menghafal:

“let bisa berubah, const tidak.”

Pahami alasannya.

Ketika kamu ingin membuat variable, tanyakan:

Saya mau menyimpan sesuatu.
          ↓
Apakah nilainya akan saya ganti nanti?
          ↓
      ┌───┴───┐
      ↓       ↓
     YA     TIDAK
      ↓       ↓
     let    const

Contoh:

let score = 0;
score = 10;
score = 20;

Karena score memang berubah.

Sedangkan:

const birthYear = 2000;
const pi = 3.14;

kita tidak perlu melakukan reassign terhadap variable tersebut.

Jadi kebiasaan yang bagus dalam JavaScript modern: gunakan const jika tidak perlu reassign, dan gunakan let jika memang perlu mengubah nilainya.

🎯 Inti yang wajib kamu bawa ke lecture berikutnya

Kalau hanya boleh mengingat 5 hal, ingat ini:

1. Variable = tempat bernama untuk menyimpan nilai.
2. let = nilainya boleh di-reassign.
3. const = tidak boleh di-reassign dan harus langsung diberi nilai.
4. Nama variable harus mengikuti aturan JavaScript dan bersifat case-sensitive.
5. Biasakan menggunakan nama yang jelas + const sebagai default, lalu let ketika nilainya memang akan berubah.

Contoh yang sudah mencerminkan semuanya:

const firstName = "John";
const country = "Indonesia";

let age = 20;

console.log(firstName);
console.log(country);
console.log(age);

age = 21;

console.log(age);

Alurnya sangat sederhana:

firstName → "John"
country   → "Indonesia"
age       → 20
              ↓
           diubah
              ↓
age       → 21

Setelah konsep variable ini benar-benar dipahami, materi berikutnya tentang data types akan menjadi jauh lebih masuk akal, karena kita akan mulai membahas jenis nilai apa yang sebenarnya bisa disimpan di dalam variable.