Naik level dari dasar ke menengah: Array, Object, Method, Scope, Closure, Callback, dan Error Handling — dengan analogi kehidupan nyata.
Gunakan tombol ← → atau panah keyboard untuk navigasi
Klik kartu mana saja untuk meloncat langsung ke topiknya.
let, const, varif / elsefor, whileArray seperti rak sepatu bernomor. Satu rak, banyak kotak, tiap kotak punya nomor (index) mulai dari 0.
Array dibuat dengan kurung siku [ ]. Setiap elemen punya index (posisi) yang dimulai dari 0, bukan 1. .length memberi tahu jumlah isinya.
const buah = ['apel', 'jeruk', 'mangga']; console.log(buah[0]); // apel (index 0) console.log(buah[2]); // mangga console.log(buah.length); // 3
arr[0].Antrian kasir. push = orang baru antri di belakang, pop = orang paling belakang keluar. unshift/shift = depan.
const antri = ['Budi', 'Sari'];
antri.push('Tono'); // tambah belakang -> [Budi, Sari, Tono]
antri.pop(); // hapus belakang -> [Budi, Sari]
antri.unshift('Rina'); // tambah depan -> [Rina, Budi, Sari]
antri.shift(); // hapus depan -> [Budi, Sari]
antri.splice(1, 1, 'X');// ganti index 1 -> [Budi, X]
Object seperti KTP: setiap data punya label (key) dan isi (value).
Object pakai kurung kurawal { } berisi pasangan key: value. Akses dengan dot (obj.key) atau bracket (obj["key"]).
const siswa = {
nama: 'Budi',
usia: 15,
kelas: '10A'
};
console.log(siswa.nama); // Budi (dot)
console.log(siswa['usia']); // 15 (bracket)
console.log(Object.keys(siswa)); // [nama,usia,kelas]
Menu restoran: ada kategori, di dalamnya ada item, di dalamnya ada harga — object di dalam object (nested).
Object bisa berisi object lain (nested) dan bisa berisi function (disebut method). Kata kunci this merujuk ke object itu sendiri.
const resto = {
nama: 'Warung Sahil',
menu: { makanan: 'Nasi Goreng', harga: 15000 },
sapa: function() {
return 'Selamat datang di ' + this.nama;
}
};
console.log(resto.menu.makanan); // Nasi Goreng (nested)
console.log(resto.menu.harga); // 15000
console.log(resto.sapa()); // method + this
this = "object ini sendiri".Mesin conveyor pabrik: map mengubah setiap barang, filter menyaring yang lolos QC, forEach hanya memeriksa satu per satu.
const nilai = [60, 75, 90, 50];
const lulus = nilai.filter(n => n >= 70); // [75, 90]
const dobel = nilai.map(n => n * 2); // [120,150,180,100]
nilai.forEach(n => console.log("nilai:", n));
Timbangan total belanja: reduce menjumlahkan semua koin menjadi satu total akhir.
reduce — akumulasi semua jadi satu nilai (total)find — cari elemen pertama yang cocoksome / every — apakah ada / semua memenuhi?includes — apakah nilai tertentu ada?const harga = [15000, 8000, 20000]; const total = harga.reduce((acc, h) => acc + h, 0); // 43000 const mahal = harga.find(h => h > 10000); // 15000 console.log(harga.some(h => h > 19000)); // true console.log(harga.includes(8000)); // true
Tukang sablon: teks bisa dipotong (slice), disambung, diganti (replace), dirapikan (trim).
.toUpperCase().toLowerCase().trim().split().replace().includes().slice()
let nama = ' budi santoso ';
console.log(nama.trim()); // 'budi santoso'
console.log(nama.trim().toUpperCase()); // 'BUDI SANTOSO'
console.log('halo dunia'.split(' ')); // ['halo','dunia']
console.log('apel'.replace('a','A')); // 'Apel'
console.log('belajar'.slice(0,3)); // 'bel'
Kalkulator ilmiah yang selalu siap di meja: membulatkan, mencari acak, terbesar, terkecil.
Math.round()Math.floor()Math.ceil()Math.random()Math.max()Math.min()Math.PI
console.log(Math.round(4.6)); // 5 console.log(Math.floor(4.9)); // 4 (bulat bawah) console.log(Math.ceil(4.1)); // 5 (bulat atas) console.log(Math.max(3,9,1)); // 9 console.log(Math.min(3,9,1)); // 1 // angka acak 1..6 (dadu) console.log(Math.floor(Math.random()*6)+1);
Jam tangan digital + kalender dinding yang bisa kamu tanya kapan saja.
const now = new Date(); console.log(now.getFullYear()); // tahun, mis 2026 console.log(now.getMonth()+1); // bulan (0-11, +1 biar manusiawi) console.log(now.getDate()); // tanggal console.log(now.getHours()); // jam console.log(now.getMinutes()); // menit
+1.Ruangan di rumah: barang di kamar tidur tidak bisa diambil dari dapur. Variabel "lokal" hanya hidup di dalam ruangannya.
let global = 'semua bisa lihat';
function ruang() {
let lokal = 'hanya di sini';
console.log(global); // ✓ boleh
console.log(lokal); // ✓ boleh
}
ruang();
// console.log(lokal); // ✗ ERROR: tidak terdefinisi
{ }).Brankas: function dalam "mengingat" variabel function luar, meski function luar sudah selesai — seperti kunci yang tetap bisa membuka brankas.
Closure = function yang "membawa" dan mengingat variabel dari tempat ia dibuat. Berguna untuk membuat data privat seperti counter.
function buatCounter() {
let hitung = 0; // variabel privat
return function() {
hitung++; // ingat 'hitung'
return hitung;
};
}
const counter = buatCounter();
console.log(counter()); // 1
console.log(counter()); // 2 (ingat nilai sebelumnya!)
hitung tetap tersimpan.Pesan pizza via telepon: kamu pesan, lalu lanjut aktivitas lain. Saat pizza siap, kasir menelepon balik (callback).
function pesanPizza(callback) {
console.log('Pizza dipesan...');
setTimeout(() => {
callback('🍕 Pizza siap!'); // dipanggil nanti
}, 1500);
}
pesanPizza(pesan => console.log(pesan));
console.log('Sambil nunggu, kerjakan hal lain');
setTimeout).Jaring pengaman pemanjat tebing: try = aksi memanjat, catch = jaring yang menangkap saat jatuh, finally = selalu dirapikan setelahnya.
try {
let hasil = JSON.parse('data rusak'); // memicu error
console.log(hasil);
} catch (error) {
console.log('❌ Tertangkap:', error.message);
} finally {
console.log('✅ Selesai (selalu jalan)');
}
// throw new Error('pesan custom'); // bikin error sendiri
arr[0] · arr.lengthpush / pop / shiftmap · filter · forEachreduce · find · includestoUpperCase / toLowerCasetrim · slicesplit · replaceincludesround · floor · ceilmax · minrandom · PInew Date()getFullYear · getMonthgetDate · getHoursgetMinutesKita gabungkan SEMUA yang dipelajari menjadi satu aplikasi nyata!
ArrayObjectmap filterreduceMath Datefunction
Lihat 3 slide berikutnya: struktur data → logika → demo penuh.
Produk disimpan sebagai Array of Objects — array yang setiap elemennya adalah object produk.
const produk = [
{ id: 1, nama: 'Nasi Goreng', harga: 15000, emoji: '🍳' },
{ id: 2, nama: 'Es Teh Manis', harga: 5000, emoji: '🍵' },
{ id: 3, nama: 'Ayam Bakar', harga: 20000, emoji: '🍗' },
{ id: 4, nama: 'Mie Goreng', harga: 12000, emoji: '🍜' },
{ id: 5, nama: 'Jus Jeruk', harga: 8000, emoji: '🍊' }
];
// keranjang awalnya kosong
let keranjang = [];
Function untuk menambah item, mengubah jumlah, dan menghitung total memakai find dan reduce.
function tambah(id) {
const p = produk.find(x => x.id === id); // find
const ada = keranjang.find(x => x.id === id);
if (ada) ada.qty++; // sudah ada → +1
else keranjang.push({ ...p, qty: 1 }); // baru → push
}
function total() {
return keranjang.reduce((t, item) => // reduce
t + item.harga * item.qty, 0);
}
function kembalian(bayar) {
return Math.max(0, bayar - total()); // Math
}
['a','b','c','d','e']?const buah=['apel','jeruk','mangga'], apa isi buah[2]?nama dari const s={nama:'Budi'}, kita tulis s.____ ?Tulis kode di editor lalu klik Jalankan. Cocokkan output dengan target.
[2, 4, 6]['APEL','JERUK']Kamu telah menyelesaikan BAB 10 — JavaScript Intermediate.
ArrayObjectmap/filter/reduce StringMathDate ScopeClosureCallback Error HandlingMini Project Kasir
DOM Manipulation & Event: membuat halaman web yang merespons klik, ketikan, dan interaksi pengguna secara langsung!
"Programmer hebat bukan yang tidak pernah error, tapi yang tahu cara menangkapnya." ✦
Front End Master Class · Modul BAB 10 v1.0