Tujuan Pembelajaran

Memahami konsep event loop dan call stack
Mengerti bagaimana JavaScript menangani asinkron

Analogi

Diagram


      Event Loop = Pelayan Restoran:

[Call Stack] = Nampan Pesanan (1 nampan)
[Web APIs] = Dapur (masak di belakang)
[Callback Queue] = Rak Penyimpanan
[Event Loop] = Pelayan (cek nampan → ambil dari rak)

Event loop memastikan JavaScript tetap responsif

Penjelasan Konsep

Kalau Flexbox adalah sistem layout SATU dimensi (satu baris atau satu kolom), maka CSS Grid adalah sistem layout DUA dimensi — baris DAN kolom secara bersamaan.

Flexbox sempurna untuk komponen (navbar, card, form), tapi untuk layout halaman secara keseluruhan (header, sidebar, konten, footer), Grid jauh lebih powerful dan ekspresif.

Dengan Grid, kamu bisa membuat layout kompleks seperti website berita, dashboard admin, atau galeri foto hanya dengan beberapa baris CSS — tanpa framework,

Tanpa library, tanpa hack.

Analoginya kayak spreadsheet Excel.

Grid membagi halaman menjadi kolom (seperti kolom A, B, C) dan baris (seperti baris 1, 2, 3).

Kamu bisa menempatkan elemen di sel manapun, menggabungkan beberapa sel (merge), dan mengatur ukuran setiap kolom dan baris dengan presisi.

Bedanya dengan Excel: Grid bersifat responsif dan adaptif — kolom bisa menyusut, baris bisa bertambah,

Dan elemen bisa berpindah posisi otomatis sesuai ukuran layar.

Mengaktifkan Grid

Sama seperti Flexbox, Grid diaktifkan dengan display: grid pada elemen container.

Setelah itu, semua anak langsung menjadi grid items yang bisa ditempatkan di dalam grid.

Mendefinisikan Grid Structure

grid-template-columns — Menentukan kolom apa saja yang ada.

Contoh:

grid-template-columns: 200px 1fr 1fr; → Tiga kolom: pertama 200px, sisanya dibagi sama rata
grid-template-columns: repeat(3, 1fr); → Tiga kolom sama lebar
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); → Responsif!

Kolom minimal 250px, sisanya otomatis

grid-template-rows — Menentukan baris apa saja yang ada.

Sama konsepnya dengan columns.

gap — Jarak antar grid cells (seperti flexbox gap).

grid-template-areas — Cara paling intuitif untuk mendefinisikan layout! Kamu memberi nama area, lalu membuat “peta” visual dengan string. Contoh:

.container {
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Ini membuat layout yang sangat mudah dibaca dan dipelihara!

Menempatkan Item

grid-column — Menentukan kolom mana yang ditempati item.

grid-column: 1 / 3; → Dari garis kolom 1 sampai garis kolom 3 (menempati 2 kolom)
grid-column: span 2; → Menempati 2 kolom dari posisi saat ini

grid-row — Menentukan baris mana yang ditempati item. Sama konsepnya dengan grid-column.

grid-area — Shorthand untuk grid-row-start, grid-column-start, grid-row-end, grid-column-end.

Atau nama area dari grid-template-areas.

Responsive Grid dengan Media Queries

Grid + media queries = layout yang adaptif sempurna:

.container {
  grid-template-columns: 1fr; /* Mobile: 1 kolom */
}
@media (min-width: 768px) {
  .container {
    grid-template-columns: repeat(2,

1fr); /* Tablet: 2 kolom */
  }
}
@media (min-width: 1024px) {
  .container {
    grid-template-columns: repeat(4, 1fr); /* Desktop: 4 kolom */
  }
}

Grid vs Flexbox — Kapan Menggunakan Apa?

Gunakan Flexbox untuk layout satu dimensi: satu baris atau satu kolom.

Contoh: navbar, tombol grup, card alignment, centering.

Gunakan Grid untuk layout dua dimensi: baris DAN kolom.

Contoh: layout halaman, dashboard, galeri foto, form kompleks.

Mereka bisa digabungkan!

Grid untuk layout besar, Flexbox untuk alignment di dalam setiap grid cell.

Kenapa Grid penting?

Karena Grid adalah sistem layout native CSS yang paling powerful.

Sebelum Grid, developer harus menggunakan framework seperti Bootstrap (yang menambah 100+ KB ke website) hanya untuk membuat layout grid sederhana. Sekarang, browser punya kemampuan grid built-in yang lebih fleksibel dan lebih ringan.

Contoh Kode

javascript

// EVENT LOOP DEMONSTRASI
console.log('1. Start');

setTimeout(() => {
  console.log('5. Timeout 0ms');
}, 0);

Promise.resolve().then(() => {
  console.log('4. Promise'); // Microtask prioritas tinggi
});

console.log('2. Middle');
console.log('3. End');

// Output: 1, 2, 3, 4, 5
// Urutan: Sync → Microtask → Macrotask

Penjelasan Kode

Baris 1: Sync. Baris 3-6: setTimeout (macrotask). Baris 8-10: Promise (microtask). Urutan: Sync → Microtask → Macrotask.

Prompt AI

Jelaskan perbedaan microtask queue dan macrotask queue. Kenapa Promise selalu dijalankan sebelum setTimeout?

Pertanyaan Reflektif

Jalankan kode di atas. Apakah outputnya sesuai ekspektasi? Coba ubah urutannya.

Event Loop: Mesin Waktu JavaScript