Apa Itu JavaScript? Panduan Lengkap untuk Pemula

JavaScript adalah bahasa pemrograman paling populer di dunia — dan satu-satunya bahasa yang berjalan native di browser. Kalau HTML adalah struktur dan CSS adalah tampilan, maka JavaScript adalah otak dari sebuah website.

Kenapa Harus Belajar JavaScript?

1. Satu bahasa, banyak platform — Browser, server (Node.js), mobile (React Native), desktop (Electron)
2. Permintaan pasar tinggi — Hampir semua lowongan web developer mensyaratkan JavaScript
3. Ekosistem besar — React, Vue, Angular, Svelte, Next.js, dan ratusan framework lainnya dibangun di atas JavaScript
4. Entry point ke programming — Kamu bisa langsung coba di browser tanpa install apapun

Cara Menjalankan JavaScript

Cara paling gampang: buka browser, tekan F12 (atau klik kanan → Inspect), lalu buka tab Console. Ketik:

console.log("Halo dunia!")

Tekan Enter — selamat, kamu baru saja menjalankan JavaScript!

Variabel

Variabel adalah “wadah” untuk menyimpan data:

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

• let — variabel yang bisa diubah nilainya
• const — konstanta, nilainya tetap setelah dideklarasikan
• var — cara lama, hindari di kode modern

Tipe Data

JavaScript punya beberapa tipe data dasar:

// String (teks)
let pesan = "Halo!"

// Number (angka)
let skor = 100
let pi = 3.14

// Boolean (benar/salah)
let sudahLogin = true

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

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

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

Fungsi

Fungsi adalah blok kode yang bisa dipanggil berulang kali:

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

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

// Arrow function (cara modern)
const kuadrat = (x) => x * x

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

Arrow function (=>) adalah cara penulisan yang lebih ringkas dan umum dipakai di framework modern seperti React.

Kondisi (If/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!"

Loop (Perulangan)

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

// For...of (untuk array)
let framework = ["React", "Vue", "Svelte"]
for (let fw of framework) {
  console.log(fw)
}

// forEach (method array)
framework.forEach((fw, index) => {
  console.log(`${index + 1}. ${fw}`)
})

Array Methods yang Wajib Dikuasai

Array methods adalah salah satu bagian terpenting JavaScript modern:

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

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

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

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

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

Keempat method ini (map, filter, find, reduce) akan kamu pakai setiap hari sebagai web developer.

Coba Array Methods

Klik method di bawah dan lihat bagaimana array berubah:

Array Method

mapfilterfindreducesortslice

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

1

2

3

4

5

6

7

8

.map(n => n * 2)

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

2

4

6

8

10

12

14

16

Transformasi setiap elemen

DOM Manipulation

DOM (Document Object Model) adalah representasi halaman web sebagai objek JavaScript. Ini cara JavaScript berinteraksi dengan HTML:

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

// Ubah konten
judul.textContent = "Judul Baru!"

// Ubah style
judul.style.color = "orange"

// Tambah event listener
tombol.addEventListener("click", () => {
  alert("Tombol diklik!")
})

DOM manipulation adalah pondasi dari semua framework frontend. React, Vue, dan Svelte pada dasarnya melakukan DOM manipulation secara otomatis — tapi memahami cara kerjanya secara manual akan membuatmu developer yang lebih baik.

Async JavaScript

JavaScript sering berurusan dengan operasi yang butuh waktu — seperti mengambil data dari API:

// Fetch 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:", error)
  }
}

async/await adalah cara modern untuk menangani operasi asynchronous — lebih mudah dibaca daripada callback atau .then() chain.

Konsep Penting Lainnya

Setelah menguasai dasar, pelajari juga:

• Destructuring — Ekstrak nilai dari object/array dengan ringkas
• Spread operator (...) — Salin dan gabungkan array/object
• Template literals — String dengan backtick untuk interpolasi
• Modules — import/export untuk organisasi kode
• Error handling — try/catch untuk menangani error

Setelah JavaScript Dasar, Belajar Apa?

1. TypeScript — JavaScript dengan type safety, standar industri saat ini
2. React / Vue / Svelte — Framework untuk membangun UI yang kompleks
3. Node.js — JavaScript di server, untuk membangun API dan backend
4. Git — Version control, wajib untuk kolaborasi

JavaScript adalah pintu gerbang ke hampir semua teknologi web modern. Investasi waktu belajar JavaScript akan terbayar di setiap framework yang kamu pelajari nanti.