Lecture ini membahas var, yaitu cara lama membuat variable di JavaScript sebelum ES6/ES2015 memperkenalkan let dan const.

Ini penting karena meskipun sekarang kita biasanya memakai let dan const, kamu masih akan sering menemukan var ketika membaca kode JavaScript lama.

Lecture ini fokus pada 3 perbedaan utama var dengan let/const:

1. Scope
2. Re-declaration / reassignment
3. Hoisting

Kita bahas satu per satu dengan contoh sederhana.

1. Apa itu var?

Sebelum ES6/ES2015, JavaScript belum memiliki:

let
const

Cara utama membuat variable adalah:

var

Contoh:

var x = 100;

console.log(x);

Output:

100

Sama seperti let, kita juga bisa membuat variable terlebih dahulu kemudian memberikan nilainya:

var x;

x = 100;

console.log(x);

Ini juga valid.

2. var bisa menyimpan berbagai jenis data

Sama seperti let, variable dengan var bisa menyimpan berbagai tipe data.

Misalnya:

var name = "John";
var age = 20;
var isStudent = true;
var user = null;

Dan karena JavaScript bersifat dynamically typed, kita juga bisa mengganti tipe nilainya:

var x = 100;

x = "Hello";

console.log(x);

Output:

Hello

Jadi dalam hal ini var mirip dengan let.

3. var vs const

Pertama kita lihat const.

const x = 100;

Kemudian:

x = 200;

❌ Error.

Karena const tidak boleh di-reassign.

Sedangkan:

var x = 100;

x = 200;

✅ Boleh.

Jadi:

var
 ↓
nilai boleh diganti

let
 ↓
nilai boleh diganti

const
 ↓
binding tidak boleh di-reassign

Contoh:

var x = 100;
x = 200;

let y = 100;
y = 200;

const z = 100;
z = 200; // ❌ Error

Jadi dalam hal reassignment, var mirip dengan let.

4. Tapi var berbeda jauh dari let dalam hal scope

Ini adalah perbedaan yang sangat penting.

Lecture mengatakan:

var memiliki function scope.

Sedangkan:

let dan const memiliki block scope.

Untuk memahami ini, kita harus ingat dulu apa itu scope.

5. Ingat kembali konsep scope

Scope adalah:

wilayah di mana sebuah variable bisa diakses.

Misalnya:

function greetings() {
    var name = "John";

    console.log(name);
}

name dibuat di dalam function.

Jadi:

function greetings()
┌─────────────────────────┐
│                         │
│  var name = "John";     │
│                         │
│  console.log(name);     │
│                         │
└─────────────────────────┘

name bisa digunakan di dalam function tersebut.

6. Apa itu block?

Block adalah bagian kode yang dibungkus dengan:

{
    ...
}

Contoh:

if (true) {
    // ini adalah block
}

Loop juga mempunyai block:

for (let i = 0; i < 10; i++) {
    // ini juga block
}

Function juga memiliki {}, tetapi dalam pembahasan scope kita perlu membedakan function scope dan block scope.

7. let memiliki block scope

Contoh:

if (true) {
    let x = 100;

    console.log(x);
}

Ini boleh.

Output:

100

Tetapi:

if (true) {
    let x = 100;
}

console.log(x);

❌ Error.

Kenapa?

Karena x hanya hidup di dalam block if.

Gambarnya:

GLOBAL
│
│
├── if block
│   │
│   └── let x
│
└── console.log(x) ❌

x tidak bisa keluar dari block.

8. var berbeda

Sekarang:

if (true) {
    var x = 100;
}

console.log(x);

Output:

100

😮

Kenapa?

Karena var tidak memiliki block scope seperti let.

var memiliki function scope.

Kalau kode tersebut tidak berada di dalam function, var tidak terkurung oleh block if.

9. Contoh yang sama supaya lebih jelas

Dengan let

if (true) {
    let x = 100;
}

console.log(x);

Hasil:

ReferenceError

Karena:

x hanya ada di dalam block

Dengan var

if (true) {
    var x = 100;
}

console.log(x);

Hasil:

100

Karena:

var mengikuti function scope,
bukan block scope.

10. Contoh dari lecture

Misalnya:

function greetings() {
    var x = 10;

    if (x < 100) {
        var y = 100;
        let z = 200;
    }

    console.log(y);
    console.log(z);
}

Apa yang terjadi?

y dibuat menggunakan:

var y = 100;

Sedangkan z:

let z = 200;

Karena y menggunakan var, y bisa diakses dari bagian lain di function yang sama.

Jadi:

console.log(y);

✅ Bisa.

Tetapi:

console.log(z);

❌ Tidak bisa.

Karena z menggunakan let dan hanya berlaku di block if.

11. Visualisasi scope-nya

function greetings()
│
├── var x
│
└── if block
    │
    ├── var y
    │
    └── let z

Untuk var y:

function greetings
┌─────────────────────────────┐
│ var y = 100;                 │
│                             │
│ if (...) {                   │
│     var y = 100;             │
│ }                           │
│                             │
│ console.log(y); ✅           │
└─────────────────────────────┘

Karena var mengikuti function scope.

Sedangkan let z:

function greetings
┌─────────────────────────────┐
│                             │
│ if (...) {                   │
│     let z = 200;             │
│ }                           │
│                             │
│ console.log(z); ❌           │
└─────────────────────────────┘

Karena z hanya berada di block if.

12. Analogi scope yang mudah

Bayangkan sebuah rumah.

Rumah
│
├── ruang tamu
├── kamar
└── dapur

let/const seperti barang yang hanya boleh digunakan di ruangan tertentu.

Misalnya:

let laptop

diletakkan di kamar.

Maka:

“Laptop ini hanya tersedia di kamar.”

Sedangkan var dalam function scope lebih seperti barang yang tersedia sepanjang rumah tersebut.

Jadi:

function = rumah
block = ruangan

var:

“Selama masih di rumah/function yang sama, saya bisa diakses.”

let/const:

“Saya hanya bisa digunakan di ruangan/block tempat saya dibuat.”

13. Perbedaan kedua: re-declaration

Sekarang kita masuk ke perbedaan kedua.

Re-declaration berarti:

membuat/deklarasi ulang variable dengan nama yang sama dalam scope yang sama.

Dengan var, ini diperbolehkan.

Contoh:

var x = 100;

var x = "Hello";

console.log(x);

Tidak error.

Output:

Hello

14. Apa yang terjadi?

Pertama:

var x = 100;

Kemudian:

var x = "Hello";

Variable x sekarang memiliki nilai terbaru:

x → "Hello"

Jadi:

console.log(x);

menghasilkan:

Hello

15. let tidak boleh di-redeclare

Sekarang:

let x = 100;

let x = "Hello";

❌ Error.

Biasanya error-nya seperti:

Identifier 'x' has already been declared

Artinya:

“Variable bernama x sudah pernah dideklarasikan.”

16. Jangan tertukar antara re-declaration dan reassignment

Ini penting sekali.

Reassignment

Variable sudah dibuat, lalu nilainya diganti.

let x = 100;

x = 200;

✅ Boleh.

Re-declaration

Variable dibuat lagi dengan keyword deklarasi:

let x = 100;

let x = 200;

❌ Tidak boleh dalam scope yang sama.

Jadi:

let x = 100;
x = 200;

= reassignment ✅

Sedangkan:

let x = 100;
let x = 200;

= re-declaration ❌

17. Bagaimana dengan const?

const juga tidak boleh di-redeclare dalam scope yang sama.

const x = 100;

const x = 200;

❌ Error.

Dan tentu:

const x = 100;

x = 200;

❌ juga error karena const tidak boleh di-reassign.

18. Bahkan var dan let tidak bisa dicampur sembarangan

Lecture memberikan contoh:

var x = 100;

let x = 200;

❌ Error.

Begitu juga:

let x = 100;

var x = 200;

❌ Error.

Kenapa?

Karena dalam scope yang sama, identifier x sudah digunakan.

Jadi meskipun var sendiri memperbolehkan redeclaration:

var x = 100;
var x = 200;

itu bukan berarti var boleh bertabrakan dengan let atau const.

19. Ringkasan bagian re-declaration

20. Kenapa var memperbolehkan hal seperti ini?

Ini salah satu alasan mengapa var sering dianggap memiliki perilaku yang lebih berisiko.

Bayangkan programmer menulis:

var username = "John";

Beberapa ratus baris kemudian:

var username = "Mark";

JavaScript lama bisa menerima ini.

Akibatnya variable yang sebelumnya berisi "John" sekarang berubah menjadi "Mark".

Dalam project besar, hal seperti ini bisa membuat kode lebih sulit diprediksi.

let dan const memberikan aturan yang lebih ketat sehingga kesalahan seperti ini lebih mudah terdeteksi.

21. Perbedaan ketiga: hoisting

Nah, ini bagian yang paling membingungkan untuk pemula.

Lecture juga mengatakan bahwa hoisting akan dibahas lebih detail nanti, jadi untuk sekarang cukup pahami konsep dasarnya.

Hoisting secara sederhana adalah perilaku JavaScript di mana deklarasi tertentu diproses sebelum kode dieksekusi sesuai aturan bahasa.

Untuk var, deklarasinya dapat diakses sebelum baris deklarasinya muncul, tetapi nilainya pada saat itu adalah:

undefined

Contoh:

console.log(x);

var x = 100;

Hasil:

undefined

Bukan:

100

dan bukan error ReferenceError.

22. Kenapa hasilnya undefined?

Secara sederhana, JavaScript memperlakukan deklarasi var seolah-olah sudah tersedia lebih awal, tetapi assignment-nya belum terjadi.

Kode:

console.log(x);

var x = 100;

bisa dibayangkan secara sederhana seperti:

var x;

console.log(x);

x = 100;

Maka ketika:

console.log(x);

dijalankan, x sudah ada tetapi belum mendapatkan nilai:

x = undefined

Setelah itu:

x = 100;

baru nilainya menjadi 100.

Catatan: ini adalah model mental sederhana untuk memahami hoisting, bukan transformasi literal yang dilakukan engine.

23. Bandingkan dengan let

Sekarang:

console.log(x);

let x = 100;

❌ Error.

Biasanya:

ReferenceError:
Cannot access 'x' before initialization

Dengan const juga:

console.log(x);

const x = 100;

❌ Error.

24. Jadi bagaimana perbandingannya?

var
 ↓
bisa diakses sebelum deklarasi
 ↓
hasilnya undefined

Sedangkan:

let / const
 ↓
tidak boleh diakses sebelum deklarasi/inisialisasi
 ↓
ReferenceError

Contoh:

var

console.log(x);

var x = 100;

Output:

undefined

let

console.log(x);

let x = 100;

Output:

ReferenceError

const

console.log(x);

const x = 100;

Output:

ReferenceError

25. Tapi jangan simpulkan “let dan const tidak di-hoist”

Ini sedikit nuansa penting.

Untuk level lecture ini, kamu boleh mengingat:

“var bisa diakses sebelum deklarasi, sedangkan let/const tidak.”

Tetapi secara teknis, mengatakan “let dan const tidak di-hoist sama sekali” kurang tepat.

let dan const juga mengalami proses deklarasi pada fase awal eksekusi, tetapi identifier tersebut berada dalam Temporal Dead Zone (TDZ) sampai mencapai deklarasinya.

Akibatnya:

console.log(x);
let x = 100;

menghasilkan:

ReferenceError

Untuk sekarang cukup ingat:

var      → sebelum deklarasi: undefined
let      → sebelum deklarasi: ReferenceError
const    → sebelum deklarasi: ReferenceError

Nanti ketika lecture membahas hoisting dan TDZ, konsep ini akan lebih jelas.

26. Tiga perbedaan utama

Sekarang kita satukan semuanya.

Ini adalah tabel yang sangat bagus untuk kamu simpan.

27. Contoh lengkap

Mari lihat ketiga keyword sekaligus:

function test() {

    var a = 10;
    let b = 20;
    const c = 30;

    if (true) {
        var x = 100;
        let y = 200;
        const z = 300;
    }

    console.log(x); // 100
    console.log(y); // ReferenceError
    console.log(z); // ReferenceError
}

Kenapa?

Karena:

var x
 ↓
function scope
 ↓
bisa keluar dari if

Sedangkan:

let y
const z
 ↓
block scope
 ↓
tidak bisa keluar dari if

28. var bukan berarti “tidak punya scope”

Ini kesalahpahaman yang sering muncul.

❌ Jangan berpikir:

“var tidak punya scope.”

Yang benar:

var memiliki function scope.

Contoh:

function test() {
    var x = 100;
}

console.log(x);

❌ Error.

Kenapa?

Karena x berada di function test.

Jadi var tetap memiliki batas scope.

29. var di dalam if vs di dalam function

Perhatikan dua contoh berikut.

var di dalam if

if (true) {
    var x = 100;
}

console.log(x);

✅ Bisa.

Karena if hanya merupakan block, bukan function.

var di dalam function

function test() {
    var x = 100;
}

console.log(x);

❌ Tidak bisa.

Karena function menciptakan function scope.

Visual:

GLOBAL
│
├── if block
│   └── var x
│
└── x masih bisa diakses

Sedangkan:

GLOBAL
│
└── function test()
    │
    └── var x
          ↑
       hanya di sini

30. Kenapa let dan const lebih aman?

Bayangkan kode:

if (userIsLoggedIn) {
    let message = "Welcome";
}

message hanya diperlukan di dalam if.

Dengan let, scope-nya otomatis dibatasi:

if block
┌──────────────────┐
│ let message      │
│                  │
└──────────────────┘

Kode di luar tidak bisa mengaksesnya.

Ini membantu mencegah variable “bocor” ke bagian kode yang tidak membutuhkannya.

Karena itu JavaScript modern lebih sering menggunakan:

const

dan:

let

daripada:

var

31. Lalu kapan kita menggunakan var?

Dalam JavaScript modern, biasanya:

Gunakan const sebagai default.

Kalau nilainya memang perlu diganti:

let

Sedangkan:

var

biasanya digunakan ketika:

• membaca codebase JavaScript lama
• memahami tutorial/kode legacy
• mempertahankan kode lama yang memang menggunakan var

Untuk code baru, umumnya tidak ada alasan kuat bagi pemula untuk memilih var daripada let/const.

32. Hubungkan dengan lecture sebelumnya

Sebelumnya kita belajar:

let username = "John";

dan:

const age = 20;

Sekarang kita tahu kenapa let dan const diperkenalkan di ES6.

Sebelum ES6:

var username = "John";

adalah cara utama membuat variable.

Setelah ES6:

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

memberikan cara yang lebih aman dan lebih jelas.

Terutama karena:

var
├── function scope
├── boleh redeclare
└── hoisting → undefined

let
├── block scope
├── tidak boleh redeclare
└── sebelum deklarasi → ReferenceError

const
├── block scope
├── tidak boleh redeclare
├── tidak boleh reassign
└── sebelum deklarasi → ReferenceError

33. Cara mengingatnya dengan analogi

Bayangkan ada tiga orang:

var = orang lama 😄

Dia cukup bebas:

"Taruh aku di function,
aku bisa keliling block di dalamnya."

"Namaku sudah dipakai?
Tidak masalah, declare lagi."

"Belum sampai deklarasi?
Aku ada kok, nilainya undefined."

let = lebih disiplin

"Aku hanya tinggal di block-ku."

"Jangan declare aku dua kali."

"Nilai boleh diganti."

const = paling ketat

"Aku tinggal di block-ku."

"Jangan declare aku dua kali."

"Dan binding-ku jangan di-reassign."

34. Cheat sheet super penting

                 var          let          const
------------------------------------------------------
Scope            function     block        block

Reassign         ✅            ✅            ❌

Redeclare        ✅            ❌            ❌

Sebelum
deklarasi        undefined    ReferenceError ReferenceError

Dan pola penggunaannya:

const name = "John";

Gunakan const jika tidak perlu mengganti binding.

let score = 0;
score = 10;

Gunakan let jika perlu mengganti nilai.

var name = "John";

Biasanya kamu akan menemukannya ketika membaca kode JavaScript lama/legacy.

🎯 Inti lecture ini

Kalau seluruh lecture ini diringkas menjadi satu konsep:

var adalah cara lama membuat variable di JavaScript. var mirip let karena nilainya bisa diubah, tetapi berbeda karena var memiliki function scope, boleh di-redeclare, dan deklarasinya memiliki perilaku hoisting yang membuat akses sebelum deklarasi menghasilkan undefined.

Sedangkan JavaScript modern lebih mengutamakan:

const → default
   ↓
kalau perlu reassign
   ↓
let

dan biasanya hindari var untuk kode baru.

Jadi untuk sekarang, cukup kuasai tiga kata kunci ini:

SCOPE
REDECLARATION
HOISTING

Karena itulah tiga pembeda utama var vs let/const yang ingin diajarkan oleh lecture ini.