JavaScript Lanjutan: Function & Event

1. Arrow Function — Cara Modern Nulis Fungsi

Arrow function (=>) adalah cara menulis fungsi yang lebih singkat dan modern.

// Fungsi biasa
function sapa(nama) {
  return `Halo, ${nama}!`;
}

// Arrow function — lebih singkat!
const sapa = (nama) => `Halo, ${nama}!`;

// Jika hanya 1 parameter, kurung boleh dihilangkan
const kuadrat = n => n * n;

console.log(sapa("Budi"));   // Halo, Budi!
console.log(kuadrat(5));     // 25

2. Array Methods — Olah Data dengan Elegan

Array punya method bawaan yang super berguna. Tiga yang paling sering dipakai:

const nilai = [75, 85, 60, 90, 55];

// .filter() — ambil yang memenuhi syarat
const lulus = nilai.filter(n => n >= 75);
console.log(lulus); // [75, 85, 90]

// .map() — ubah setiap item
const plusBonus = nilai.map(n => n + 5);
console.log(plusBonus); // [80, 90, 65, 95, 60]

// .forEach() — lakukan sesuatu untuk tiap item
nilai.forEach((n, index) => {
  console.log(`Siswa ${index+1}: nilai ${n}`);
});

// .find() — cari item pertama yang cocok
const pertamaDiatas80 = nilai.find(n => n > 80);
console.log(pertamaDiatas80); // 85

3. Event Listener — Reaksi terhadap Aksi User

Event listener "mendengarkan" aksi pengguna dan menjalankan kode saat aksi itu terjadi.

// HTML-nya:
// <button id="tombol">Klik Aku!</button>
// <p id="output"></p>

const tombol = document.getElementById('tombol');
const output = document.getElementById('output');

// Saat tombol diklik
tombol.addEventListener('click', () => {
  output.textContent = 'Kamu mengklik tombol! 🎉';
  output.style.color = 'green';
});

// Event lain yang sering dipakai:
// 'mouseover'  — saat mouse di atas elemen
// 'keydown'    — saat keyboard ditekan
// 'input'      — saat isi input berubah
// 'submit'     — saat form disubmit

4. Template Literal & Destructuring

// Template Literal — string dengan variabel
const nama = "Siti";
const nilai = 88;
const pesan = `Selamat, ${nama}! Nilaimu ${nilai}. ${nilai >= 75 ? '✅ Lulus' : '❌ Remedial'}`;
console.log(pesan); // Selamat, Siti! Nilaimu 88. ✅ Lulus

// Destructuring Array
const [pertama, kedua, ...sisa] = [10, 20, 30, 40];
console.log(pertama); // 10
console.log(sisa);    // [30, 40]

// Destructuring Object
const siswa = { nama: "Budi", kelas: "8A", nilai: 90 };
const { nama: namaSiswa, nilai: nilaiSiswa } = siswa;
console.log(`${namaSiswa}: ${nilaiSiswa}`); // Budi: 90

5. 🏗️ Mini Proyek: To-Do List

Gabungkan semua yang sudah dipelajari! Buat aplikasi to-do list sederhana:

<!-- HTML -->
<input id="input-tugas" placeholder="Tambah tugas...">
<button id="btn-tambah">+ Tambah</button>
<ul id="daftar-tugas"></ul>

/* JavaScript */
const daftarTugas = [];

const tampilkanTugas = () => {
  const ul = document.getElementById('daftar-tugas');
  ul.innerHTML = daftarTugas.map((tugas, i) => `
    <li>
      ${tugas.selesai ? '<s>' : ''} ${tugas.teks} ${tugas.selesai ? '</s>' : ''}
      <button onclick="selesaikan(${i})">✅</button>
      <button onclick="hapus(${i})">🗑️</button>
    </li>
  `).join('');
};

document.getElementById('btn-tambah')
  .addEventListener('click', () => {
    const input = document.getElementById('input-tugas');
    if (input.value.trim()) {
      daftarTugas.push({ teks: input.value, selesai: false });
      input.value = '';
      tampilkanTugas();
    }
  });

const selesaikan = (i) => { daftarTugas[i].selesai = true; tampilkanTugas(); };
const hapus = (i) => { daftarTugas.splice(i, 1); tampilkanTugas(); };