Kondisi & Perulangan

Menguasai percabangan if-else, switch, ternary operator, dan berbagai jenis loop untuk membuat logika program.

Phase

Phase 3 — JS

Topik

JavaScript Dasar

Durasi

90 Menit

Deadline Tugas

Sebelum Pertemuan Berikutnya — Pukul 23.59 WIB

🎯Tujuan Pembelajaran

01Menggunakan if, else if, else
02Menggunakan ternary operator: kondisi ? jika-ya : jika-tidak
03Menguasai switch statement
04Membuat for loop: for (let i = 0; i < n; i++)
05Menggunakan while dan do...while
06Menggunakan break, continue, dan nested loop

📖Sub-topik & Materi

01if, else if, else — kondisi bertingkat
02Ternary operator: kondisi ? nilai_true : nilai_false
03switch statement dan break
04for loop: klasik, for...of (array), for...in (object)
05while dan do...while
06break (keluar loop), continue (skip iterasi), nested loop

💡Penjelasan Konsep

Konsep 1

if-else dan Ternary Operator

if-else menjalankan kode berbeda berdasarkan kondisi. Untuk kondisi bertingkat gunakan else if. Ternary operator (? :) adalah versi ringkas if-else untuk satu ekspresi — bagus untuk penugasan nilai sederhana. Switch cocok untuk banyak kondisi berbasis nilai yang sama.

javascript

"t-kw">class="t-cm">// "t-kw">if-"t-kw">else
"t-kw">const nilai = 85;
"t-kw">if (nilai >= 90) {
  console.log("t-st">'A — Sangat Baik');
} "t-kw">else "t-kw">if (nilai >= 80) {
  console.log("t-st">'B — Baik');       "t-kw">class="t-cm">// ← ini yang jalan
} "t-kw">else "t-kw">if (nilai >= 70) {
  console.log("t-st">'C — Cukup');
} "t-kw">else {
  console.log("t-st">'D — Kurang');
}

"t-kw">class="t-cm">// Ternary: kondisi ? jika_true : jika_false
"t-kw">const status = nilai >= 70 ? "t-st">'Lulus' : "t-st">'Remidi';
console.log(status); "t-kw">class="t-cm">// "Lulus"

"t-kw">class="t-cm">// Switch
"t-kw">const hari = "t-st">'Senin';
switch (hari) {
  case "t-st">'Senin': console.log("t-st">'Kelas HTML'); break;
  case "t-st">'Rabu':  console.log("t-st">'Kelas CSS');  break;
  "t-kw">default:      console.log("t-st">'Libur');
}

Konsep 2

Loop: for, while, for...of

for loop: paling umum, ketika jumlah iterasi diketahui. while loop: ketika kondisi berhenti tidak pasti. for...of: khusus untuk iterasi array atau string — lebih bersih dari for biasa. break keluar dari loop sepenuhnya, continue melewati iterasi saat ini ke berikutnya.

javascript

"t-kw">class="t-cm">// "t-kw">for loop
"t-kw">for ("t-kw">let i = 1; i <= 5; i++) {
  console.log("t-st">`Pertemuan ke-${i}`);
}

"t-kw">class="t-cm">// "t-kw">while loop
"t-kw">let skor = 0;
"t-kw">while (skor < 100) {
  skor += 10;
  "t-kw">if (skor === 60) continue; "t-kw">class="t-cm">// skip 60
  "t-kw">if (skor === 80) break;    "t-kw">class="t-cm">// keluar di 80
  console.log(skor);
}

"t-kw">class="t-cm">// "t-kw">for..."t-kw">of (iterasi array)
"t-kw">const materi = ["t-st">'HTML', "t-st">'CSS', "t-st">'JavaScript'];
"t-kw">for ("t-kw">const m "t-kw">of materi) {
  console.log(m);
}

"t-kw">class="t-cm">// FizzBuzz 1-20
"t-kw">for ("t-kw">let i = 1; i <= 20; i++) {
  "t-kw">if (i % 15 === 0) console.log("t-st">'FizzBuzz');
  "t-kw">else "t-kw">if (i % 3 === 0) console.log("t-st">'Fizz');
  "t-kw">else "t-kw">if (i % 5 === 0) console.log("t-st">'Buzz');
  "t-kw">else console.log(i);
}

💻Contoh Kode Lengkap

javascript

"t-kw">class="t-cm">// === If - Else If - Else ===
"t-kw">const nilai = 85;
"t-kw">if (nilai >= 90) {
  console.log("t-st">'A — Sangat Memuaskan');
} "t-kw">else "t-kw">if (nilai >= 75) {
  console.log("t-st">'B — Memuaskan');
} "t-kw">else "t-kw">if (nilai >= 60) {
  console.log("t-st">'C — Cukup');
} "t-kw">else {
  console.log("t-st">'D — Perlu Perbaikan');
}

"t-kw">class="t-cm">// === Ternary Operator ===
"t-kw">const status = nilai >= 75 ? "t-st">'LULUS' : "t-st">'TIDAK LULUS';
console.log("t-st">`Status: ${status}`);

"t-kw">class="t-cm">// === Switch Statement ===
"t-kw">const hari = "t-st">'Senin';
switch (hari) {
  case "t-st">'Senin': console.log("t-st">'Kelas HTML'); break;
  case "t-st">'Rabu':  console.log("t-st">'Kelas CSS');  break;
  "t-kw">default:      console.log("t-st">'Libur');
}

"t-kw">class="t-cm">// === For Loop & FizzBuzz ===
"t-kw">for ("t-kw">let i = 1; i <= 20; i++) {
  "t-kw">if (i % 15 === 0)      console.log("t-st">'FizzBuzz');
  "t-kw">else "t-kw">if (i % 3 === 0)  console.log("t-st">'Fizz');
  "t-kw">else "t-kw">if (i % 5 === 0)  console.log("t-st">'Buzz');
  "t-kw">else                   console.log(i);
}

⚡Latihan Kelas · Buat kalkulator nilai dan selesaikan FizzBuzz challenge

Buat fungsi hitungGrade(nilai) yang return A/B/C/D menggunakan if-else

Buat versi yang sama menggunakan ternary operator (chain)

Selesaikan FizzBuzz: 1-20, FizzBuzz kelipatan 15, Fizz kelipatan 3, Buzz kelipatan 5

Buat nested loop untuk tabel perkalian 1-5 (ditampilkan di console)

Gunakan break untuk keluar dari loop saat menemukan angka tertentu

📝 Tugas 4.3 — Kondisi & Perulangan

⏰ Deadline: Sebelum Pertemuan Berikutnya — Pukul 23.59 WIB

Buat program: (1) Kalkulator grade: masukkan nilai (hardcode array), tampilkan grade dan predikat setiap nilai. (2) Loop yang menghasilkan tabel perkalian 1-10 dalam format rapi. (3) FizzBuzz 1-100 dengan output di console.

Kriteria Penilaian	Poin
if-else bekerja benar untuk semua kasus grade (A/B/C/D)	30
Loop digunakan minimal 2 jenis berbeda (for + while)	25
FizzBuzz 1-100 benar tanpa bug logika	25
Output terformat rapi dan mudah dibaca	20
Total	100