Daftar (array) dan perulangan

Satu variabel menyimpan satu nilai. Tapi CV-mu punya banyak keahlian: HTML, CSS, JavaScript, dan seterusnya. Membuat variabel keahlian1, keahlian2, keahlian3 jelas bukan jalan keluar.

Untuk menyimpan banyak nilai sekaligus, ada arrayArrayDaftar berisi banyak nilai berurutan, seperti daftar belanja.Penjelasan lengkap →: sebuah daftar.

Membuat array

Daftarnya ditulis di dalam kurung siku, dipisah koma:

const keahlian = ['HTML', 'CSS', 'JavaScript'];
console.log(keahlian);

Setiap isi punya nomor urut, dan nomor urut mulai dari 0, bukan 1. Ini aneh di awal, tapi semua bahasa pemrograman begitu.

console.log(keahlian[0]); // HTML
console.log(keahlian[2]); // JavaScript
console.log(keahlian.length); // 3

keahlian[0] artinya “ambil isi bernomor 0”, dan .length memberi tahu jumlah isinya.

Menambah dan membuang isi

keahlian.push('Git');        // tambah di akhir
console.log(keahlian.length); // 4

keahlian.pop();              // buang yang terakhir

Menariknya, array yang dibuat dengan const tetap boleh ditambah isinya. Yang dilarang cuma mengganti seluruh kotaknya dengan array lain.

Perulangan: mengerjakan sesuatu berkali-kali

Bagaimana kalau kita ingin mencetak semua keahlian satu per satu? Kita tidak mau menulis console.log sebanyak isinya. Di sinilah perulanganPerulanganMenyuruh komputer mengerjakan hal yang sama berulang-ulang tanpa menulis ulang kodenya.Penjelasan lengkap → berguna.

Bentuk paling enak dibaca untuk array adalah for...of:

for (const item of keahlian) {
  console.log(`Aku bisa ${item}`);
}

Dibaca: “untuk setiap item di dalam keahlian, jalankan isi kurung kurawal.” Pada putaran pertama item berisi 'HTML', putaran kedua 'CSS', dan seterusnya sampai habis. Panjang arraynya berapa pun, kodenya tetap sama.

Ada juga perulangan berhitung, cocok kalau kamu butuh nomor putaran:

for (let i = 1; i <= 3; i++) {
  console.log(`Putaran ke-${i}`);
}

Tiga bagian di dalam kurung: mulai dari mana (i = 1), lanjut selama apa (i <= 3), dan setiap putaran ditambah apa (i++, artinya tambah satu).

Menggabungkan: array dan fungsi

Dua pelajaran terakhir bisa dipadukan. Fungsi di bawah menerima array angka dan menjumlahkan semuanya:

function jumlahkan(daftar) {
  let total = 0;
  for (const angka of daftar) {
    total = total + angka;
  }
  return total;
}

console.log(jumlahkan([10, 20, 30])); // 60

Pola let total = 0 lalu menambahkan di tiap putaran adalah salah satu pola paling sering dalam pemrograman.

Coba sendiri

Ada array belanjaan berisi harga. Tugasmu menghitung totalnya dan mencetak daftarnya.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Daftar belanjaan</title>
</head>
<body>
  <p>Lihat panel Console di bawah.</p>
  <script>
    const barang = ['Buku', 'Pulpen', 'Penggaris'];
    const harga = [12000, 5000, 13000];

    // Tantangan 1: pakai for...of untuk mencetak setiap nama barang

    function totalHarga(daftar) {
      let total = 0;
      // Tantangan 2: jumlahkan semua angka di daftar dengan perulangan
      return total;
    }

    console.log('Total:', totalHarga(harga)); // harus 30000

    // Tantangan 3: push satu barang dan satu harga baru, lalu cetak total lagi
  </script>
</body>
</html>

Tantangannya:

1. Pakai for...of untuk mencetak setiap nama barang di barang.
2. Isi fungsi totalHarga supaya menjumlahkan semua angka di array harga. Totalnya harus 30000.
3. Tambahkan satu barang lagi dengan push (harga dan nama), lalu pastikan totalnya ikut berubah.