Pertemuan 7 – Struktur Kontrol JavaScript

← Kembali ke Beranda

Tujuan Pembelajaran

Mahasiswa diharapkan mampu menggunakan struktur kontrol JavaScript seperti array, looping, dan kondisi untuk mengelola alur program yang logis, efisien, dan dapat menangani data dinamis dalam aplikasi web.

Array di JavaScript

Array adalah struktur data yang menyimpan koleksi nilai dalam satu variabel. Bayangkan array seperti rak buku: setiap slot menyimpan item. Di JS, array dinamis, bisa tambah/hapus elemen. Contoh: let buah = ["apel", "jeruk", "mangga"];. Akses dengan index (buah[0] = "apel"), manipulasi dengan method seperti push() (tambah akhir), pop() (hapus akhir), atau splice() (hapus/insert di posisi tertentu).

Penggunaan array penting untuk data list seperti daftar produk atau nilai mahasiswa. Tanpa array, kita harus bikin variabel terpisah untuk setiap item, yang tidak efisien.

Looping (Perulangan)

Looping digunakan untuk menjalankan kode berulang kali. Ada tiga jenis utama: for (untuk iterasi dengan counter), while (selama kondisi true), dan forEach (khusus array, lebih sederhana). Contoh: for (let i = 0; i < 5; i++) { console.log(i); }. Looping hemat kode, misalnya cetak semua elemen array tanpa tulis manual.

Tips: Gunakan for untuk kontrol penuh, forEach untuk array sederhana. Hindari infinite loop (while tanpa kondisi berhenti) yang bikin browser crash.

Kondisi (Percabangan)

Kondisi memungkinkan program memilih aksi berdasarkan kondisi. Gunakan if-else untuk sederhana, switch untuk multiple pilihan. Contoh: if (nilai > 80) { console.log("Lulus"); } else { console.log("Remedial"); }. Kondisi buat logika seperti validasi form atau game sederhana.

Operator: == (sama nilai), === (sama nilai dan tipe), && (dan), || (atau), ! (not).

Contoh Kode Lengkap

// Array dan manipulasi
let angka = [10, 20, 30, 40];
angka.push(50); // Tambah 50
console.log(angka); // [10, 20, 30, 40, 50]

// Looping for
for (let i = 0; i < angka.length; i++) {
    console.log("Angka ke-" + i + ": " + angka[i]);
}

// Kondisi if-else
let total = angka.reduce((a, b) => a + b, 0); // Sum array
if (total > 100) {
    console.log("Total besar: " + total);
} else {
    console.log("Total kecil: " + total);
}

// Looping forEach
angka.forEach(function(item, index) {
    console.log("Index " + index + ": " + item);
});

Penjelasan: Kode ini buat array angka, loop cetak, kondisi cek total, dan forEach untuk iterasi simpel. Jalankan di console browser untuk lihat output.

Tips Praktis untuk Pemula

  • Gunakan console.log() di dalam loop/kondisi untuk debug dan lihat nilai variabel.
  • Array method seperti map() (ubah elemen) atau filter() (saring) bisa digabung dengan loop untuk data kompleks.
  • Praktikkan di editor online seperti JSFiddle untuk test cepat tanpa setup file.
  • Jika stuck, ingat: Loop untuk "ulang", kondisi untuk "pilih", array untuk "simpan banyak".

Ringkasan Materi

Struktur kontrol adalah inti pemrograman JS. Array simpan data kolektif, looping proses berulang, kondisi ambil keputusan. Kombinasi ini buat aplikasi web yang dinamis, seperti kalkulator atau to-do list.

Latihan dan Diskusi

1. Buat array nama mahasiswa, loop cetak "Halo [nama]". 2. Tambah kondisi if nilai > 70 cetak "Lulus", else "Tidak". 3. Gunakan forEach hitung total array angka. 4. Diskusikan: Apa beda for dan while?.