JavaScript adalah bahasa pemrograman yang membuat halaman web menjadi hidup dan interaktif — mulai dari tombol yang bereaksi saat diklik, form yang memvalidasi input, sampai data yang muncul di layar tanpa perlu me-reload halaman. JavaScript adalah satu-satunya bahasa yang berjalan secara native di dalam setiap browser (Chrome, Firefox, Safari, Edge), sehingga jadi keterampilan wajib bagi siapa pun yang ingin serius belajar web development. Kalau HTML adalah kerangka dan CSS adalah baju, maka JavaScript adalah otak yang membuat website bisa berpikir dan merespons.

Di panduan ini kamu akan belajar JavaScript benar-benar dari nol: apa itu JavaScript, cara kerjanya di browser, konsep inti (variabel, tipe data, fungsi, array, object), cara berinteraksi dengan halaman lewat DOM dan event, sedikit pengenalan async, sampai satu mini-project yang menggabungkan semuanya. Tidak perlu install apa-apa untuk mulai — cukup browser yang sudah ada di komputermu.

Apa Itu JavaScript?

JavaScript adalah bahasa pemrograman tingkat tinggi yang awalnya diciptakan pada tahun 1995 untuk menambahkan interaktivitas ke halaman web. Sekarang JavaScript sudah jauh berkembang: ia tidak cuma jalan di browser, tapi juga di server (lewat Node.js), di aplikasi mobile (React Native), bahkan di aplikasi desktop (Electron). Satu bahasa, dipakai di mana-mana.

Nama “JavaScript” sering bikin salah paham. Banyak pemula mengira JavaScript sama dengan Java — padahal keduanya bahasa yang benar-benar berbeda, sama bedanya seperti “mobil” dan “mobil-mobilan”. Java dipakai untuk aplikasi enterprise dan Android; JavaScript lahir untuk web. Persamaan namanya cuma strategi pemasaran zaman dulu.

Ada tiga bahasa inti yang membangun setiap website, dan penting untuk paham perannya masing-masing:

HTML menentukan struktur — apa saja yang ada di halaman (judul, paragraf, gambar, tombol). Kalau kamu belum kenal HTML, mulai dari panduan belajar HTML untuk pemula dulu supaya fondasinya kuat.
CSS menentukan tampilan — warna, ukuran, layout, dan posisi.
JavaScript menentukan perilaku — apa yang terjadi ketika pengguna berinteraksi.

Untuk gambaran cepat, bandingkan ini. Tanpa JavaScript, sebuah tombol hanyalah elemen diam:

<button>Klik Saya</button>

Dengan JavaScript, tombol itu bisa merespons:

<button onclick="alert('Kamu mengklik tombolnya!')">Klik Saya</button>

Sekarang saat diklik, muncul pesan. Itulah inti dari JavaScript: membuat halaman bereaksi terhadap pengguna. Kamu juga bisa mendalami definisi ini secara interaktif lewat pelajaran “Apa itu JavaScript” di Hyper Sheets yang bisa langsung dikerjakan di browser tanpa setup.

Cara Kerja JavaScript di Browser

Singkatnya: browser membaca file HTML dari atas ke bawah, dan setiap kali menemukan kode JavaScript, browser menjalankannya menggunakan komponen bernama JavaScript engine. Engine inilah yang menerjemahkan kodemu menjadi instruksi yang dimengerti komputer. Chrome dan Node.js memakai engine bernama V8, Firefox memakai SpiderMonkey.

Alurnya kurang lebih begini. Ketika kamu membuka sebuah website, browser mengunduh file HTML, lalu membangun sebuah struktur di memori bernama DOM (Document Object Model) — semacam peta pohon dari seluruh elemen halaman. JavaScript kemudian bisa membaca dan mengubah peta ini secara real-time: menambah elemen baru, mengganti teks, mengubah warna, atau menghapus sesuatu. Setiap perubahan yang kamu buat lewat JavaScript langsung tercermin di layar. Kita akan bahas DOM lebih dalam nanti.

JavaScript juga bersifat single-threaded — artinya ia mengerjakan satu hal dalam satu waktu, baris demi baris. Ini penting dipahami karena menjelaskan kenapa ada konsep “async” (asynchronous) yang akan kita sentuh di bagian akhir: agar operasi lambat seperti mengambil data dari internet tidak membuat seluruh halaman membeku.

Kenapa Harus Belajar JavaScript?

Karena JavaScript adalah bahasa paling universal di dunia web dan permintaan pasarnya paling tinggi. Hampir mustahil menjadi web developer tanpa menguasainya, dan hampir semua teknologi frontend modern dibangun di atasnya. Berikut alasan konkretnya:

Satu bahasa, banyak platform — Browser, server (Node.js), mobile (React Native), desktop (Electron). Belajar sekali, pakai di banyak tempat.
Permintaan pasar tinggi — Buka lowongan web developer mana pun, hampir pasti JavaScript disyaratkan. Ini bahasa dengan jumlah lowongan terbanyak secara global.
Ekosistem raksasa — React, Vue, Angular, Svelte, Next.js, dan ribuan paket npm dibangun di atas JavaScript. Menguasai dasarnya membuka pintu ke semuanya.
Entry point termudah ke programming — Kamu bisa langsung mencoba di browser tanpa install compiler, tanpa konfigurasi ribet. Ini bahasa pertama yang ideal untuk pemula.

Kalau kamu benar-benar baru dan bahkan belum pernah membuat halaman web, ada baiknya pahami dulu bagaimana HTML, CSS, dan JavaScript bekerja bersama sebelum menyelam terlalu jauh ke kode — supaya kamu punya konteks tentang bagian mana yang sedang kamu ubah.

Cara Menjalankan JavaScript

Ada tiga cara umum menjalankan JavaScript, dan cara paling gampang untuk pemula adalah lewat Console browser. Buka browser, tekan F12 (atau klik kanan lalu pilih Inspect), lalu buka tab Console. Ketik ini dan tekan Enter:

console.log("Halo dunia!")

Selamat — kamu baru saja menjalankan JavaScript! console.log() adalah cara paling sering dipakai untuk menampilkan output dan mengecek isi variabel saat belajar maupun saat debugging.

Cara kedua adalah menyisipkan JavaScript langsung di file HTML menggunakan tag <script>:

<!DOCTYPE html>
<html>
  <body>
    <h1>Website Saya</h1>
    <script>
      console.log("JavaScript jalan dari dalam HTML!")
    </script>
  </body>
</html>

Cara ketiga — dan yang paling rapi untuk proyek nyata — adalah menaruh kode di file terpisah, misalnya script.js, lalu memanggilnya dari HTML:

<body>
  <h1>Website Saya</h1>
  <script src="script.js"></script>
</body>

Memisahkan JavaScript ke file sendiri membuat kode lebih mudah dirawat, sama seperti kita memisahkan CSS ke file .css. Sebagai kebiasaan baik, tag <script> biasanya diletakkan tepat sebelum penutup </body> supaya HTML selesai dimuat lebih dulu sebelum JavaScript mencoba mengaksesnya.

Variabel: Wadah untuk Menyimpan Data

Variabel adalah “wadah” bernama untuk menyimpan data supaya bisa dipakai lagi nanti. Di JavaScript modern kamu mendeklarasikan variabel dengan let atau const:

let nama = "Budi"
let umur = 22
const website = "belajarweb.dev"  // tidak bisa diubah lagi

Perbedaan ketiganya penting dipahami:

let — variabel yang nilainya bisa diubah setelah dibuat. Pakai ini kalau kamu tahu nilainya akan berubah (misal skor yang bertambah).
const — kependekan dari “constant”, nilainya tetap setelah dideklarasikan. Ini pilihan default yang bagus: pakai const dulu, ganti ke let hanya kalau kamu benar-benar butuh mengubah nilainya.
var — cara lama dari sebelum tahun 2015. Hindari di kode baru karena aturan scope-nya membingungkan dan sering jadi sumber bug.

Contoh perbedaan let dan const secara praktik:

let skor = 0
skor = 10        // boleh, karena pakai let
skor = skor + 5  // skor sekarang 15

const pi = 3.14
pi = 3.14159     // ERROR! const tidak bisa diubah

Aturan penamaan variabel: gunakan huruf, angka, _, dan $; tidak boleh diawali angka; dan konvensinya memakai gaya camelCase (namaLengkap, totalHarga) — kata pertama huruf kecil, kata berikutnya diawali huruf besar. Nama variabel yang deskriptif membuat kodemu jauh lebih mudah dibaca. Mau langsung praktik sambil belajar? Ada materi variabel interaktif di Hyper Sheets yang bisa kamu kerjakan langsung di browser dengan latihan bertahap.

Tipe Data di JavaScript

Tipe data menentukan jenis nilai yang disimpan sebuah variabel — apakah teks, angka, benar/salah, daftar, atau kumpulan properti. JavaScript punya beberapa tipe data dasar yang wajib kamu kenali:

// String (teks) — selalu di dalam tanda kutip
let pesan = "Halo!"

// Number (angka) — bilangan bulat maupun desimal
let skor = 100
let pi = 3.14

// Boolean (benar/salah) — cuma dua nilai
let sudahLogin = true
let sudahBayar = false

// Array (daftar berurutan)
let bahasa = ["HTML", "CSS", "JavaScript"]

// Object (kumpulan properti berpasangan)
let user = {
  nama: "Budi",
  umur: 22,
  aktif: true
}

// Null & Undefined
let kosong = null        // sengaja dikosongkan
let belumDiisi           // undefined (belum ada nilai)

Ada satu perbedaan penting yang perlu kamu tanam sejak awal. String, number, boolean, null, dan undefined disebut tipe primitif — nilainya disalin apa adanya. Sementara array dan object disebut tipe reference — variabelnya menyimpan “alamat” ke data, bukan salinan data itu sendiri. Ini menjelaskan banyak kejutan yang sering bikin pemula bingung nanti.

Untuk mengecek tipe sebuah nilai, gunakan operator typeof:

console.log(typeof "Halo")   // "string"
console.log(typeof 42)       // "number"
console.log(typeof true)     // "boolean"
console.log(typeof [1, 2])   // "object" (array secara teknis object)

Kalau ingin memahami setiap tipe secara mendalam beserta jebakannya, materi tipe data di Hyper Sheets menjelaskannya lengkap dengan latihan konversi antar tipe.

Operator: Menghitung dan Membandingkan

Operator adalah simbol untuk melakukan operasi pada nilai — menghitung, membandingkan, atau menggabungkan. Ada tiga kelompok yang paling sering dipakai.

Operator aritmetika untuk berhitung:

let a = 10
let b = 3

console.log(a + b)  // 13 (tambah)
console.log(a - b)  // 7  (kurang)
console.log(a * b)  // 30 (kali)
console.log(a / b)  // 3.333... (bagi)
console.log(a % b)  // 1  (sisa bagi / modulo)

Operator perbandingan menghasilkan boolean (true/false):

console.log(5 > 3)      // true
console.log(5 === 5)    // true  (sama persis, nilai & tipe)
console.log(5 === "5")  // false (beda tipe!)
console.log(5 == "5")   // true  (== hanya bandingkan nilai)
console.log(5 !== 3)    // true  (tidak sama dengan)

Perhatikan === (tiga sama dengan) versus == (dua sama dengan). Selalu pakai === dalam praktik, karena ia membandingkan nilai dan tipe sekaligus, sehingga menghindari konversi otomatis yang sering menyebabkan bug halus. == melakukan konversi diam-diam (5 == "5" jadi true) yang jarang kamu inginkan.

Operator logika untuk menggabungkan kondisi:

let umur = 20
let punyaSIM = true

console.log(umur >= 18 && punyaSIM)  // true  (&& = DAN, dua-duanya harus benar)
console.log(umur < 17 || punyaSIM)   // true  (|| = ATAU, salah satu benar cukup)
console.log(!punyaSIM)               // false (! = NOT, membalik nilai)

Fungsi: Blok Kode yang Bisa Dipakai Ulang

Fungsi adalah blok kode yang diberi nama supaya bisa dipanggil berulang kali tanpa menulis ulang logikanya. Fungsi menerima input (disebut parameter), mengolahnya, dan biasanya mengembalikan output dengan return:

// Deklarasi fungsi
function sapa(nama) {
  return `Halo, ${nama}!`
}

console.log(sapa("Budi"))  // "Halo, Budi!"
console.log(sapa("Sari"))  // "Halo, Sari!"

Fungsi bisa punya lebih dari satu parameter, dan bisa diberi nilai default:

function hitungTotal(harga, pajak = 0.11) {
  return harga + harga * pajak
}

console.log(hitungTotal(100000))       // 111000 (pakai pajak default)
console.log(hitungTotal(100000, 0.05)) // 105000 (pajak dikustom)

Sejak 2015, JavaScript juga punya cara penulisan yang lebih ringkas bernama arrow function:

// Fungsi biasa
function kuadrat(x) {
  return x * x
}

// Arrow function — sama fungsinya, lebih ringkas
const kuadratArrow = (x) => x * x

console.log(kuadratArrow(5))  // 25

Arrow function (=>) sangat umum dipakai di framework modern seperti React, terutama karena ringkas dan cocok dipakai sebagai argumen untuk fungsi lain. Kalau kamu masih bingung bedanya dengan fungsi biasa — termasuk soal this yang berperilaku berbeda — coba pelajaran arrow functions yang membahasnya lengkap dengan latihan. Untuk pemahaman menyeluruh tentang parameter, return, dan scope, materi fungsi dasar adalah titik awal yang bagus.

Kondisi: Membuat Keputusan dengan If/Else

Kondisi membuat program bisa mengambil keputusan — menjalankan kode tertentu hanya jika suatu syarat terpenuhi. Struktur dasarnya if, else if, dan else:

let skor = 85

if (skor >= 90) {
  console.log("A - Excellent!")
} else if (skor >= 80) {
  console.log("B - Bagus!")
} else if (skor >= 70) {
  console.log("C - Cukup")
} else {
  console.log("Perlu belajar lagi")
}
// Output: "B - Bagus!"

Untuk kondisi sederhana, ada bentuk ringkas bernama ternary operator — cara singkat menulis if/else dalam satu baris:

let umur = 20
let status = umur >= 18 ? "Dewasa" : "Anak-anak"
console.log(status)  // "Dewasa"

Bacanya: “jika umur >= 18 maka Dewasa, kalau tidak Anak-anak”. Kalau pilihannya banyak dan membandingkan satu nilai yang sama, switch sering lebih rapi daripada rentetan else if:

let hari = "Senin"

switch (hari) {
  case "Sabtu":
  case "Minggu":
    console.log("Akhir pekan!")
    break
  default:
    console.log("Hari kerja")
}
// Output: "Hari kerja"

Loop: Mengulang Pekerjaan

Loop (perulangan) memungkinkan kamu menjalankan blok kode berkali-kali tanpa menyalin-tempel. Ini salah satu konsep paling menghemat waktu di programming. Bentuk paling dasar adalah for:

// For loop klasik — ulang 5 kali
for (let i = 1; i <= 5; i++) {
  console.log(`Iterasi ke-${i}`)
}

Untuk meloop isi sebuah array, for...of jauh lebih bersih:

let framework = ["React", "Vue", "Svelte"]

for (let fw of framework) {
  console.log(fw)  // React, lalu Vue, lalu Svelte
}

Ada juga while, yang mengulang selama syaratnya masih benar:

let mundur = 3
while (mundur > 0) {
  console.log(mundur)
  mundur--
}
console.log("Mulai!")
// Output: 3, 2, 1, Mulai!

Dan khusus untuk array, method forEach sering jadi cara favorit karena ekspresif:

framework.forEach((fw, index) => {
  console.log(`${index + 1}. ${fw}`)
})
// 1. React
// 2. Vue
// 3. Svelte

Array dan Method-nya yang Wajib Dikuasai

Array adalah daftar nilai yang berurutan, dan array methods adalah salah satu bagian terpenting JavaScript modern — kamu akan memakainya setiap hari. Sebelum masuk ke method canggih, kenali dulu operasi dasarnya:

let buah = ["apel", "mangga", "jeruk"]

console.log(buah.length)    // 3 (jumlah elemen)
console.log(buah[0])        // "apel" (indeks mulai dari 0!)
buah.push("pisang")         // tambah di akhir
buah.pop()                  // hapus dari akhir

Perhatikan bahwa indeks array selalu dimulai dari 0, bukan 1. Elemen pertama adalah buah[0], elemen kedua buah[1], dan seterusnya. Ini sumber bug klasik untuk pemula.

Sekarang bagian yang paling penting — empat method transformasi yang akan kamu pakai terus-menerus:

let angka = [1, 2, 3, 4, 5]

// map — ubah setiap elemen, hasilkan array baru
let dikaliDua = angka.map(n => n * 2)
// [2, 4, 6, 8, 10]

// filter — ambil hanya yang memenuhi syarat
let genap = angka.filter(n => n % 2 === 0)
// [2, 4]

// find — cari satu elemen pertama yang cocok
let pertamaGenap = angka.find(n => n % 2 === 0)
// 2

// reduce — gabungkan seluruh array jadi satu nilai
let total = angka.reduce((acc, n) => acc + n, 0)
// 15

Keempat method ini — map, filter, find, dan reduce — adalah fondasi cara berpikir “deklaratif” di JavaScript modern. Alih-alih menulis loop manual, kamu mendeskripsikan apa yang kamu mau. Perhatikan bahwa map dan filter selalu menghasilkan array baru dan tidak mengubah array asli; ini kebiasaan yang sangat penting terutama saat nanti kamu belajar React.

Coba Sendiri: Array Methods Interaktif

Teori saja tidak cukup — coba klik-klik demo di bawah ini dan perhatikan bagaimana array berubah setiap kali kamu memilih method yang berbeda:

Array Method

Input: [1, 2, 3, 4, 5, 6, 7, 8]

.map(n => n * 2)

Output: [2, 4, 6, 8, 10, 12, 14, 16]

Transformasi setiap elemen

Setelah bermain dengan demo di atas, kamu bisa lanjut mengeksplorasi lebih banyak method dengan data yang lebih realistis lewat playground array methods interaktif di Hyper Sheets.

Object: Menyimpan Data Terstruktur

Object adalah cara JavaScript menyimpan data yang berpasangan antara nama (disebut key atau properti) dan nilainya. Kalau array cocok untuk daftar, object cocok untuk menggambarkan satu entitas dengan banyak atribut:

let user = {
  nama: "Budi",
  umur: 22,
  email: "[email protected]",
  aktif: true
}

// Mengakses properti — dua cara
console.log(user.nama)       // "Budi" (dot notation)
console.log(user["email"])   // "[email protected]" (bracket notation)

// Mengubah dan menambah properti
user.umur = 23
user.kota = "Bandung"        // properti baru ditambahkan

Object juga bisa berisi fungsi — yang kalau berada di dalam object disebut method:

let kalkulator = {
  nilai: 0,
  tambah(n) {
    this.nilai = this.nilai + n
    return this.nilai
  }
}

console.log(kalkulator.tambah(5))   // 5
console.log(kalkulator.tambah(3))   // 8

Kata kunci this di dalam method merujuk ke object itu sendiri. Array dan object sering dikombinasikan — misalnya sebuah daftar user berupa array yang setiap elemennya adalah object. Struktur inilah yang kamu terima setiap kali mengambil data dari API, jadi menguasainya sangat penting.

DOM Manipulation: Mengubah Halaman dengan JavaScript

DOM (Document Object Model) adalah representasi halaman web sebagai object JavaScript yang bisa kamu baca dan ubah. Inilah jembatan antara kodemu dan apa yang dilihat pengguna di layar. Lewat DOM, JavaScript bisa mengambil elemen HTML, mengganti isinya, mengubah gayanya, atau menambah elemen baru:

// Ambil elemen dari halaman
let judul = document.querySelector("h1")
let tombol = document.getElementById("btn-submit")

// Ubah isi teks
judul.textContent = "Judul Baru!"

// Ubah gaya (style)
judul.style.color = "orange"

// Buat dan tambahkan elemen baru
let paragraf = document.createElement("p")
paragraf.textContent = "Paragraf ini dibuat oleh JavaScript."
document.body.appendChild(paragraf)

Perhatikan judul.style.color = "orange" — ini sebenarnya menulis inline style langsung ke elemen, sama seperti menaruh atribut style di HTML. Kalau kamu belum paham konsep inline versus stylesheet terpisah, penjelasan tentang inline akan membuat bagian ini jauh lebih jelas.

Supaya kebayang bagaimana browser menyusun elemen HTML menjadi pohon object, lihat visualisasi DOM tree interaktif — lalu lanjut ke materi DOM manipulation untuk latihan yang lebih terstruktur.

DOM manipulation adalah pondasi dari semua framework frontend. React, Vue, dan Svelte pada dasarnya melakukan DOM manipulation secara otomatis di balik layar — tapi memahami cara kerjanya secara manual akan membuatmu developer yang jauh lebih baik dan tidak “buta” saat framework berperilaku tak terduga.

Event: Membuat Halaman Merespons Pengguna

Event adalah sinyal bahwa sesuatu terjadi di halaman — pengguna mengklik tombol, mengetik di form, menggerakkan mouse, atau menekan tombol keyboard. JavaScript “mendengarkan” event ini dan menjalankan fungsi sebagai respons. Ini cara utama membuat halaman jadi interaktif:

let tombol = document.getElementById("btn-submit")

// Jalankan fungsi saat tombol diklik
tombol.addEventListener("click", () => {
  alert("Tombol diklik!")
})

addEventListener menerima dua hal: nama event ("click", "input", "submit", "keydown", dan lain-lain) dan fungsi yang akan dijalankan saat event itu terjadi. Fungsi ini sering disebut event handler atau callback.

Setiap event handler menerima sebuah event object yang berisi informasi tentang apa yang terjadi:

let input = document.getElementById("nama")

input.addEventListener("input", (event) => {
  // event.target adalah elemen yang memicu event
  console.log("Teks sekarang:", event.target.value)
})

Contoh di atas mencetak isi input setiap kali pengguna mengetik — dasar dari validasi form real-time. Menguasai event adalah langkah besar: begitu kamu bisa menangkap aksi pengguna dan mengubah DOM sebagai respons, kamu sudah bisa membangun aplikasi web sungguhan.

Async JavaScript: Menangani Operasi yang Butuh Waktu

Async (asynchronous) adalah cara JavaScript menangani operasi yang butuh waktu — seperti mengambil data dari internet — tanpa membuat seluruh halaman membeku menunggu. Karena JavaScript single-threaded, tanpa async sebuah permintaan data yang lambat akan menghentikan segalanya. Cara modern menangani ini adalah async/await:

// Mengambil data dari API
async function ambilData() {
  try {
    let response = await fetch("https://api.example.com/users")
    let data = await response.json()
    console.log(data)
  } catch (error) {
    console.error("Gagal mengambil data:", error)
  }
}

Kata kunci await berarti “tunggu sampai operasi ini selesai sebelum lanjut ke baris berikutnya”, tapi tanpa membekukan halaman. try/catch di sekelilingnya menangani kemungkinan error — misalnya koneksi putus atau server bermasalah. Fungsi yang memakai await harus ditandai dengan async.

Di balik async/await sebenarnya ada konsep bernama Promise — sebuah janji bahwa suatu nilai akan tersedia di masa depan. Bentuk lama menuliskannya dengan .then():

fetch("https://api.example.com/users")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Gagal:", error))

Kedua kode di atas melakukan hal yang sama; async/await hanya membuatnya lebih mudah dibaca karena terlihat seperti kode biasa yang berjalan dari atas ke bawah. Konsep async sering bikin pemula pusing, jadi coba mainkan visualisasi async/await untuk melihat urutan eksekusinya langkah demi langkah secara visual.

Mini-Project: Membuat To-Do List Sederhana

Sekarang mari gabungkan semua yang sudah kita pelajari — array, fungsi, DOM, dan event — menjadi satu aplikasi mungil: daftar tugas (to-do list) yang bisa menambah item. Ini contoh sempurna karena menyentuh hampir semua konsep dasar sekaligus.

Pertama, siapkan HTML-nya:

<input id="input-tugas" placeholder="Tulis tugas...">
<button id="tombol-tambah">Tambah</button>
<ul id="daftar-tugas"></ul>

Lalu, inilah JavaScript yang menghidupkannya:

// 1. Ambil elemen-elemen dari DOM
const input = document.getElementById("input-tugas")
const tombol = document.getElementById("tombol-tambah")
const daftar = document.getElementById("daftar-tugas")

// 2. Array untuk menyimpan semua tugas
let tugas = []

// 3. Fungsi untuk menggambar ulang daftar ke layar
function render() {
  daftar.innerHTML = ""  // kosongkan dulu
  tugas.forEach((item) => {
    const li = document.createElement("li")
    li.textContent = item
    daftar.appendChild(li)
  })
}

// 4. Event: saat tombol diklik, tambahkan tugas
tombol.addEventListener("click", () => {
  const teks = input.value.trim()
  if (teks === "") return   // jangan tambah kalau kosong
  tugas.push(teks)          // masukkan ke array
  input.value = ""          // kosongkan input
  render()                  // gambar ulang
})

Mari kita bedah alurnya karena inilah pola yang akan kamu pakai di ribuan aplikasi nanti:

Ambil referensi ke elemen HTML lewat DOM (getElementById).
Simpan data di sebuah array (tugas) — ini “sumber kebenaran” aplikasi.
Fungsi render membaca array dan membangun elemen <li> untuk tiap item, lalu menaruhnya di DOM. Kita memakai forEach di sini.
Event listener pada tombol menangkap klik pengguna, memvalidasi input dengan if, memasukkan tugas baru ke array dengan push, lalu memanggil render supaya layar diperbarui.

Pola “data di array → fungsi render membaca data → event mengubah data lalu render ulang” ini adalah inti cara kerja aplikasi web modern. Bahkan React, di tingkat konsep, melakukan hal yang persis sama — hanya saja proses render ulangnya diotomatiskan.

Konsep Penting Lainnya

Setelah menguasai semua dasar di atas, ada beberapa fitur JavaScript modern yang akan sering kamu temui dan pantas dipelajari berikutnya:

Destructuring — mengekstrak nilai dari object atau array dengan ringkas, misalnya const { nama, umur } = user.
Spread operator (...) — menyalin dan menggabungkan array atau object, misalnya [...arr1, ...arr2].
Template literals — string dengan backtick yang memungkinkan interpolasi variabel: `Halo ${nama}`.
Modules — import dan export untuk memecah kode ke banyak file yang rapi.
Error handling — try/catch untuk menangani error dengan anggun agar aplikasi tidak crash.
Optional chaining (?.) — mengakses properti bersarang tanpa error kalau salah satunya tidak ada.

Semua konsep ini adalah pemanis yang membuat kode lebih pendek dan aman — bukan sihir baru, hanya cara menulis yang lebih baik.

Kesalahan Umum Pemula JavaScript

Setiap orang yang belajar JavaScript pasti pernah terjebak di kesalahan yang sama. Mengenalinya lebih awal akan menghemat banyak waktu frustrasi. Berikut yang paling sering:

1. Mencampur =, ==, dan ===. Satu sama dengan (=) adalah assignment (memberi nilai), bukan perbandingan. Untuk membandingkan, pakai ===. Menulis if (skor = 100) bukannya if (skor === 100) adalah bug klasik yang diam-diam malah mengubah nilai.

2. Lupa bahwa indeks array mulai dari 0. Elemen pertama adalah arr[0], dan elemen terakhir adalah arr[arr.length - 1], bukan arr[arr.length]. Salah satu penyebab error “undefined” paling umum.

let buah = ["apel", "mangga", "jeruk"]
console.log(buah[3])              // undefined (tidak ada!)
console.log(buah[buah.length - 1]) // "jeruk" (cara benar ambil elemen terakhir)

3. Menjalankan JavaScript sebelum HTML dimuat. Kalau <script> diletakkan di <head> dan mencoba mengambil elemen yang belum ada, hasilnya null dan kode error. Solusinya: taruh <script> sebelum </body>, atau bungkus kode dalam event DOMContentLoaded.

4. Bingung antara null dan undefined. undefined berarti variabel belum pernah diberi nilai; null berarti kamu sengaja mengosongkannya. Keduanya “kosong” tapi maknanya berbeda.

5. Lupa await pada operasi async. Kalau kamu memanggil fetch tanpa await (atau tanpa .then), kamu memegang Promise-nya, bukan datanya — sehingga sering muncul [object Promise] alih-alih data yang kamu harapkan.

6. Mengubah array atau object tanpa sadar. Karena array dan object adalah tipe reference, menyalin dengan let b = a membuat keduanya menunjuk ke data yang sama. Mengubah b juga mengubah a. Gunakan spread ([...a] atau {...a}) untuk membuat salinan sungguhan.

FAQ Seputar Belajar JavaScript

Apa itu JavaScript dengan bahasa sederhana?

JavaScript adalah bahasa pemrograman yang membuat website bisa “berpikir” dan merespons aksi pengguna. Kalau HTML adalah tulang dan CSS adalah kulit, JavaScript adalah otot dan otaknya — yang membuat tombol bisa diklik, form bisa divalidasi, dan konten bisa berubah tanpa reload. Ia berjalan langsung di browser, jadi setiap kali kamu melihat website yang interaktif, hampir pasti ada JavaScript di baliknya.

Apakah JavaScript sama dengan Java?

Tidak, keduanya bahasa yang sepenuhnya berbeda meski namanya mirip. Java umumnya dipakai untuk aplikasi enterprise dan aplikasi Android, sedangkan JavaScript lahir untuk web dan berjalan di browser. Kemiripan namanya hanyalah keputusan pemasaran pada tahun 1995. Menguasai salah satu tidak otomatis membuatmu bisa yang lain.

Berapa lama belajar JavaScript sampai bisa?

Untuk menguasai dasar-dasar seperti yang dibahas di panduan ini — variabel, fungsi, array, DOM, dan event — kebanyakan orang butuh sekitar 4 sampai 8 minggu belajar konsisten beberapa jam per hari. Untuk sampai level “siap kerja” (termasuk framework seperti React), biasanya perlu 6 bulan sampai 1 tahun. Kuncinya bukan kecepatan, tapi konsistensi dan banyak praktik langsung menulis kode, bukan cuma menonton tutorial.

Apakah harus belajar HTML dan CSS dulu sebelum JavaScript?

Sangat disarankan, ya. JavaScript di web bekerja dengan memanipulasi HTML lewat DOM, jadi kamu perlu paham struktur HTML dasar agar tahu apa yang sedang kamu ubah. CSS juga membantu karena JavaScript sering mengubah gaya elemen. Kamu tidak perlu jadi ahli HTML/CSS dulu — cukup paham dasarnya, lalu belajar ketiganya secara paralel karena mereka saling melengkapi.

JavaScript untuk apa saja dan apa fungsinya?

Fungsi utama JavaScript adalah membuat website interaktif, tapi jangkauannya jauh lebih luas. Di browser (frontend) ia menangani interaksi pengguna, animasi, dan pengambilan data. Di server (Node.js) ia membangun API dan backend. Ia juga dipakai untuk aplikasi mobile (React Native), aplikasi desktop (Electron), bahkan game dan tooling. Satu bahasa untuk hampir seluruh spektrum pengembangan software.

Apakah JavaScript susah dipelajari?

JavaScript termasuk salah satu bahasa yang paling ramah pemula karena kamu bisa langsung mencobanya di browser tanpa setup apa pun, dan hasilnya langsung terlihat di layar. Dasar-dasarnya cukup mudah dicerna. Bagian yang menantang biasanya konsep lanjutan seperti async, this, dan closures — tapi itu wajar dan bisa dikuasai dengan latihan bertahap. Jangan terintimidasi; mulai dari yang kecil dan bangun dari situ.

Setelah JavaScript Dasar, Belajar Apa?

Setelah nyaman dengan seluruh konsep di atas, berikut jalur lanjutan yang paling masuk akal:

TypeScript — JavaScript dengan type safety, sudah jadi standar industri saat ini karena mencegah banyak bug sebelum kode dijalankan. Mulai dari panduan TypeScript untuk JavaScript developer.
React / Vue / Svelte — framework untuk membangun UI kompleks tanpa menulis DOM manipulation manual. Kalau kamu memilih React, baca belajar React dari nol yang membangun langsung di atas konsep JavaScript yang sudah kamu kuasai di sini.
Node.js — JavaScript di sisi server, untuk membangun API dan backend dengan bahasa yang sama.
Git — version control, keterampilan wajib untuk berkolaborasi dan menyimpan riwayat kode.

JavaScript adalah pintu gerbang ke hampir semua teknologi web modern. Setiap jam yang kamu investasikan untuk memahami dasarnya dengan benar akan terbayar berkali-kali lipat di setiap framework dan tool yang kamu pelajari nanti. Mulai dari kecil, tulis kode setiap hari, dan jangan takut membuat error — di situlah proses belajar yang sesungguhnya terjadi.