Di lecture ini kita belajar for loop, yaitu loop ketiga setelah while dan do...while.

Kabar baiknya: secara cara kerja, for loop sebenarnya sangat mirip dengan while loop yang baru kita pelajari. Perbedaan utamanya adalah cara menuliskan kode supaya lebih ringkas dan rapi.

1. Apa itu for loop?

Kita sudah tahu bahwa loop digunakan untuk menjalankan kode berulang kali.

Misalnya kita ingin mencetak angka 1 sampai 10.

Tanpa loop, kita harus menulis:

console.log(1);
console.log(2);
console.log(3);
console.log(4);
// ...
console.log(10);

Dengan loop:

for (let i = 1; i <= 10; i++) {
    console.log(i);
}

Lebih singkat dan jauh lebih mudah dikelola.

2. Tiga Jenis Loop yang Sudah Kita Pelajari

Sekarang kita sudah mengenal:

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

Ketiganya memiliki tujuan utama yang sama:

Mengulang sebuah blok kode.

Perbedaannya terutama pada cara menulis dan kapan kondisi diperiksa.

Secara sederhana:

while       → cek kondisi → jalankan
do...while  → jalankan → cek kondisi
for         → initialization → condition → body → update

3. Mengingat while

Sebelumnya kita punya:

let i = 1;

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

Di sini ada 3 bagian penting:

1. Initialization

let i = 1;

Menentukan nilai awal.

2. Condition

i <= 10

Menentukan apakah loop masih boleh berjalan.

3. Increment / decrement

i++;

Mengubah nilai i supaya loop akhirnya berhenti.

Jadi bentuknya:

Initialization
      ↓
Condition
      ↓
Body
      ↓
Increment
      ↓
Condition lagi

4. for Menggabungkan Ketiga Bagian Itu

Dengan for, kita bisa menaruh:

• initialization
• condition
• increment/decrement

di dalam satu tanda kurung.

Syntax:

for (initialization; condition; increment/decrement) {
    // body
}

Contoh:

for (let i = 1; i <= 10; i++) {
    console.log(i);
}

Perhatikan:

for (
    let i = 1;  // initialization
    i <= 10;    // condition
    i++         // increment
) {
    console.log(i); // body
}

Nah, ini adalah inti dari for loop.

5. Membandingkan while dengan for

Kedua kode berikut melakukan hal yang sama.

while

let i = 1;

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

for

for (let i = 1; i <= 10; i++) {
    console.log(i);
}

Output keduanya:

1
2
3
4
5
6
7
8
9
10

Jadi jangan berpikir bahwa for adalah konsep yang benar-benar berbeda.

Lebih tepatnya:

for adalah cara lain untuk melakukan pola looping yang sama, dengan initialization, condition, dan update ditempatkan dalam satu struktur.

6. Bedah Syntax for

Mari kita lihat:

for (let i = 1; i <= 10; i++) {
    console.log(i);
}

Ada tiga bagian di dalam ():

       for
        ↓
┌──────────────────────────┐
│ let i = 1; │ i <= 10; │ i++ │
└──────────────────────────┘
       ①          ②       ③

① Initialization

let i = 1

Artinya:

“Buat variable i dan mulai dari 1.”

② Condition

i <= 10

Artinya:

“Selama i masih kurang dari atau sama dengan 10, jalankan loop.”

③ Increment

i++

Artinya:

“Setelah body selesai, naikkan i sebanyak 1.”

7. Urutan Eksekusi for Sangat Penting

Ini bagian yang perlu kamu pahami baik-baik.

Misalnya:

for (let i = 1; i <= 3; i++) {
    console.log(i);
}

JavaScript tidak melakukan ketiganya secara bersamaan.

Urutannya:

1. initialization
        ↓
2. condition
        ↓
3. body
        ↓
4. increment
        ↓
5. condition
        ↓
6. body
        ↓
7. increment
        ↓
...

Mari kita jalankan.

Pertama

Initialization:

let i = 1;

Ini dilakukan satu kali saja.

Kemudian condition:

i <= 3

1 <= 3 → true

Jalankan body:

1

Setelah body selesai:

i++;

Sekarang:

i = 2

Kedua

Cek condition:

2 <= 3 → true

Jalankan body:

2

Kemudian:

i = 3

Ketiga

Cek:

3 <= 3 → true

Jalankan:

3

Kemudian:

i = 4

Keempat

Cek:

4 <= 3 → false

Maka loop berhenti.

8. Jadi Initialization Hanya Sekali

Ini salah satu poin yang secara khusus ditekankan oleh lecture.

Misalnya:

for (let i = 0; i < 4; i++) {
    console.log(i);
}

Bagian:

let i = 0

hanya dijalankan satu kali, ketika loop mulai.

Bukan:

let i = 0
let i = 0
let i = 0
let i = 0

Setelah itu yang berulang adalah:

condition
   ↓
body
   ↓
update
   ↓
condition
   ↓
body
...

Jadi pola lengkapnya:

INITIALIZATION
     ↓
  CONDITION
     ↓
    BODY
     ↓
   UPDATE
     ↓
  CONDITION
     ↓
    BODY
     ↓
   UPDATE
     ↓
    ...

9. for Loop untuk Array

Sekarang kita masuk ke bagian yang sangat penting.

Kita punya array:

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

Index-nya:

index
  0       1        2       3
  ↓       ↓        ↓       ↓
John   Steve     Mary    Mark

Kita ingin mencetak semua element.

Dengan for:

for (let i = 0; i < users.length; i++) {
    console.log(users[i]);
}

Output:

John
Steve
Mary
Mark

10. Kenapa Mulai dari 0?

Karena index array dimulai dari 0.

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

Jadi:

let i = 0;

artinya kita mulai dari element pertama.

11. Kenapa Kondisinya < users.length?

Array kita:

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

Panjangnya:

users.length

adalah:

4

Tetapi index yang tersedia:

0
1
2
3

Jadi kita menggunakan:

i < users.length

Bukan:

i <= users.length

Karena:

3 < 4 → true

tetapi:

4 < 4 → false

Ini membuat kita berhenti tepat setelah index terakhir.

12. Bedah Loop Array

Kode:

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

for (let i = 0; i < users.length; i++) {
    console.log(users[i]);
}

Mari kita lihat prosesnya.

Iterasi 1

i = 0

Cek:

0 < 4 → true

Ambil:

users[0]

Hasil:

John

Kemudian:

i++;

menjadi:

i = 1

Iterasi 2

1 < 4 → true

Ambil:

users[1]

Hasil:

Steve

Kemudian:

i = 2

Iterasi 3

2 < 4 → true

Ambil:

users[2]

Hasil:

Mary

Kemudian:

i = 3

Iterasi 4

3 < 4 → true

Ambil:

users[3]

Hasil:

Mark

Kemudian:

i = 4

Iterasi 5

Cek:

4 < 4 → false

Loop berhenti.

13. Tabel Prosesnya

Supaya lebih mudah:

Kalau kamu sudah bisa memahami tabel ini, berarti konsep dasar for loop sudah mulai masuk.

14. Kenapa for Terasa Lebih Praktis?

Bandingkan:

while

let i = 0;

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

for

for (let i = 0; i < users.length; i++) {
    console.log(users[i]);
}

for membuat pola:

nilai awal
kondisi
perubahan

terlihat jelas dalam satu tempat.

Itulah alasan for sering terasa sangat nyaman untuk loop yang memiliki counter seperti:

0 → 1 → 2 → 3 → ...

15. Ketiga Bagian for Ternyata Optional

Ini juga disebutkan dalam lecture.

Misalnya kita punya:

for (let i = 1; i <= 10; i++) {
    console.log(i);
}

Ketiga bagian:

① initialization
② condition
③ increment

secara syntax bisa dikosongkan.

Tapi hati-hati: optional secara syntax bukan berarti selalu baik untuk dihilangkan.

16. Initialization Bisa Diletakkan di Luar

Misalnya:

let i = 1;

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

Perhatikan:

for (; i <= 10; i++)

Bagian pertama kosong.

Kenapa?

Karena initialization sudah dilakukan sebelumnya:

let i = 1;

Ini tetap valid.

17. Increment Bisa Diletakkan di Body

Misalnya:

let i = 1;

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

Ini juga bisa berjalan.

Kita memindahkan:

i++

ke dalam body.

Strukturnya sekarang lebih mirip while:

let i = 1;

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

Dibanding:

let i = 1;

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

Keduanya hampir sama.

18. Condition Juga Bisa Dihilangkan

Misalnya:

for (let i = 1;; i++) {
    console.log(i);
}

Apa masalahnya?

Tidak ada condition.

Artinya tidak ada kondisi yang memberi tahu loop kapan harus berhenti.

Akibatnya loop menjadi:

Infinite loop.

Secara konsep seperti:

1
2
3
4
5
6
7
...

terus berjalan.

Jadi jangan menghilangkan condition kecuali memang kamu sengaja membuat infinite loop dan memiliki mekanisme lain untuk menghentikannya, misalnya break yang akan dipelajari nanti.

19. Jangan Bingung dengan Titik Koma ;

Syntax:

for (let i = 0; i < 10; i++) {
}

Ada dua semicolon:

for (
     let i = 0  ;
     i < 10     ;
     i++
)

Semicolon tersebut digunakan untuk memisahkan tiga bagian:

initialization ; condition ; update

Jadi jangan menulis:

for (let i = 0, i < 10, i++) // ❌

Yang benar:

for (let i = 0; i < 10; i++) // ✅

20. for vs while vs do...while

Sekarang kita bisa membandingkan ketiganya.

while

let i = 0;

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

Cek dulu, baru jalankan.

do...while

let i = 0;

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

Jalankan dulu, baru cek.

for

for (let i = 0; i < 10; i++) {
    console.log(i);
}

Initialization, condition, dan update ditulis dalam satu struktur.

21. Analogi Sederhana

Bayangkan kamu ingin naik tangga dari lantai 1 sampai lantai 10.

while

Kamu bertanya dulu:

“Apakah saya masih berada di lantai yang harus dinaiki?”

Kalau iya, naik.

CEK → NAIK → UPDATE → CEK → NAIK → ...

do...while

Kamu naik dulu satu lantai, baru mengecek apakah masih perlu lanjut.

NAIK → CEK → NAIK → CEK → ...

for

Kamu sudah menentukan semuanya dalam satu instruksi:

“Mulai dari lantai 1, selama belum melewati lantai 10, naik satu lantai setiap kali.”

MULAI DARI 1
     ↓
CEK <= 10
     ↓
NAIK
     ↓
+1
     ↓
CEK LAGI

22. Pola yang Sangat Penting untuk Array

Menurut saya, bagian paling berguna dari lecture ini adalah pola berikut:

for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}

Kalau kamu punya:

let names = ["John", "Mark", "Mary"];

maka:

for (let i = 0; i < names.length; i++) {
    console.log(names[i]);
}

Output:

John
Mark
Mary

Pahami hubungan ini:

i = index
       ↓
array[i]
       ↓
ambil element pada index tersebut

23. Kenapa i Sering Digunakan?

Kamu mungkin akan sering melihat:

for (let i = 0; i < array.length; i++) {

Kenapa i?

i biasanya digunakan sebagai singkatan informal untuk index atau iteration counter.

Tapi sebenarnya namanya bebas.

Kamu bisa menulis:

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

Ini valid dan bahkan lebih jelas bagi pemula.

Kamu juga bisa:

for (let counter = 0; counter < users.length; counter++) {
}

Tidak ada keharusan menggunakan i.

24. i++ Terjadi Setelah Body

Ini detail yang sering membuat pemula bingung.

Kode:

for (let i = 0; i < 3; i++) {
    console.log(i);
}

Bukan berarti:

i++
console.log(i)

Urutannya adalah:

i = 0
   ↓
cek 0 < 3
   ↓
console.log(0)
   ↓
i++
   ↓
i = 1
   ↓
cek lagi

Jadi output:

0
1
2

Bukan:

1
2
3

25. Kesalahan Pemula yang Sering Terjadi

❌ 1. Salah kondisi

for (let i = 0; i <= users.length; i++) {
    console.log(users[i]);
}

Untuk array normal, sebaiknya:

for (let i = 0; i < users.length; i++) {
    console.log(users[i]);
}

❌ 2. Lupa i++

for (let i = 0; i < 10;) {
    console.log(i);
}

i tidak berubah.

→ Infinite loop.

❌ 3. Salah arah

Misalnya:

for (let i = 10; i >= 1; i++) {
    console.log(i);
}

i malah:

10 → 11 → 12 → 13 → ...

Kondisi:

i >= 1

akan terus true.

Kalau ingin mundur:

for (let i = 10; i >= 1; i--) {
    console.log(i);
}

26. for untuk Menghitung Naik

for (let i = 1; i <= 10; i++) {
    console.log(i);
}

Output:

1
2
3
...
10

27. for untuk Menghitung Mundur

for (let i = 10; i >= 1; i--) {
    console.log(i);
}

Output:

10
9
8
...
1

Jadi pola:

Naik:
i = 1
i <= 10
i++

Turun:
i = 10
i >= 1
i--

28. Perbandingan dengan do...while

Sekarang kita bisa melihat perkembangan konsep loop dari tiga lecture:

WHILE

let i = 1;

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

↓

DO...WHILE

let i = 1;

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

↓

FOR

for (let i = 1; i <= 10; i++) {
    console.log(i);
}

Tujuannya sama:

1 → 2 → 3 → ... → 10

Tetapi syntax-nya berbeda.

29. Cara Membaca for dengan Bahasa Manusia

Kalau melihat:

for (let i = 0; i < users.length; i++) {
    console.log(users[i]);
}

bacalah:

“Buat i mulai dari 0. Selama i masih lebih kecil dari panjang array, ambil users[i]. Setelah selesai, naikkan i satu.”

Ini jauh lebih mudah daripada mencoba menghafalkan syntax.

30. Cheat Sheet

Struktur umum

for (initialization; condition; update) {
    // body
}

Menghitung naik

for (let i = 1; i <= 10; i++) {
    console.log(i);
}

Menghitung turun

for (let i = 10; i >= 1; i--) {
    console.log(i);
}

Loop array

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

for (let i = 0; i < users.length; i++) {
    console.log(users[i]);
}

🧠 Kesimpulan Besar

Kalau kamu hanya ingin mengingat inti lecture ini, ingat 6 hal berikut:

1. for adalah loop

Digunakan untuk menjalankan kode berkali-kali.

2. Cara kerja for mirip while

Keduanya melakukan:

condition → body → update → condition → ...

3. Perbedaannya adalah syntax

Pada while:

let i = 0;

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

Pada for:

for (let i = 0; i < 10; i++) {
    console.log(i);
}

for menggabungkan:

initialization
condition
update

ke dalam ().

4. Initialization hanya dilakukan sekali

for (let i = 0; ...)

let i = 0 hanya terjadi ketika loop dimulai.

5. Untuk array, pola pentingnya adalah:

for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}

Ingat:

i = index
array[i] = element
array.length = panjang array

6. Urutan for wajib kamu pahami

┌──────────────────┐
│ 1. initialization│ ← sekali
└────────┬─────────┘
         ↓
┌──────────────────┐
│ 2. condition     │ ← setiap putaran
└────────┬─────────┘
         ↓
       true?
       ↓
┌──────────────────┐
│ 3. body          │
└────────┬─────────┘
         ↓
┌──────────────────┐
│ 4. update        │
└────────┬─────────┘
         ↓
    kembali ke
     condition

Kalimat pengingat paling sederhana:

for = mulai dari mana → sampai kapan → naik/turun berapa.

Contohnya:

for (let i = 0; i < users.length; i++) {
    console.log(users[i]);
}

bisa kamu baca:

“Mulai dari index 0, selama belum mencapai panjang array, ambil element-nya, lalu maju ke index berikutnya.”

Dengan memahami pola ini, kamu sudah punya fondasi yang bagus untuk materi berikutnya karena for loop akan sangat sering digunakan saat bekerja dengan array, data, DOM, dan berbagai proses berulang di JavaScript.