Belajar JavaScript
JavaScript adalah bahasa yang membuat halaman web bereaksi: tombol yang bisa diklik, data yang diambil dari server, tampilan yang berubah tanpa reload.
Kalau baru mulai, pahami dulu cara menyimpan data (variabel, array, object) dan cara menjalankan logika (fungsi, perulangan, kondisi). Setelah itu baru masuk ke DOM dan event, lalu ke kode asinkron seperti Promise, async/await, dan fetch.
Setiap artikel di sini punya contoh kode yang bisa langsung kamu coba, dan sebagian besar punya playground interaktif di dalamnya.
Latihan JavaScript interaktif ada di Hyper Sheets: materi, kuis, dan game per konsep, gratis.
Mulai dari sini
-
JavaScript · 21 menitApa Itu JavaScript? Panduan Lengkap untuk Pemula dari Nol
JavaScript adalah bahasa pemrograman yang membuat website interaktif. Pelajari dari nol: peran JS di web, variabel, tipe data, fungsi, array, object, DOM, event, dan async, lengkap dengan contoh kode.
-
JavaScript · 10 menitPerbedaan var, let, dan const di JavaScript (Penjelasan Lengkap Pemula)
Perbedaan var, let, dan const terletak pada scope, reassign, dan hoisting. Pelajari kapan pakai masing-masing lewat contoh kode, diagram, dan aturan praktis.
-
JavaScript · 11 menitFunction JavaScript Adalah: Pengertian, Cara Membuat, dan Contohnya
Function JavaScript adalah blok kode yang bisa dipanggil ulang. Pelajari anatomi fungsi, parameter, return, arrow function, dan beda fungsi vs method lewat contoh.
-
JavaScript · 10 menitDOM Adalah: Cara JavaScript Membaca dan Mengubah Halaman Web
DOM adalah representasi halaman HTML sebagai pohon objek yang bisa dibaca dan diubah JavaScript. Pahami apa itu DOM, document object model, dan DOM manipulation untuk pemula.
Semua artikel JavaScript lainnya
-
JavaScript · 9 menitlocalStorage JavaScript Adalah: Cara Menyimpan Data di Browser (Panduan Pemula)
localStorage JavaScript adalah tempat menyimpan data key/value di browser yang bertahan meski tab ditutup. Pelajari setItem, getItem, removeItem, clear, bedanya dengan sessionStorage & cookie, plus jebakan JSON.stringify.
-
JavaScript · 8 menitOperator Perbandingan JavaScript: Perbedaan == dan === (Loose vs Strict)
Operator perbandingan JavaScript dipakai untuk membandingkan dua nilai. Pelajari perbedaan == dan === (loose vs strict), type coercion, operator lain (>, <, !=, !==), dan jebakan yang sering membuat bug.
-
JavaScript · 9 menitSwitch Case JavaScript: Cara Kerja, break, dan Kapan Pakai (vs if-else)
Switch case JavaScript membandingkan satu nilai ke banyak case pakai perbandingan ketat (===). Pelajari cara kerja break, fall-through, default, dan kapan pilih switch dibanding if-else-if.
-
React · 8 menitConditional Rendering React Adalah: 4 Cara Menampilkan UI Berdasarkan Kondisi
Conditional rendering di React adalah menampilkan JSX berbeda berdasarkan kondisi. Pelajari 4 pola: if/else, ternary, operator &&, dan early return null, lengkap dengan tabel kapan pakai mana dan jebakan angka 0.
-
JavaScript · 9 menitString Method JavaScript Adalah: Panduan Lengkap Metode String untuk Pemula
String method adalah fungsi bawaan untuk mengolah teks di JavaScript. Pelajari .length, .toUpperCase(), .trim(), .slice(), .replace(), .split(), dan kenapa string bersifat immutable.
-
JavaScript · 10 menitthis JavaScript Adalah: Memahami Kata Kunci this untuk Pemula (Method, Fungsi, Arrow, Global)
this dalam JavaScript adalah kata kunci yang nilainya ditentukan oleh cara fungsi dipanggil. Pelajari 4 konteks this: method objek, fungsi biasa, arrow function, dan global, plus bind, call, apply.
-
JavaScript · 7 menitTry Catch JavaScript Adalah: Panduan Error Handling untuk Pemula
Try catch JavaScript adalah cara menangani error agar aplikasi tidak crash. Pelajari alur try, catch, finally, membaca error object (err.name, err.message), dan melempar error sendiri dengan throw, lengkap dengan playground interaktif.
-
JavaScript · 9 menitCara Menggunakan Fetch API JavaScript: Panduan Lengkap untuk Pemula
Cara pakai fetch() JavaScript untuk mengambil data dari API. Pahami fetch mengembalikan Promise, .then(res => res.json()), cek res.ok, .catch(), plus versi async/await, dengan contoh.
-
JavaScript · 9 menitHoisting JavaScript Adalah? Penjelasan Lengkap untuk Pemula (var, let, const)
Hoisting JavaScript adalah perilaku mengangkat deklarasi ke atas scope. Pahami var vs let/const, Temporal Dead Zone, dan function hoisting lewat diagram dan contoh kode.
-
JavaScript · 9 menitMap, Filter, Reduce di JavaScript: Perbedaan dan Cara Pakai untuk Pemula
Map, filter, dan reduce adalah tiga method array JavaScript untuk mengolah data. Pelajari perbedaan, cara kerja, dan kapan memakai masing-masing lewat contoh interaktif.
-
JavaScript · 11 menitPromise JavaScript Adalah: Cara Kerja, 3 State, dan Contoh untuk Pemula
Promise JavaScript adalah janji sebuah nilai di masa depan. Pahami 3 state promise, .then() .catch() .finally(), chaining, dan bedanya dengan callback, plus contoh.
-
JavaScript · 10 menitOperator Ternary Adalah: Cara Menyingkat If-Else di JavaScript (+ Contoh)
Operator ternary adalah cara singkat menulis if-else dalam satu baris di JavaScript memakai sintaks kondisi ? nilai1 : nilai2. Pelajari cara pakai, bedanya dengan if-else, dan contoh praktisnya.
-
JavaScript · 9 menitEvent JavaScript Adalah: Cara Kerja addEventListener untuk Pemula
Event JavaScript adalah sinyal saat pengguna berinteraksi dengan halaman. Pelajari addEventListener, event object, dan bedanya dengan onclick lewat contoh interaktif.
-
![Contoh kode: const a = [1, 2] const b = [3, 4] a.concat(b) const c = [...a, ...b]](/covers/spread-operator-adalah-800.webp)
JavaScript · 10 menitSpread Operator Adalah: Fungsi Tiga Titik (...) di JavaScript untuk Pemula
Spread operator adalah sintaks tiga titik (...) di JavaScript untuk menyalin dan menggabungkan array serta object. Pelajari cara pakai, bedanya dengan rest parameter, dan contoh praktisnya.
-
JavaScript · 9 menitTemplate Literals Adalah: Cara Pakai Backtick (`) dan ${} di JavaScript
Template literals adalah cara menulis string pakai backtick (`) di JavaScript agar bisa menyisipkan variabel dengan ${}. Pelajari bedanya dengan tanda plus, multiline, dan contohnya.
-
JavaScript · 11 menitDestructuring Adalah: Cara Ringkas Ambil Data dari Object & Array (JS)
Destructuring adalah cara ringkas mengekstrak nilai dari object dan array ke variabel di JavaScript. Pahami sintaks, default value, rename, rest, dan nested lewat contoh interaktif.
-
JavaScript · 11 menitPerulangan JavaScript: Cara Kerja For, While, For...of, dan forEach
Perulangan JavaScript adalah cara mengulang blok kode berkali-kali secara otomatis. Pelajari for, while, for...of, dan forEach lengkap dengan contoh, visualisasi langkah demi langkah, dan kesalahan umum pemula.
-
JavaScript · 12 menitObject JavaScript Adalah: Cara Menyimpan Data Terstruktur (Key & Value)
Object JavaScript adalah kumpulan data berpasangan key dan value. Pahami cara membuat, mengakses (dot vs bracket), mengubah, dan membedakannya dengan array lewat contoh interaktif.
-
JavaScript · 10 menitArrow Function Adalah: Cara Menulis Fungsi Ringkas di JavaScript (+ Beda dengan Function Biasa)
Arrow function adalah cara singkat menulis fungsi di JavaScript dengan sintaks =>. Pelajari perbedaannya dengan function biasa, aturan this, dan kapan sebaiknya dipakai.
-
JavaScript · 12 menitAsync Await Adalah: Cara Kerja, Contoh, dan Bedanya dengan Promise
Async await adalah cara menulis kode asynchronous JavaScript agar rapi seperti kode biasa. Pelajari cara kerjanya, perbedaannya dengan Promise & callback, plus contoh.
-
JavaScript · 10 menitClosure JavaScript Adalah: Penjelasan Sederhana + Contoh Kode
Closure JavaScript adalah fungsi yang mengingat variabel dari lingkup luarnya walau lingkup itu sudah selesai. Pelajari cara kerja, contoh, dan kegunaannya.
-
React · 10 menitPerbedaan Props dan State di React: Kapan Pakai Masing-Masing?
Perbedaan props dan state di React: props dikirim dari komponen induk dan read-only, state milik komponen sendiri dan bisa berubah. Lengkap dengan contoh kode & diagram.
-
JavaScript · 12 menitArray JavaScript Adalah: Pengertian, Cara Kerja, dan Method Wajibnya
Array adalah daftar berurutan untuk menyimpan banyak nilai dalam satu variabel. Pelajari apa itu array JavaScript, cara akses lewat indeks, dan method wajibnya.
-
JavaScript · 10 menitJSON Adalah: Pengertian, Format, dan Cara Menggunakannya (untuk Pemula)
JSON adalah format teks ringan untuk menyimpan dan bertukar data. Pelajari apa itu JSON, aturan format JSON, bedanya dengan objek JavaScript, serta JSON.parse & JSON.stringify.
-
React · 22 menitBelajar React dari Nol: Panduan Lengkap Komponen, Props, State, dan Hooks
Panduan lengkap belajar React untuk pemula, apa itu React, cara install dengan Vite, JSX, component, props dan state, useState dan useEffect, mini-project aplikasi catatan, kesalahan umum, dan FAQ.
-
TypeScript · 19 menitTypeScript untuk Developer JavaScript: Kenapa Harus Pindah?
Panduan lengkap TypeScript untuk developer JavaScript: apa itu TypeScript, perbedaan dengan JavaScript, tipe dasar, interface vs type, union, generics, cara setup, dan migrasi bertahap dari JS.
Latihan JavaScript langsung di browser
Materi interaktif, kuis, dan game JavaScript di Hyper Sheets. Gratis, tanpa install.