Skip to Content

100+ Konsep JavaScript yang Perlu Anda Ketahui

Oke, dengarkan. Anda ingin belajar JavaScript. Bahasa yang luar biasa sekaligus mengerikan. Di satu sisi, Anda bisa membangun apa saja dengannya. Di sisi lain, ini adalah bahasa yang aneh, jelek, dan dikelilingi oleh "dystopian wasteland" berupa framework dan library.

Saya tidak bermaksud kasar, tapi... selamat datang di JavaScript 101.

Saya akan uraikan semua yang perlu Anda ketahui dari video itu, sedetail mungkin, dengan sudut pandang yang jarang orang lihat. Mari kita bedah mesin aneh ini.

Materi Pembelajaran Komprehensif: JavaScript 101

Bagian 1: Konteks (Mengapa Benda Ini Ada?)

Konsep intinya, JavaScript dibuat tahun 1993 oleh Brendan Eich di Netscape. Tujuannya satu: membuat website statis (HTML murni) menjadi interaktif.

Hari ini, implementasi standarnya disebut ECMAScript, dan ini adalah satu-satunya bahasa yang berjalan secara native di browser Anda (selain Web Assembly, tapi itu cerita lain).

Sudut Pandang Saya (Yang Jarang Dilihat):

JavaScript memenangkan perang browser bukan karena dia yang terbaik. Dia menang karena dia yang pertama dan satu-satunya. Seluruh ekosistem web modern dibangun di atas fondasi yang dibuat dalam 10 hari. Pahami ini, dan semua keanehannya akan mulai terasa... sedikit lebih masuk akal.

1.1: Runtime (Tempat Eksekusi)

  • Browser: Tempat aslinya. Semua browser modern punya engine JS (seperti V8 di Chrome).
  • Server: Berkat Node.js dan Dino, Anda bisa menjalankan JS di luar browser. Ini membuka pintu untuk backend, tools, dan lainnya.

1.2: Cara Kerja (Interpreted vs. JIT)

  • Ini adalah scripting language, dieksekusi baris per baris (interpreted).
  • TAPI... di bawah kap, engine modern seperti V8 melakukan Just-In-Time (JIT) Compilation. Kode Anda diubah menjadi machine code super cepat saat dieksekusi.

Sudut Pandang Saya:

Jangan pusingkan soal "interpreted vs. compiled". Anggap saja begini: V8 lebih pintar dari Anda dan akan membuat kode Anda berjalan cepat. Fokus saja pada apa yang Anda tulis, bukan bagaimana V8 menjalankannya.

👉 Apa yang bisa kamu lakukan sekarang:

Buka browser apapun (Chrome, Firefox), tekan F12 (atau Cmd+Opt+I di Mac) untuk membuka DevTools, klik tab Console. Anda sudah siap menulis JS.

Bagian 2: Dasar-Dasar Kode (Mulai Menulis)

2.1: Menghubungkan ke HTML

Anda perlu file HTML. Di dalamnya, Anda bisa pakai tag <script>:

  1. Inline: Tulis kode langsung di dalam <script> ...kode di sini... </script>.
  2. External: <script src="file-saya.js"></script>. (Ini cara yang benar).

2.2: Hello, World!

Gunakan console.log() untuk mencetak sesuatu ke DevTools Console. Ini adalah alat debugging terbaik Anda.

JavaScript

console.log('Halo, dunia... atau neraka?');

👉 Apa yang bisa kamu lakukan sekarang:

Buat file index.html dan app.js. Di index.html, tambahkan <script src="app.js"></script> di dalam <body>. Di app.js, tulis console.log('File saya terhubung!');. Buka index.html di browser dan periksa Console.

Bagian 3: Variabel (Tempat Menyimpan Data)

JavaScript adalah bahasa yang dynamically typed. Anda tidak perlu mendeklarasikan tipe data (string, int).

3.1: Cara Deklarasi (let, const, var)

  • let: Cara modern. Variabel yang nilainya bisa diubah nanti.JavaScript
    let umur = 25;
umur = 26; // Tidak masalah
  • const: Cara modern. Variabel yang nilainya konstan dan tidak bisa diubah setelah diinisialisasi.JavaScript
    const nama = 'Pandu';
// nama = 'Okta'; // Ini akan error!
  • var: Cara lama. JANGAN GUNAKAN INI. Serius. Abaikan keberadaannya. (Kita akan bahas alasannya di bagian Scope).

3.2: Tipe Data Primitif

Ada 7 tipe data primitif:

  1. Number: Angka (misal: 10, 3.14).
  2. String: Teks (misal: 'Halo', "JavaScript").
  3. Boolean: true atau false.
  4. undefined: Nilai default variabel yang belum diisi.
  5. null: Representasi eksplisit dari "tidak ada nilai".
  6. Symbol: Unik dan abadi.
  7. BigInt: Untuk angka yang super besar.

Apapun yang bukan primitif adalah Object.

3.3: Perang Titik Koma (Semicolon)

Secara teknis, titik koma (;) itu opsional. Parser JavaScript akan menambahkannya secara otomatis (disebut Automatic Semicolon Insertion / ASI).

Sudut Pandang Saya:

Debat soal titik koma itu buang-buang waktu. Pilih satu (pakai atau tidak pakai) dan konsisten. Gunakan linter seperti ESLint untuk memaksa tim Anda mengikutinya, lalu fokus pada masalah yang lebih besar.

👉 Apa yang bisa kamu lakukan sekarang:

Di file app.js Anda, buat satu variabel const berisi nama Anda dan satu variabel let berisi usia Anda. Coba cetak keduanya dengan console.log. Lalu, coba ubah nilai const tadi dan lihat error yang muncul di konsol.

Bagian 4: Scope (Area Hidup Variabel)

Scope menentukan di mana variabel Anda bisa diakses. Ini adalah sumber 90% bug di kode pemula.

  • Global Scope: Dideklarasikan di luar fungsi/blok. Bisa diakses dari mana saja. (Ini berbahaya).
  • Function Scope: Dideklarasikan di dalam fungsi. Hanya bisa diakses di dalam fungsi itu.
  • Block Scope: Dideklarasikan di dalam kurung kurawal { ... } (seperti if atau for). Hanya bisa diakses di dalam blok itu.

let dan const adalah Block Scoped. Ini yang Anda inginkan.

var adalah Function Scoped.

Sudut Pandang Saya (Kenapa var Jelek):

var tidak menghargai Block Scope. Jika Anda mendefinisikan var di dalam if, variabel itu "diangkat" (hoisted) ke atas fungsi. Ini perilaku yang tidak intuitif dan menyebabkan bug yang sulit dilacak.

JavaScript

if (true) {
  var nama = 'Faisal'; // Ini di-hoist
  let umur = 25;       // Ini block-scoped
}

console.log(nama); // 'Faisal' (Bocor!)
console.log(umur); // Error! (Ini yang kita mau)

👉 Apa yang bisa kamu lakukan sekarang:

Buat pernyataan if (true) { ... }. Di dalamnya, deklarasikan var x = 1; dan let y = 2;. Coba console.log(x) dan console.log(y) di luar blok if itu. Lihat sendiri perbedaannya.

Bagian 5: Functions (Pabrik Kode Anda)

Fungsi adalah blok bangunan utama. Mereka mengambil input (argumen) dan mengembalikan output (return value).

5.1: Definisi vs. Ekspresi

  • Definition/Statement: Cara klasik.JavaScript
    function sapa(nama) {
  return `Halo, ${nama}`;
}
  • Expression: Fungsi adalah object, jadi bisa disimpan di variabel.JavaScript
    const sapa = function(nama) {
  return `Halo, ${nama}`;
};

5.2: Arrow Functions (ES6)

Sintaks modern yang lebih singkat.

JavaScript

const sapa = (nama) => {
  return `Halo, ${nama}`;
};

// Atau lebih singkat lagi jika hanya 1 baris
const tambah = (a, b) => a + b;

5.3: this (Sumber Kebingungan Terbesar)

this adalah keyword yang merujuk pada object berdasarkan bagaimana fungsi itu dipanggil.

  • Dipanggil di Global Scope: this adalah window (di browser).
  • Dipanggil sebagai method object: this adalah object itu sendiri.JavaScript
    const orang = {
  nama: 'Okta',
  bicara: function() { console.log(this.nama); }
};
orang.bicara(); // 'Okta', karena 'this' adalah 'orang'

Sudut Pandang Saya (Mengapa Arrow Function Dibuat):

Fungsi function klasik punya this-nya sendiri. Arrow Function => TIDAK punya this-nya sendiri. Dia "meminjam" this dari scope di luarnya. Ini SANGAT berguna dan menyelesaikan banyak masalah this yang membingungkan, terutama di dalam callback.

5.4: Closures (Memori Tersembunyi)

Saat fungsi di dalam fungsi mengakses variabel dari fungsi luarnya, JS membuat closure. Data di fungsi luar tetap hidup di Heap memory bahkan setelah fungsi luar selesai dieksekusi.

Sudut Pandang Saya:

Anda tidak perlu "membuat" closure. Anda menggunakannya setiap saat tanpa sadar. Ini adalah cara JS mengelola state dalam fungsi.

5.5: Pass by Value vs. Pass by Reference

  • Primitif (Number, String, Boolean): Pass by Value. Salinan nilainya yang dikirim.JavaScript
    let a = 10;
let b = a; // b adalah salinan dari a
b = 20;    // a tetap 10
  • Objects (Termasuk Array): Pass by Reference. Yang dikirim adalah alamat ke lokasi memori.JavaScript
    let obj1 = { nama: 'A' };
let obj2 = obj1; // obj2 menunjuk ke object yang SAMA
obj2.nama = 'B'; // obj1.nama juga ikut berubah jadi 'B'

👉 Apa yang bisa kamu lakukan sekarang:

  1. Buat arrow function yang menerima dua angka dan mengembalikan perkaliannya.
  2. Buat satu object user dengan properti nama. Buat variabel admin dan set nilainya ke user. Ubah admin.nama. Cek console.log(user.nama). Lihat apa yang terjadi.

Bagian 6: Objects dan class (Cara JS Mengelola Warisan)

6.1: Object Literal

Cara termudah membuat object:

JavaScript

const mobil = {
  merek: 'Tesla',
  tahun: 2025,
  klakson: function() { console.log('Beep!'); }
};

6.2: Prototypal Inheritance (Mesin Asli JS)

Ini adalah inti JavaScript. JavaScript TIDAK punya class asli.

Setiap object punya properti tersembunyi yang me-link ke prototype-nya. Saat Anda mencoba mengakses properti yang tidak ada di object itu, JS akan mencarinya di prototype-nya, lalu prototype dari prototype itu, dan seterusnya. Ini disebut Prototype Chain.

6.3: class (Gula Sintetis)

ES6 memperkenalkan keyword class. Tapi jangan tertipu.

Sudut Pandang Saya:

class di JavaScript hanyalah syntactic sugar (pemanis sintaks) di atas Prototypal Inheritance. Ini dibuat agar developer dari bahasa object-oriented (seperti Java/C#) merasa lebih nyaman. Di baliknya, itu tetaplah prototype yang sama.

JavaScript

class Mobil {
  constructor(merek) {
    this.merek = merek;
  }

  klakson() {
    console.log('Beep!');
  }
}
const mobilSaya = new Mobil('Tesla');

👉 Apa yang bisa kamu lakukan sekarang:

Buat class Hewan dengan constructor yang menerima nama. Beri dia method bicara(). Lalu, buat instance baru dari Hewan itu dan panggil method bicara().

Bagian 7: Data Structures (Bawaan)

  • Array: Koleksi data terindeks. [1, 2, 3]
  • Set: Koleksi data yang unik. new Set([1, 1, 2, 3]) akan berisi {1, 2, 3}.
  • Map: Seperti object (key-value), tapi key-nya bisa berupa tipe data apa saja (bukan cuma string) dan lebih mudah di-loop.
  • WeakMap / WeakSet: Versi Map/Set yang propertinya bisa di-garbage collected (dihapus dari memori) jika tidak ada referensi lain.

Sudut Pandang Saya:

90% waktu Anda, Anda akan pakai Array dan Object. Gunakan Map jika Anda butuh key non-string. Gunakan Set jika Anda perlu memastikan datanya unik.

👉 Apa yang bisa kamu lakukan sekarang:

Buat sebuah Array berisi nama-nama yang ada duplikasinya. Gunakan new Set(namaArrayTadi) untuk melihat versi uniknya.

Bagian 8: Asynchronous (Superpower JS)

JS itu single-threaded. Dia hanya bisa melakukan satu hal dalam satu waktu. Tapi dia punya Event Loop yang membuatnya non-blocking.

Dia bisa "mendelegasikan" tugas yang lama (seperti fetch data API atau setTimeout) ke threadpool terpisah. Sambil menunggu, JS lanjut mengerjakan kode berikutnya. Saat tugas tadi selesai, hasilnya dimasukkan ke antrian untuk dieksekusi oleh main thread.

Ini adalah ilusi multitasking.

8.1: Callback (Cara Lama)

Mengirim fungsi sebagai argumen, yang akan dipanggil nanti.

JavaScript

setTimeout(function() {
  console.log('3 detik berlalu');
}, 3000);
console.log('Ini jalan duluan');

Jika terlalu banyak callback bersarang, Anda masuk ke Callback Hell.

8.2: Promise (Cara Lebih Baik)

Sebuah object yang merepresentasikan nilai yang mungkin ada di masa depan (bisa resolved/sukses atau rejected/gagal).

JavaScript

fetch('https://api.example.com/data')
  .then(response => response.json()) // Handle sukses
  .then(data => console.log(data))
  .catch(error => console.error(error)); // Handle error

8.3: Async / Await (Cara Modern & Terbaca)

Pemanis sintaks di atas Promise.

  • Fungsi harus ditandai async.
  • Gunakan await untuk "menunggu" Promise selesai tanpa memblokir main thread.
  • Harus dibungkus try...catch untuk error handling.

JavaScript

async function ambilData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Gagal ambil data:', error);
  }
}

👉 Apa yang bisa kamu lakukan sekarang:

Buat fungsi async baru. Di dalamnya, gunakan await dengan fetch untuk mengambil data dari API publik (coba: https://jsonplaceholder.typicode.com/todos/1). Jangan lupa console.log hasilnya dan bungkus dengan try...catch.

Bagian 9: Ekosistem (The Wasteland)

9.1: Modules (import/export)

Cara membagi kode Anda ke beberapa file.

  • export: Mengekspos fungsi/variabel agar bisa dipakai file lain.
  • import: Mengambil fungsi/variabel dari file lain.

JavaScript

// util.js
export const tambah = (a, b) => a + b;
export default function sapa() { /*...*/ }

// app.js
import sapa, { tambah } from './util.js';

9.2: npm (Node Package Manager)

Ini adalah package manager terbesar di dunia. Tempat Anda mengunduh kode orang lain (dependencies) agar Anda tidak perlu membuat ulang semuanya.

Sudut Pandang Saya:

npm adalah berkah sekaligus kutukan. Anda bisa membangun aplikasi kompleks dengan cepat, tapi Anda juga mengimpor ratusan megabyte kode ke folder node_modules Anda. Selamat datang di "dystopian wasteland".

👉 Apa yang bisa kamu lakukan sekarang:

(Membutuhkan Node.js terinstal) Buka terminal, buat folder baru, jalankan npm init -y. Lalu instal package pertama Anda: npm install lodash. Lihat folder node_modules yang ajaib itu.

Bagian 10: Dunia Nyata (Browser & Framework)

10.1: DOM (Document Object Model)

Browser mengubah HTML Anda menjadi struktur tree yang disebut DOM. JavaScript bisa memanipulasi DOM ini.

  • document.querySelector('.nama-class'): Mencari 1 elemen.
  • document.querySelectorAll('p'): Mencari semua elemen <p>.
  • element.addEventListener('click', fungsiCallback): Mendengarkan event (seperti klik).

10.2: Imperative vs. Declarative (Kenapa Framework Ada)

  • Imperative (Vanilla JS): "Cari tombol ini. Saat diklik, cari teks ini. Ubah warnanya jadi merah." Anda memberi tahu caranya langkah demi langkah.
  • Declarative (Framework - React, Vue, Svelte): "Warna teks ini harus merah jika state-nya adalah 'error'." Anda hanya memberi tahu apa hasil akhirnya.

Sudut Pandang Saya:

Anda tidak akan dibayar untuk menulis document.querySelector berulang kali. Framework ada karena memanipulasi DOM secara manual (imperatif) itu lambat dan rawan bug. Framework membuat UI Anda menjadi fungsi dari data (reaktif). Saat data berubah, UI berubah otomatis.

Bagian 11: Deployment (Bundling & Tools)

Kode Anda di puluhan file import/export tidak bisa langsung jalan di browser lama. Anda perlu Module Bundler (seperti Vite atau Webpack).

Tugasnya: mengambil semua file JS Anda (dan CSS, gambar, dll) dan "membungkusnya" menjadi satu (atau beberapa) file JavaScript yang teroptimasi yang siap dibaca browser.

Anda juga perlu Linter (seperti ESLint) untuk mengecek kualitas kode dan TypeScript (JS dengan tipe data) agar hidup Anda tidak terlalu sengsara.

Kesimpulan: 99 Masalah Anda

Itu dia 101 hal tentang JavaScript. Anda sudah tahu let, const, function, =>, class palsu, prototype, event loop, promise, dan async/await. Anda tahu npm adalah lubang hitam dan framework itu perlu.

Sekarang Anda punya 99 masalah, dan JavaScript adalah penyebab semuanya.

✅ Checklist Next Step (Praktek Langsung)

Berikut adalah roadmap Anda untuk benar-benar mempraktekkan ini. Jangan hanya dibaca. Lakukan.

  1. [ ] Setup Dasar:
    • Buat index.html dan app.js.
    • Hubungkan keduanya pakai tag <script>.
    • Buka di browser dan pastikan console.log('Halo') muncul di DevTools.
  2. [ ] Manipulasi DOM (Imperative):
    • Di index.html, buat satu <button id="tombol-klik">Klik Saya</button> dan satu <p id="teks-hasil">...</p>.
    • Di app.js, gunakan document.querySelector untuk mengambil kedua elemen itu.
    • Gunakan tombolKlik.addEventListener('click', ...)
    • Di dalam fungsi event listener itu, ubah isi paragraf: teksHasil.textContent = 'Saya baru saja diklik!';
  3. [ ] Data & Fungsi:
    • Buat sebuah Array berisi object. Contoh: const users = [{ id: 1, nama: 'Pandu' }, { id: 2, nama: 'Okta' }].
    • Buat fungsi tampilkanUser() yang me-looping array tersebut (users.forEach(...)) dan melakukan console.log untuk setiap nama.
    • Panggil fungsi itu.
  4. [ ] Asynchronous (The Real World):
    • Buat fungsi async function ambilDataTodo()
    • Di dalamnya, gunakan try...catch.
    • Di dalam try, gunakan await fetch('https://jsonplaceholder.typicode.com/todos/1').
    • Ambil datanya, ubah ke JSON (await response.json()).
    • console.log data title-nya saja.
    • Panggil fungsi ambilDataTodo() itu.
  5. [ ] Pindah ke Ekosistem:
    • Instal Node.js dari website resminya.
    • Belajar menggunakan bundler modern. Saya sangat merekomendasikan VITE.
    • Jalankan npm create vite@latest, pilih "Vanilla" dan "JavaScript".
    • Lihat struktur file yang dibuat. Pindahkan kode Anda ke sana.
    • Mulai proyek kecil pertama Anda.

Anda sudah dapat pengantarnya. Sekarang berhenti menonton video dan mulailah menulis kode yang jelek. Itu satu-satunya cara untuk menjadi lebih baik.


Glosarium Anti-Awam: Dari Nol ke Paham

1. Scope (Lingkup)

  • Definisi Teknis: Ruang atau konteks di mana variabel dan fungsi dapat diakses. Ada Global Scope, Function Scope, dan Block Scope.
  • Analogi (Rumah Susun):
    • Global Scope (Lobi): Variabel yang Anda taruh di lobi (misal: var nama = 'Dunia'). Siapapun di lantai manapun bisa melihat dan mengubahnya. Ini berbahaya, karena bisa jadi ada yang iseng menggantinya.
    • Function Scope (Apartemen): Variabel yang Anda taruh di dalam apartemen Anda (function() { ... }). Hanya orang di dalam apartemen itu yang bisa melihatnya.
    • Block Scope (Kamar Tidur): Variabel let atau const di dalam {...} (seperti if atau for). Ini seperti kamar tidur di dalam apartemen Anda. Lebih privat lagi.
  • Mengapa Ini Penting: Ini adalah tentang keamanan data. Anda tidak mau variabel penting Anda (misal: dataUser) bisa diubah seenaknya dari mana saja (Global Scope). let dan const memberi Anda kendali (Block Scope) untuk mengunci variabel Anda di tempat yang seharusnya.

2. Hoisting (Pengangkatan)

  • Definisi Teknis: Perilaku JavaScript di mana deklarasi variabel (var) dan fungsi "diangkat" ke atas scope mereka saat kode dieksekusi.
  • Studi Kasus (Ujian Aneh):
    • Bayangkan Anda mengerjakan ujian. Anda menulis:
      1. (Soal 1) console.log(nilaiSaya);
      2. (Soal 2) var nilaiSaya = 100;
    • Anda berharap (Soal 1) akan error karena nilaiSaya belum ada. Tapi nyatanya, hasilnya adalah undefined.
    • Inilah Hoisting: JavaScript (si pengawas ujian) sebelum memulai, dia "mengintip" semua lembar jawaban Anda, mencari semua var, dan mencatatnya di papan tulis: "Oke, ada variabel namanya nilaiSaya." Tapi dia belum tahu nilainya, jadi dia tandai sebagai undefined.
    • Saat (Soal 1) dieksekusi, JS melihat ke papan tulis: "Oh, nilaiSaya sudah ada, tapi nilainya undefined."
    • Mengapa Ini Penting: Ini adalah perilaku aneh yang hanya dimiliki var. Ini membuat alur kode tidak logis. Inilah alasan utama Anda HARUS pakai let dan const, karena mereka tidak di-hoist dengan cara aneh ini (mereka masuk ke Temporal Dead Zone dan akan error, yang mana JAUH LEBIH BAIK).

3. Closure (Penutup)

  • Definisi Teknis: Sebuah fungsi yang "mengingat" scope leksikal di mana ia dibuat, bahkan ketika fungsi tersebut dieksekusi di luar scope tersebut.
  • Analogi (Ransel Ajaib):
    • Bayangkan Anda punya fungsi buatKoki('Pizza'). Fungsi ini membuat dan mengembalikan fungsi baru bernama masak.
    • Saat buatKoki dibuat, ia punya variabel lokal resep = 'Pizza'.
    • Saat buatKoki selesai dan mengembalikan si masak, si masak ini membawa ransel ajaib (Closure).
    • Di dalam ransel itu ada resep = 'Pizza'.
    • Jadi, kapanpun dan dimanapun Anda memanggil masak(), dia akan membuka ranselnya, melihat resep, dan memasak 'Pizza'. Dia ingat resep dari tempat dia dilahirkan.
  • Mengapa Ini Penting: Ini adalah cara JavaScript mengelola state privat. Ini adalah fondasi dari banyak design pattern canggih, memungkinkan Anda "menyembunyikan" data di dalam fungsi.

4. Pass by Value vs. Pass by Reference

  • Definisi Teknis: Cara JavaScript memberikan argumen ke fungsi. Tipe primitif (string, number) dioper by value. Tipe object (object, array) dioper by reference.
  • Studi Kasus (Memberi Alamat vs. Memberi Fotokopi):
    • Pass by Value (Fotokopi):
      • Anda punya KTP asli (variabel let umur = 20).
      • Anda memberikannya ke fungsi ubahUmur(). Fungsi ini menerima fotokopi dari KTP Anda.
      • Fungsi itu mencoret-coret KTP fotokopian (mengubah umur jadi 30).
      • KTP asli Anda? Tetap aman, nilainya 20.
    • Pass by Reference (Alamat Rumah):
      • Anda punya sertifikat rumah (variabel let user = { nama: 'Pandu' }).
      • Anda memberikannya ke fungsi ubahNama(). Fungsi ini menerima alamat rumah Anda (referensi ke object di memori).
      • Fungsi itu pergi ke alamat rumah Anda dan mengecat ulang pintunya (mengubah user.nama = 'Faisal').
      • Sertifikat rumah Anda? Masih sama, tapi saat Anda pulang, rumah Anda (object aslinya) sudah berubah.
  • Mengapa Ini Penting: Ini adalah sumber bug paling umum #2. Anda bisa saja tanpa sadar mengubah data penting di satu tempat, dan seluruh aplikasi Anda jadi kacau, karena Anda mengoper object (alamatnya) alih-alih menyalinnya.

5. Prototypal Inheritance (Warisan Prototipe)

  • Definisi Teknis: Mekanisme di mana sebuah object dapat "mewarisi" properti dan method dari object lain melalui prototype chain.
  • Analogi (Warisan Keluarga):
    • Anda (object) ingin mengendarai mobil. Anda tidak punya.
    • JavaScript bertanya: Siapa "Bapak" (prototype) Anda? Oh, Manusia.
    • JavaScript mengecek: Apakah Manusia punya mobil? Tidak.
    • Siapa "Kakek" (prototype-nya Manusia)? Oh, Mamalia.
    • Apakah Mamalia punya mobil? Tidak.
    • Siapa "Buyut" (prototype-nya Mamalia)? Oh, Object.prototype (leluhur semua object).
    • Apakah Object.prototype punya mobil? Tidak.
    • Oke, Anda benar-benar tidak punya mobil. Hasilnya: undefined.
  • Mengapa Ini Penting: class yang Anda lihat di JS itu palsu. Itu hanya topeng. Di baliknya, mesin warisannya bekerja seperti ini. Memahami ini membantu Anda melakukan debugging canggih.

6. Event Loop (Siklus Kejadian)

  • Definisi Teknis: Mekanisme non-blocking yang memungkinkan JavaScript (yang single-threaded) menangani operasi asynchronous dengan memindahkan tugas ke threadpool dan mengeksekusi callback dari antrian saat call stack kosong.
  • Analogi (Koki di Restoran):
    • Anda (Main Thread / Call Stack): Anda adalah satu-satunya Koki di dapur. Anda hanya bisa mengerjakan 1 resep dalam satu waktu.
    • Pelayan (Browser API / Event Loop): Pelanggan memesan setTimeout(..., 3000) (Steak, butuh 3 detik).
    • Anda (Koki) tidak mau menunggu 3 detik. Anda berteriak ke Pelayan: "Hey! Urus pesanan Steak ini, beri tahu saya kalau sudah siap!"
    • Anda (Koki) lanjut mengerjakan pesanan lain (kode sinkronus) seperti console.log('membuat salad').
    • Antrian (Callback Queue): Setelah 3 detik, Pelayan menaruh Steak yang sudah siap di meja antrian.
    • Event Loop: Pelayan terus-menerus mengecek Anda (Koki). "Koki sibuk?" "Ya." "Koki sibuk?" "Ya." ... "Koki sibuk?" "Tidak! (Call Stack kosong)."
    • Eksekusi: Saat Anda senggang, Pelayan segera memberikan Steak (callback) itu ke Anda untuk disajikan.
  • Mengapa Ini Penting: Inilah yang membuat website terasa cepat. Tanpa ini, jika Anda mengambil data dari API (yang butuh 2 detik), seluruh website Anda akan freeze selama 2 detik.

7. Imperative vs. Declarative

  • Definisi Teknis: Dua paradigma pemrograman. Imperative fokus pada bagaimana mencapai hasil (langkah-langkahnya). Declarative fokus pada apa hasil yang diinginkan (hasil akhirnya).
  • Studi Kasus (Membuat UI):
    • Imperative (Vanilla JS): "Tolong buatkan saya UI."
      1. Pergi ke pabrik HTML, buat <div>.
      2. Ambil <div> tadi, beri dia id="konten".
      3. Pergi ke pabrik HTML lagi, buat <p>.
      4. Isi <p> itu dengan teks "Halo".
      5. Ambil <div> tadi, masukkan <p> ke dalamnya.
      6. Ambil <body>, masukkan <div> ke dalamnya.
        (Anda memberi tahu setiap langkahnya).
    • Declarative (React/Vue): "Tolong buatkan saya UI."
      • Anda hanya menulis: <Konten><p>Halo</p></Konten>.
      • Anda mendeklarasikan hasil akhir yang Anda mau. Biarkan React (si tukang) yang pusing memikirkan langkah 1-6 untuk mewujudkannya.
  • Mengapa Ini Penting: Kode declarative jauh lebih mudah dibaca, dikelola, dan di-debug. Seluruh framework modern (React, Vue, Svelte) dibangun di atas prinsip ini.

Cara Mengajari Orang Lain (Agar Anda Makin Paham)

Sekarang, ambil satu teman, pacar, atau bahkan kucing Anda. Coba ajarkan mereka konsep dasar ini. Berikut adalah "contekan" teks yang bisa Anda gunakan.

(Mulai di sini)

"Hei, sini deh. Kamu tahu kan website itu bisa interaktif, bisa diklik, ada animasinya? Itu semua kerjaan JavaScript.

Bayangin HTML itu kayak rangka rumah. CSS itu cat dan furnitur-nya. Nah, JavaScript itu listrik dan tukang ledeng-nya. Dia yang bikin tombol lampu berfungsi, bikin keran air nyala.

Cara kerjanya gini:

1. Kita Butuh 'Kotak Penyimpanan' (Variabel)

Kalau kita mau 'ingat' sesuatu, misal nama kamu, kita taruh di 'kotak'. Di JS, kita pakai const atau let.

const nama = 'Budi';

let umur = 20;

(const itu kotak yang disegel permanen, let itu kotak yang isinya bisa diganti).

2. Kita Butuh 'Pabrik' (Fungsi)

Daripada nulis perintah yang sama berulang-ulang, kita buat 'pabrik' yang bisa kita panggil kapan aja.

function sapa(orang) { console.log('Halo, ' + orang); }

Sekarang aku tinggal panggil sapa('Budi'); atau sapa('Ani');. Praktis kan?

3. Kita Hubungkan ke HTML (DOM)

Sekarang bagian serunya. Gimana caranya JS 'menyentuh' HTML?

Bayangin di HTML kamu ada tombol: <button id="tombol-saya">Klik!</button>

Di JS, kita 'pegang' tombol itu:

const tombol = document.querySelector('#tombol-saya');

Lalu kita 'pasang pendengar' di tombol itu:

tombol.addEventListener('click', function() { alert('Kamu ngeklik aku!'); });

Sekarang, setiap kali tombol itu diklik, JS akan menjalankan 'pabrik' fungsi tadi.

4. Gimana Kalau Nunggunya Lama? (Asynchronous)

Masalahnya, JS itu aslinya cuma bisa ngerjain 1 hal dalam satu waktu. Kayak koki yang cuma punya 1 tangan.

Gimana kalau kita minta dia mengambil data dari internet (yang butuh waktu 3 detik)? Masa website-nya freeze 3 detik?

Nggak. JS itu pintar. Dia punya 'pelayan' (Event Loop).

Si Koki (JS) bilang ke Pelayan: 'Tolong ambil data ini, kalau udah dapat, taruh di antrian ya!'

Sambil nunggu, si Koki lanjut kerja yang lain (bikin UI tetap responsif).

Pas si Koki lagi nganggur, dia cek antrian: 'Oh, data udah datang!' Baru dia proses.

Itulah kenapa website terasa cepat walau banyak hal terjadi di belakang layar.

Sekarang, coba kamu...

Buka browser, tekan F12, klik Console. Coba buat 'kotak' const nama = '...isi namamu...' terus panggil alert(nama);. Selamat, kamu baru aja nulis JavaScript."

(Selesai)

👉 Apa yang bisa kamu lakukan sekarang

  1. Praktekkan Glosarium: Ambil 2-3 istilah dari glosarium di atas. Coba jelaskan ke saya (atau rekam suara Anda sendiri) menggunakan analogi Anda sendiri.
  2. Jalankan Skrip Mengajar: Benar-benar ajarkan konsep dasar (4 poin di atas) ke orang lain. Perhatikan di bagian mana mereka bingung. Itu tandanya di bagian itulah pemahaman Anda belum solid.
  3. Refleksi: Setelah mengajar, tuliskan 1 hal yang paling sulit Anda jelaskan. Mari kita diskusikan bagian itu lebih dalam.

GLM-4.6 Agent Mode Just Killed Every AI App Builder (it's FREE)