Tutorial js

Array dan Loop: Mengelola Banyak Data

Array adalah daftar data yang disimpan dalam satu variabel. Bayangkan seperti kotak yang berisi banyak barang yang bisa diurutkan dan diakses satu per satu.

Apa itu Array?

Array memungkinkan kita:

  • Menyimpan banyak data dalam satu variabel
  • Mengakses data berdasarkan urutan (index)
  • Menambah/menghapus data dengan mudah
  • Melakukan operasi pada semua data sekaligus

Membuat Array

1. Array Sederhana

let daftar_buah = ["apel", "jeruk", "pisang", "mangga"];
let daftar_angka = [10, 20, 30, 40, 50];
let daftar_nilai = [85, 90, 78, 92, 88];

console.log(daftar_buah); // ["apel", "jeruk", "pisang", "mangga"]
console.log(daftar_angka); // [10, 20, 30, 40, 50]
console.log(daftar_nilai); // [85, 90, 78, 92, 88]

2. Array Kosong

let daftar_kosong = [];
let daftar_belanja = [];

console.log(daftar_kosong.length); // 0 (kosong)

3. Array Campuran

let data_siswa = ["Budi", 17, true, "Jakarta"];
let data_campuran = [1, "hello", false, 3.14, "world"];

console.log(data_siswa); // ["Budi", 17, true, "Jakarta"]
console.log(data_campuran); // [1, "hello", false, 3.14, "world"]

Mengakses Data Array

Index Array (Mulai dari 0)

let nama_kota = ["Jakarta", "Bandung", "Surabaya", "Medan"];

// Akses data berdasarkan index
console.log(nama_kota[0]); // "Jakarta" (index 0)
console.log(nama_kota[1]); // "Bandung" (index 1)
console.log(nama_kota[2]); // "Surabaya" (index 2)
console.log(nama_kota[3]); // "Medan" (index 3)

// Akses data terakhir
let index_terakhir = nama_kota.length - 1;
console.log(nama_kota[index_terakhir]); // "Medan"

Mengubah Data Array

let hobi_saya = ["membaca", "coding", "musik"];

console.log("Sebelum:", hobi_saya);

// Ubah data index ke-1
hobi_saya[1] = "menulis";

console.log("Sesudah:", hobi_saya); // ["membaca", "menulis", "musik"]

Method Array Penting

1. Menambah Data

let makanan_favorit = ["nasi goreng", "mie ayam"];

// Tambah di akhir
makanan_favorit.push("rendang");
console.log(makanan_favorit); // ["nasi goreng", "mie ayam", "rendang"]

// Tambah di awal
makanan_favorit.unshift("gado-gado");
console.log(makanan_favorit); // ["gado-gado", "nasi goreng", "mie ayam", "rendang"]

2. Menghapus Data

let daftar_tugas = ["belajar", "olahraga", "tidur", "makan"];

// Hapus dari akhir
let tugas_terakhir = daftar_tugas.pop();
console.log("Dihapus:", tugas_terakhir); // "makan"
console.log("Sisa:", daftar_tugas); // ["belajar", "olahraga", "tidur"]

// Hapus dari awal
let tugas_pertama = daftar_tugas.shift();
console.log("Dihapus:", tugas_pertama); // "belajar"
console.log("Sisa:", daftar_tugas); // ["olahraga", "tidur"]

3. Mencari Data

let mata_pelajaran = ["matematika", "bahasa", "ipa", "ips"];

// Cari index
let index_ipa = mata_pelajaran.indexOf("ipa");
console.log("IPA di index:", index_ipa); // 2

// Cek apakah ada
let ada_bahasa = mata_pelajaran.includes("bahasa");
console.log("Ada bahasa?", ada_bahasa); // true

let ada_kimia = mata_pelajaran.includes("kimia");
console.log("Ada kimia?", ada_kimia); // false

Loop (Perulangan)

Loop memungkinkan kita mengulang kode untuk setiap data dalam array.

1. For Loop Tradisional

let daftar_nama = ["Ali", "Budi", "Citra", "Dina"];

console.log("=== DAFTAR SISWA ===");
for (let i = 0; i < daftar_nama.length; i++) {
  console.log(i + 1 + ". " + daftar_nama[i]);
}
// Output:
// 1. Ali
// 2. Budi
// 3. Citra
// 4. Dina

2. For...of Loop (Modern)

let daftar_warna = ["merah", "biru", "hijau", "kuning"];

console.log("=== DAFTAR WARNA ===");
for (let warna of daftar_warna) {
  console.log("Warna: " + warna);
}
// Output:
// Warna: merah
// Warna: biru
// Warna: hijau
// Warna: kuning

3. While Loop

let angka_countdown = [5, 4, 3, 2, 1];
let index = 0;

console.log("=== COUNTDOWN ===");
while (index < angka_countdown.length) {
  console.log(angka_countdown[index]);
  index++;
}
console.log("🚀 Launch!");

Contoh Praktis Array & Loop

1. Menghitung Total Nilai

let nilai_ujian = [85, 90, 78, 92, 88];
let total_nilai = 0;

// Hitung total
for (let nilai of nilai_ujian) {
  total_nilai = total_nilai + nilai;
}

let rata_rata = total_nilai / nilai_ujian.length;

console.log("Nilai ujian:", nilai_ujian);
console.log("Total nilai:", total_nilai);
console.log("Rata-rata:", rata_rata);
console.log("Jumlah ujian:", nilai_ujian.length);

2. Mencari Nilai Tertinggi dan Terendah

let daftar_harga = [25000, 15000, 35000, 20000, 30000];

let harga_tertinggi = daftar_harga[0];
let harga_terendah = daftar_harga[0];

for (let harga of daftar_harga) {
  if (harga > harga_tertinggi) {
    harga_tertinggi = harga;
  }
  if (harga < harga_terendah) {
    harga_terendah = harga;
  }
}

console.log("Daftar harga:", daftar_harga);
console.log("Harga tertinggi: Rp", harga_tertinggi);
console.log("Harga terendah: Rp", harga_terendah);

3. Filter Data

let semua_umur = [15, 22, 17, 25, 19, 16, 30];
let umur_dewasa = [];

// Filter umur >= 17
for (let umur of semua_umur) {
  if (umur >= 17) {
    umur_dewasa.push(umur);
  }
}

console.log("Semua umur:", semua_umur);
console.log("Umur dewasa:", umur_dewasa);

4. Membuat Tabel Perkalian

function buat_tabel_perkalian(angka) {
  console.log("=== TABEL PERKALIAN " + angka + " ===");

  for (let i = 1; i <= 10; i++) {
    let hasil = angka * i;
    console.log(angka + " × " + i + " = " + hasil);
  }
}

// Test
buat_tabel_perkalian(7);

5. Todo List Sederhana

let daftar_todo = [];

function tambah_todo(tugas) {
  daftar_todo.push(tugas);
  console.log("✅ Tugas '" + tugas + "' ditambahkan");
}

function hapus_todo(index) {
  if (index >= 0 && index < daftar_todo.length) {
    let tugas_dihapus = daftar_todo.splice(index, 1)[0];
    console.log("❌ Tugas '" + tugas_dihapus + "' dihapus");
  }
}

function tampilkan_todo() {
  console.log("\n=== DAFTAR TODO ===");
  if (daftar_todo.length === 0) {
    console.log("Tidak ada tugas");
  } else {
    for (let i = 0; i < daftar_todo.length; i++) {
      console.log(i + 1 + ". " + daftar_todo[i]);
    }
  }
}

// Test todo list
tambah_todo("Belajar JavaScript");
tambah_todo("Buat project");
tambah_todo("Review kode");
tampilkan_todo();

hapus_todo(1); // Hapus "Buat project"
tampilkan_todo();

Array Methods Modern

1. forEach - Eksekusi Function untuk Setiap Element

let produk_toko = ["laptop", "mouse", "keyboard", "monitor"];

produk_toko.forEach(function (produk, index) {
  console.log(index + 1 + ". " + produk.toUpperCase());
});

// Dengan arrow function
produk_toko.forEach((produk, index) => {
  console.log(`${index + 1}. ${produk}`);
});

2. map - Transform Array

let angka_asli = [1, 2, 3, 4, 5];

// Kalikan setiap angka dengan 2
let angka_kali_dua = angka_asli.map(function (angka) {
  return angka * 2;
});

console.log("Asli:", angka_asli); // [1, 2, 3, 4, 5]
console.log("×2:", angka_kali_dua); // [2, 4, 6, 8, 10]

// Dengan arrow function
let angka_kuadrat = angka_asli.map((angka) => angka * angka);
console.log("Kuadrat:", angka_kuadrat); // [1, 4, 9, 16, 25]

3. filter - Filter Array

let semua_nilai = [85, 60, 92, 45, 78, 90, 55];

// Filter nilai >= 75 (lulus)
let nilai_lulus = semua_nilai.filter(function (nilai) {
  return nilai >= 75;
});

console.log("Semua nilai:", semua_nilai);
console.log("Nilai lulus:", nilai_lulus); // [85, 92, 78, 90]

// Filter nilai genap
let angka_list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let angka_genap = angka_list.filter((angka) => angka % 2 === 0);
console.log("Angka genap:", angka_genap); // [2, 4, 6, 8, 10]

Latihan Praktek

1. Sistem Nilai Kelas

let data_kelas = [
  { nama: "Ali", nilai: 85 },
  { nama: "Budi", nilai: 70 },
  { nama: "Citra", nilai: 90 },
  { nama: "Dina", nilai: 65 },
  { nama: "Eka", nilai: 88 },
];

// Tampilkan semua siswa
console.log("=== DAFTAR NILAI KELAS ===");
data_kelas.forEach((siswa, index) => {
  let status = siswa.nilai >= 75 ? "LULUS" : "TIDAK LULUS";
  console.log(`${index + 1}. ${siswa.nama}: ${siswa.nilai} (${status})`);
});

// Hitung statistik
let total_nilai = data_kelas.reduce((total, siswa) => total + siswa.nilai, 0);
let rata_rata_kelas = total_nilai / data_kelas.length;
let siswa_lulus = data_kelas.filter((siswa) => siswa.nilai >= 75);

console.log("\n=== STATISTIK KELAS ===");
console.log("Rata-rata kelas:", rata_rata_kelas.toFixed(1));
console.log("Jumlah siswa lulus:", siswa_lulus.length);
console.log(
  "Persentase lulus:",
  ((siswa_lulus.length / data_kelas.length) * 100).toFixed(1) + "%"
);

2. Inventory Toko

let inventory_toko = ["laptop", "mouse", "keyboard", "monitor", "speaker"];
let stok_barang = [5, 20, 15, 8, 12];
let harga_barang = [8000000, 150000, 500000, 2500000, 800000];

function tampilkan_inventory() {
  console.log("=== INVENTORY TOKO ===");
  for (let i = 0; i < inventory_toko.length; i++) {
    console.log(`${i + 1}. ${inventory_toko[i]}`);
    console.log(`   Stok: ${stok_barang[i]} unit`);
    console.log(`   Harga: Rp ${harga_barang[i].toLocaleString()}`);
    console.log(
      `   Total nilai: Rp ${(
        stok_barang[i] * harga_barang[i]
      ).toLocaleString()}`
    );
    console.log("---");
  }
}

function cari_barang(nama_barang) {
  let index = inventory_toko.indexOf(nama_barang.toLowerCase());
  if (index !== -1) {
    console.log(`✅ ${nama_barang} ditemukan!`);
    console.log(`Stok: ${stok_barang[index]} unit`);
    console.log(`Harga: Rp ${harga_barang[index].toLocaleString()}`);
  } else {
    console.log(`❌ ${nama_barang} tidak ditemukan`);
  }
}

// Test
tampilkan_inventory();
cari_barang("laptop");
cari_barang("tablet");

Tips Array & Loop

💡 Index dimulai dari 0:

let buah = ["apel", "jeruk", "pisang"];
// Index:    0       1        2
console.log(buah[0]); // "apel"
console.log(buah[2]); // "pisang"

💡 Gunakan length untuk ukuran array:

let data = [1, 2, 3, 4, 5];
console.log("Jumlah data:", data.length); // 5

// Loop yang aman
for (let i = 0; i < data.length; i++) {
  console.log(data[i]);
}

💡 Hindari loop infinite:

// ❌ Loop tak terbatas
let counter = 0;
while (counter < 5) {
  console.log(counter);
  // Lupa increment counter!
}

// ✅ Loop yang benar
let counter = 0;
while (counter < 5) {
  console.log(counter);
  counter++; // Jangan lupa increment!
}

Ringkasan

Array adalah:

  • Kumpulan data dalam satu variabel
  • Index dimulai dari 0
  • Bisa berisi berbagai jenis data
  • Memiliki length (panjang)

Loop berguna untuk:

  • Mengakses semua data array
  • Melakukan operasi berulang
  • Membuat perhitungan
  • Memproses data secara otomatis

Method penting:

  • push() - tambah di akhir
  • pop() - hapus dari akhir
  • forEach() - loop modern
  • map() - transform data
  • filter() - saring data

Siap belajar Object dan JSON? Mari lanjut! 📊