Di lecture ini kita mulai masuk ke topik loop, dan fokusnya adalah while loop.

Kalau disederhanakan, inti lecture ini adalah:

Loop = cara untuk menyuruh JavaScript mengulang kode berkali-kali tanpa kita menulis kode yang sama berulang-ulang.

1. Apa itu Loop?

Bayangkan kita ingin menampilkan:

Value of I is 1
Value of I is 2
Value of I is 3
Value of I is 4
...
Value of I is 10

Tanpa loop, kita harus menulis:

let i = 1;

console.log("Value of I is " + i);
i++;

console.log("Value of I is " + i);
i++;

console.log("Value of I is " + i);
i++;

console.log("Value of I is " + i);
i++;

Dan seterusnya sampai 10.

Jelas boros dan tidak praktis.

Dengan loop, kita bisa mengatakan kepada JavaScript:

“Selama kondisi ini masih benar, jalankan kode ini lagi.”

Misalnya:

let i = 1;

while (i <= 10) {
    console.log("Value of I is " + i);
    i++;
}

Hanya beberapa baris, tetapi bisa menjalankan kode 10 kali.

2. Jenis Loop di JavaScript

Di lecture disebutkan ada 3 jenis loop utama yang akan dipelajari:

1. while loop
2. do...while loop
3. for loop

Ketiganya memiliki tujuan dasar yang sama:

Mengulang sebuah blok kode.

Yang berbeda terutama adalah syntax dan kapan kondisi diperiksa.

Untuk sekarang kita fokus:

while

3. Struktur Dasar while

Bentuk dasarnya:

while (condition) {
    // kode yang ingin diulang
}

Contoh:

let i = 1;

while (i <= 10) {
    console.log(i);
    i++;
}

Mari kita bedah.

while

while

adalah keyword yang memberitahu JavaScript:

“Saya ingin melakukan pengulangan.”

(i <= 10)

Ini adalah condition atau kondisi.

JavaScript akan bertanya:

“Apakah i <= 10 bernilai true?”

Kalau true:

jalankan kode

Kalau false:

berhenti

{ ... }

Ini adalah body dari loop.

Kode di dalam {} akan dijalankan berulang kali selama kondisi masih true.

4. Cara Kerja while Step-by-Step

Perhatikan:

let i = 1;

while (i <= 10) {
    console.log("Value of I is " + i);
    i++;
}

Awalnya:

i = 1

JavaScript mengecek:

i <= 10

atau:

1 <= 10

Hasil:

true

Maka body dijalankan:

console.log("Value of I is " + i);

Output:

Value of I is 1

Kemudian:

i++;

Jadi:

i = 2

Lalu JavaScript kembali ke kondisi:

2 <= 10

true.

Jalankan lagi.

Kemudian:

i = 3

Cek lagi:

3 <= 10

true.

Begitu terus sampai:

i = 10

Kondisi:

10 <= 10

Masih true.

Maka:

Value of I is 10

Kemudian:

i++;

menjadi:

i = 11

JavaScript mengecek:

11 <= 10

Hasilnya:

false

Maka loop berhenti.

5. Gambaran Alur while

Secara visual:

        i = 1
          ↓
    ┌─────────────┐
    │ i <= 10 ?   │
    └──────┬──────┘
           │
       true│
           ↓
    ┌─────────────┐
    │ jalankan    │
    │ kode        │
    └──────┬──────┘
           ↓
        i++
           │
           ↓
    kembali ke kondisi
           │
           ↓
       i <= 10 ?
           │
         ...
           │
      false
           ↓
        SELESAI

Jadi pola paling pentingnya:

CEK KONDISI
    ↓
 true?
    ↓
JALANKAN KODE
    ↓
UBAH NILAI
    ↓
CEK LAGI

6. Kenapa i++ Sangat Penting?

Ini bagian yang sangat penting untuk dipahami.

Misalnya kita menulis:

let i = 1;

while (i <= 10) {
    console.log("Value of I is " + i);
}

Apa yang terjadi?

Awalnya:

i = 1

Cek:

1 <= 10

true.

Maka:

Value of I is 1

Kemudian kembali mengecek:

1 <= 10

Masih true.

Print lagi:

Value of I is 1

Cek lagi:

1 <= 10

Masih true.

Print lagi.

Dan seterusnya…

Value of I is 1
Value of I is 1
Value of I is 1
Value of I is 1
Value of I is 1
...

Tidak pernah berhenti.

Kenapa?

Karena nilai i tidak pernah berubah.

7. Infinite Loop

Loop yang tidak pernah berhenti disebut:

Infinite loop

Contohnya:

let i = 1;

while (i <= 10) {
    console.log(i);
}

Karena i selalu 1, kondisi:

i <= 10

selalu:

true

Akibatnya JavaScript terus menjalankan loop.

Itulah mengapa biasanya kita membutuhkan sesuatu seperti:

i++;

atau:

i--;

agar kondisi akhirnya menjadi false.

8. Tiga Hal Penting dalam while

Lecture memberikan 3 langkah utama.

Langkah 1 — Buat variabel awal

Misalnya:

let i = 1;

Ini menentukan dari mana loop dimulai.

Langkah 2 — Buat kondisi

while (i <= 10) {

Ini menentukan:

“Sampai kapan loop boleh berjalan?”

Langkah 3 — Ubah nilai variabel

i++;

Ini penting supaya kondisi suatu saat menjadi false.

Jadi pola sederhananya:

let i = 1;       // 1. nilai awal

while (i <= 10) { // 2. kondisi
    console.log(i);

    i++;         // 3. perubahan
}

Saya sarankan mengingat pola ini:

INITIALIZATION
      ↓
   CONDITION
      ↓
     BODY
      ↓
   UPDATE
      ↓
 kembali ke CONDITION

9. i++ dan i--

Untuk menghitung naik:

i++;

Artinya:

i = i + 1

Contoh:

1 → 2 → 3 → 4 → 5

Sedangkan:

i--;

artinya:

i = i - 1

Contoh:

10 → 9 → 8 → 7 → 6

10. Menghitung Mundur dengan while

Misalnya kita ingin:

10
9
8
7
6
5
4
3
2
1

Kita bisa membuat:

let i = 10;

while (i >= 1) {
    console.log("Value of I is " + i);
    i--;
}

Perhatikan tiga komponennya:

let i = 10;

Mulai dari 10.

while (i >= 1)

Selama masih lebih besar atau sama dengan 1.

i--;

Setiap putaran dikurangi 1.

11. Kenapa Kondisinya >= 1?

Karena kita ingin angka 1 ikut dicetak.

Saat:

i = 1

kondisinya:

1 >= 1

true.

Jadi:

Value of I is 1

Kemudian:

i--;

menjadi:

i = 0

Sekarang:

0 >= 1

false.

Loop berhenti.

12. Looping Array dengan while

Nah, bagian ini sangat penting karena mulai menghubungkan materi:

Array + Loop.

Misalnya kita punya:

let users = ["John", "Steve", "Mary", "Mark"];

Kita ingin menampilkan semua user:

John
Steve
Mary
Mark

Kita tahu bahwa array menggunakan index:

index:    0        1        2       3
          ↓        ↓        ↓       ↓
users = ["John", "Steve", "Mary", "Mark"]

Jadi:

users[0] // John
users[1] // Steve
users[2] // Mary
users[3] // Mark

Kita bisa menggunakan while.

13. Membuat Variabel index

Kita mulai dari index 0:

let index = 0;

Kenapa 0?

Karena index array JavaScript dimulai dari 0.

Kemudian:

while (index < users.length) {
    console.log(users[index]);
    index++;
}

Ini sangat penting untuk dipahami.

14. Bedah Loop Array

Array:

let users = ["John", "Steve", "Mary", "Mark"];

Panjang array:

users.length

hasil:

4

Index-nya:

0 → John
1 → Steve
2 → Mary
3 → Mark

Perhatikan:

length = 4
index terakhir = 3

Karena:

index terakhir = length - 1

15. Kenapa Kondisinya < users.length?

Kita menulis:

while (index < users.length)

Awalnya:

index = 0
users.length = 4

Cek:

0 < 4

true.

Maka:

console.log(users[index]);

menjadi:

console.log(users[0]);

Output:

John

Kemudian:

index++;

Sekarang:

index = 1

Cek:

1 < 4

true.

Print:

users[1]

Output:

Steve

Kemudian index menjadi 2.

16. Proses Lengkapnya

Kita bisa membuat tabel:

Ini sebenarnya pola yang sangat sering digunakan ketika bekerja dengan array.

17. Kenapa Tidak index <= users.length?

Ini kesalahan yang sering dilakukan pemula.

Jangan:

while (index <= users.length)

Gunakan:

while (index < users.length)

Kenapa?

Karena:

users.length = 4

index yang valid hanya:

0
1
2
3

Index 4 tidak ada.

Jadi:

users[4]

hasilnya:

undefined

Dengan:

index < users.length

kita berhenti sebelum mencoba index 4.

18. Kenapa index++ Juga Wajib?

Misalnya:

let index = 0;

while (index < users.length) {
    console.log(users[index]);
}

Awalnya:

index = 0

Kondisi:

0 < 4

true.

Print:

John

Tapi index tidak berubah.

Tetap:

index = 0

Kembali lagi:

0 < 4

true.

Print John lagi.

Dan lagi.

Dan lagi.

Jadilah infinite loop:

John
John
John
John
John
...

Karena itu:

index++;

sangat penting.

19. Pola Loop Array yang Perlu Kamu Hafalkan

Untuk while, pola umumnya:

let index = 0;

while (index < array.length) {
    console.log(array[index]);

    index++;
}

Misalnya:

let users = ["John", "Steve", "Mary", "Mark"];

let index = 0;

while (index < users.length) {
    console.log(users[index]);

    index++;
}

Ini adalah pola dasar yang sangat penting.

20. Kenapa Menggunakan users.length, Bukan Angka 4?

Kita sebenarnya bisa saja menulis:

while (index < 4) {
    console.log(users[index]);
    index++;
}

Tapi ini kurang bagus.

Karena kalau array berubah:

let users = ["John", "Steve", "Mary", "Mark", "David"];

Sekarang panjangnya:

5

Tetapi kondisi kita masih:

index < 4

Akibatnya David tidak akan diproses.

Lebih bagus:

while (index < users.length) {

Karena length otomatis mengikuti ukuran array.

Misalnya:

Array 4 elemen → length = 4
Array 5 elemen → length = 5
Array 10 elemen → length = 10

Jadi loop-nya fleksibel.

21. Hal Penting: while Bisa Tidak Berjalan Sama Sekali

Ini bagian terakhir dari lecture dan sangat penting.

Misalnya:

let users = ["John", "Steve", "Mary", "Mark"];

let index = 4;

while (index < users.length) {
    console.log(users[index]);

    index++;
}

Kita tahu:

users.length = 4
index = 4

Maka kondisi:

4 < 4

adalah:

false

Jadi body:

{
    console.log(users[index]);
    index++;
}

tidak dijalankan sama sekali.

Tidak ada output.

22. Ini Ciri Penting while

while mengecek kondisi sebelum menjalankan body.

Jadi:

        CEK KONDISI
             ↓
       false? ───→ STOP
             ↓ true
       JALANKAN BODY
             ↓
       kembali cek kondisi

Artinya bisa saja:

while menjalankan body 0 kali.

Contoh:

let i = 100;

while (i < 10) {
    console.log(i);
    i++;
}

Kondisi awal:

100 < 10

false.

Maka langsung berhenti.

Output:

tidak ada

23. Analogi Sederhana

Bayangkan kamu punya aturan:

“Selama pintu toko masih terbuka, masuklah ke toko.”

Kamu akan:

Apakah toko buka?
      ↓
    YA
      ↓
Masuk
      ↓
Apakah toko buka?
      ↓
    YA
      ↓
Masuk
...

Kalau dari awal toko sudah tutup:

Apakah toko buka?
      ↓
    TIDAK
      ↓
Tidak masuk sama sekali

Itulah while.

Cek dulu → kalau benar baru melakukan sesuatu.

24. Kesalahan yang Paling Sering Terjadi

❌ 1. Lupa update variable

let i = 1;

while (i <= 10) {
    console.log(i);
}

→ Infinite loop.

❌ 2. Salah arah update

Misalnya:

let i = 10;

while (i >= 1) {
    console.log(i);
    i++;
}

Ini juga bermasalah.

Karena:

10 → 11 → 12 → 13 → ...

Kondisi:

i >= 1

akan terus true.

Seharusnya:

i--;

❌ 3. Salah menggunakan <= untuk array

let index = 0;

while (index <= users.length) {
    console.log(users[index]);
    index++;
}

Akan mencoba mengakses:

users[4]

padahal index terakhir adalah 3.

Lebih aman:

index < users.length

❌ 4. Salah mengira index pertama adalah 1

Salah:

John → index 1

Benar:

John  → 0
Steve → 1
Mary  → 2
Mark  → 3

25. Hubungan dengan Materi Sebelumnya

Lecture ini sebenarnya menggabungkan beberapa materi yang sudah kita pelajari.

Misalnya:

Variable

let index = 0;

Kita sudah belajar let.

Comparison

index < users.length

Menghasilkan Boolean:

true / false

Array

users[index]

Mengambil element berdasarkan index.

Property

users.length

Mengambil panjang array.

while

Mengulang proses selama kondisi true.

Jadi sebenarnya:

let users = ["John", "Steve", "Mary", "Mark"];

let index = 0;

while (index < users.length) {
    console.log(users[index]);
    index++;
}

menggabungkan banyak konsep sebelumnya.

26. Cara Membaca Kode while

Kalau kamu melihat:

let i = 1;

while (i <= 10) {
    console.log(i);
    i++;
}

jangan langsung melihatnya sebagai satu blok besar.

Baca seperti manusia:

“Saya punya angka mulai dari 1.”

let i = 1;

“Selama angka tersebut masih kurang dari atau sama dengan 10…”

while (i <= 10)

“…tampilkan angkanya.”

console.log(i);

“Setelah itu naikkan angkanya satu.”

i++;

Lalu ulangi dari pengecekan kondisi.

27. Cheat Sheet while

Menghitung naik

let i = 1;

while (i <= 10) {
    console.log(i);
    i++;
}

Output:

1
2
3
...
10

Menghitung turun

let i = 10;

while (i >= 1) {
    console.log(i);
    i--;
}

Output:

10
9
8
...
1

Loop array

let users = ["John", "Steve", "Mary", "Mark"];

let index = 0;

while (index < users.length) {
    console.log(users[index]);
    index++;
}

Output:

John
Steve
Mary
Mark

28. Inti Paling Penting dari Lecture Ini

Kalau harus mengingat 5 hal saja, ingat ini:

1. Loop digunakan untuk mengulang kode

while (...) {
    // kode berulang
}

2. while menjalankan body selama kondisi true

while (condition) {
}

3. Variable yang digunakan dalam kondisi harus berubah

i++;

atau:

i--;

supaya akhirnya kondisi menjadi false.

4. Kalau tidak mengubahnya, bisa terjadi infinite loop

while (i <= 10) {
    console.log(i);
}

❌ i tidak pernah berubah.

5. Saat looping array, gunakan pola ini

let index = 0;

while (index < array.length) {
    console.log(array[index]);
    index++;
}

Ini pola yang sangat penting dan nanti akan sering kamu temui.

🧠 Mental model sederhana

Bayangkan while sebagai pertanyaan yang terus diulang:

"Apakah syaratnya masih terpenuhi?"

        ↓
       YA
        ↓
   kerjakan kode
        ↓
   ubah nilai
        ↓
tanya lagi:
"Masih terpenuhi?"
        ↓
       YA → ulangi
        ↓
      TIDAK
        ↓
      STOP

Dan khusus array:

index = 0
   ↓
ambil array[index]
   ↓
index++
   ↓
index < array.length ?
   ↓
  YA → ulangi
  TIDAK → STOP

Satu kalimat untuk mengingat while:

while = “selama kondisi masih benar, lakukan terus.”

Lecture berikutnya tentang do...while akan menarik karena konsepnya hampir sama, tetapi ada satu perbedaan penting: do...while menjalankan kode terlebih dahulu, baru mengecek kondisi.