Frontend Academy · Pelajaran

Alur Kontrol: if, else, switch, for, while

Buat percabangan dengan if/else dan switch, lakukan perulangan dengan for dan while, serta gunakan break dan continue untuk mengendalikan iterasi.

Pelajaran 4 dari 413 langkah

Alur Kontrol: if, else, switch, for, while adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa Itu Alur Kendali?

Alur kendali menentukan kode mana yang dijalankan dan berapa kali kode tersebut dijalankan. JavaScript menyediakan kondisi (if/else, switch) dan perulangan (for, while, do/while) untuk mengarahkan jalur eksekusi berdasarkan kondisi dan data.

Percabangan if / else if / else

Kondisional yang paling mendasar. Kondisi di dalam tanda kurung dievaluasi sebagai benar atau salah. Beberapa kondisi dapat dirangkai dengan else if. else terakhir menjadi cadangan untuk semua kasus lain.

const score = 75;

if (score >= 90) {
  console.log('A');
} else if (score >= 80) {
  console.log('B');
} else if (score >= 70) {
  console.log('C');
} else {
  console.log('F');
}

Operator ternari

Operator ternari adalah bentuk ringkas inline dari if/else: condition ? trueValue : falseValue. Gunakan untuk assignment sederhana dan ekspresi JSX. Hindari menumpuk operator ternari karena akan cepat sulit dibaca.

const label = age >= 18 ? 'Adult' : 'Minor';
const icon = isActive ? '🟢' : '🔴';

// In JSX:
<span>{isLoggedIn ? 'Logout' : 'Login'}</span>

Pernyataan switch

switch membandingkan sebuah nilai dengan beberapa kasus menggunakan kesetaraan ketat. Gunakan break setelah setiap kasus untuk mencegah eksekusi berlanjut ke kasus berikutnya. default menangani nilai yang tidak cocok.

const day = 'Monday';
switch (day) {
  case 'Saturday':
  case 'Sunday':
    console.log('Weekend');
    break;
  case 'Monday':
    console.log('Start of work week');
    break;
  default:
    console.log('Weekday');
}

Perulangan for

Perulangan for bergaya C klasik: penginisialisasi; kondisi; increment. Paling cocok untuk mengulang sejumlah kali yang sudah diketahui atau melakukan iterasi pada array berdasarkan indeks.

for (let i = 0; i < 5; i++) {
  console.log(i); // 0 1 2 3 4
}

// Iterate array by index:
const names = ['Alice', 'Bob', 'Carol'];
for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}

Perulangan for...of

for...of melakukan iterasi pada nilai dari setiap iterable (array, string, Map, dan Set). Ini lebih bersih daripada perulangan for berbasis indeks jika Anda tidak memerlukan indeksnya.

const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
  console.log(fruit);
}

for (const char of 'hello') {
  console.log(char); // h e l l o
}

Perulangan for...in

for...in melakukan iterasi pada kunci properti yang dapat dihitung dari sebuah objek. Jangan gunakan pada array — gunakan for...of atau metode array.

const user = { name: 'Alice', age: 30, role: 'admin' };
for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}

Perulangan while

Perulangan while dijalankan selama kondisinya dianggap benar. Gunakan saat jumlah iterasi belum diketahui sebelumnya — misalnya, membaca input sampai pengguna memasukkan nilai yang valid.

let attempts = 0;
let success = false;
while (!success && attempts < 3) {
  // try something
  attempts++;
  success = Math.random() > 0.5; // simulate
}
console.log(`Done in ${attempts} attempts`);

Perulangan do...while

do...while menjalankan badan perulangan setidaknya sekali sebelum memeriksa kondisi. Ini berguna saat badan perulangan harus dijalankan sebelum Anda dapat mengevaluasi kondisi keluar.

let input;
do {
  input = prompt('Enter a number:');
} while (isNaN(Number(input)));

break dan continue

break segera keluar dari perulangan saat ini. continue melewati sisa iterasi saat ini dan beralih ke iterasi berikutnya. Keduanya dapat digunakan dalam perulangan for, while, dan do/while.

for (let i = 0; i < 10; i++) {
  if (i === 3) continue;  // skip 3
  if (i === 7) break;     // stop at 7
  console.log(i);         // 0 1 2 4 5 6
}

Evaluasi Hubung Singkat

&& mengembalikan nilai pertama yang dianggap salah atau nilai terakhir. || mengembalikan nilai pertama yang dianggap benar atau nilai terakhir. ?? (penggabungan nullish) hanya mengembalikan sisi kanan jika sisi kiri bernilai null atau undefined.

const name = user && user.name;    // null if user is falsy
const label = name || 'Anonymous'; // 'Anonymous' if name is falsy
const port = config.port ?? 3000;  // 3000 only if port is null/undefined

Pemeriksaan Cepat

Perulangan mana yang dijamin menjalankan badannya setidaknya sekali?

Jawab di pelajaran interaktif

Ringkasan: Alur Kontrol JavaScript

Gunakan if/else untuk percabangan. Gunakan switch untuk beberapa nilai diskret. Gunakan perulangan for untuk iterasi yang jumlahnya diketahui. Gunakan for...of untuk iterable. Gunakan while untuk iterasi yang jumlahnya belum diketahui. Gunakan do...while agar perulangan berjalan setidaknya sekali. Gunakan operator hubung singkat untuk kondisional yang ringkas.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 41
Pelajaran: 163

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Alur Kontrol: if, else, switch, for, while” gratis?

Ya — teks lengkap “Alur Kontrol: if, else, switch, for, while” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Alur Kontrol: if, else, switch, for, while”?

Buat percabangan dengan if/else dan switch, lakukan perulangan dengan for dan while, serta gunakan break dan continue untuk mengendalikan iterasi. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Alur Kontrol: if, else, switch, for, while” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Variabel: let, const, var, dan Cakupan
Tipe Data: string, number, boolean, null, undefined
Fungsi: Deklarasi, Ekspresi, Fungsi Panah
Alur Kontrol: if, else, switch, for, while

← Kembali ke Frontend Academy