Tutorial JavaScript untuk pemula

Apa itu JavaScript dan untuk apa dipakai

JavaScript adalah bahasa dengan tipe dinamis yang distandarkan sebagai ECMAScript. Bahasa ini dibuat untuk halaman web, tempat ia merespons klik, memperbarui halaman, dan berkomunikasi dengan server. Kini JavaScript juga berjalan di server dan tool lewat Node.js, Deno, dan Bun, di aplikasi desktop (Electron), serta di aplikasi mobile (React Native). Front-end developer, full-stack developer, dan siapa pun yang membangun untuk web memakainya. Sintaks modern di halaman ini (let, const, arrow function, class, module) berasal dari ES2015 dan edisi sesudahnya.

Jalankan Hello, world

Opsi 1: buka halaman web apa saja, tekan F12 (atau Cmd+Option+J di Mac) untuk membuka developer console, lalu ketik baris di bawah. Opsi 2: instal Node.js dari nodejs.org, simpan baris itu sebagai hello.js, dan jalankan.

console.log("Hello, world");

node hello.js
# Hello, world

Variabel dan tipe data dasar

Gunakan const untuk nilai yang tidak diubah ulang dan let untuk nilai yang berubah. Hindari var yang lama, karena ia mengabaikan block scope. typeof menampilkan tipe suatu nilai.

const name = "Ada";
let count = 1;
count += 1;
console.log(`${name} has ${count} items`); // Ada has 2 items
console.log(0.1 + 0.2);                    // 0.30000000000000004
console.log(Number("12") + 1, "12" + 1);   // 13 121

Alur kontrol: if, perulangan, dan kesetaraan

Selalu bandingkan dengan === dan !==. Operator longgar == mengonversi tipe terlebih dahulu, sehingga 0 == "" bernilai true.

const score = 72;
if (score >= 90) {
  console.log("A");
} else if (score >= 70) {
  console.log("B"); // B
} else {
  console.log("C");
}
for (let i = 0; i < 3; i++) console.log(i); // 0 1 2
for (const fruit of ["apple", "pear"]) console.log(fruit);
let n = 10;
while (n > 1) n = Math.floor(n / 2);
console.log(n); // 1

Fungsi

Fungsi adalah nilai: Anda bisa menyimpannya di variabel, mengirimnya ke fungsi lain, dan mengembalikannya. Arrow function adalah bentuk yang lebih singkat dan umum dipakai untuk callback.

function greet(name, greeting = "Hello") {
  return `${greeting}, ${name}!`;
}
const square = (x) => x * x;
const sum = (...nums) => nums.reduce((a, b) => a + b, 0);
console.log(greet("Lin"));     // Hello, Lin!
console.log(square(5));        // 25
console.log(sum(1, 2, 3, 4));  // 10

Array dan objek

Array adalah daftar berurutan; objek memetakan key string ke nilai. Keduanya dikirim secara reference. Map dan Set adalah alternatif bawaan ketika key bukan string atau nilai harus unik.

const nums = [3, 1, 2];
nums.push(5);
const doubled = nums.map((n) => n * 2);
const evens = nums.filter((n) => n % 2 === 0);
console.log(doubled, evens);             // [ 6, 2, 4, 10 ] [ 2 ]
console.log([...nums].sort((a, b) => a - b)); // [ 1, 2, 3, 5 ]
const user = { name: "Ann", age: 31 };
user.city = "Oslo";
const { name, age } = user;              // destructuring
console.log(name, age, Object.keys(user)); // Ann 31 [ 'name', 'age', 'city' ]
console.log(JSON.stringify(user));       // {"name":"Ann","age":31,"city":"Oslo"}

Fitur khas: kode asinkron dengan promise

JavaScript menjalankan kode Anda pada satu thread dengan event loop. Operasi lambat (timer, jaringan, file) tidak memblokir; operasi itu mengembalikan promise yang selesai nanti. Fungsi async memungkinkan Anda menulis kode ini dari atas ke bawah dengan await.

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
async function main() {
  console.log("start");
  await wait(500);
  console.log("half a second later");
  const [a, b] = await Promise.all([wait(100).then(() => 1), wait(200).then(() => 2)]);
  console.log(a + b); // 3
}
main();
console.log("main() was called"); // prints before "half a second later"

Class (class Dog extends Animal {}), module (import dan export), optional chaining (user?.address?.city), dan operator nullish (value ?? "default") adalah fitur modern lain yang akan sering Anda pakai.

Penanganan error

Lempar objek Error dan tangkap dengan try/catch. Pada fungsi async, promise yang ditolak menjadi exception di await.

function parseAge(text) {
  const age = Number(text);
  if (!Number.isInteger(age) || age < 0) {
    throw new Error(`invalid age: ${text}`);
  }
  return age;
}
try {
  console.log(parseAge("41"));  // 41
  console.log(parseAge("abc"));
} catch (err) {
  console.log(err.message);     // invalid age: abc
} finally {
  console.log("done");
}

Program kecil yang lengkap: fetch dan ringkas

Skrip Node.js ini (Node 18 ke atas sudah punya fetch bawaan) mengunduh JSON dari API publik dan mencetak ringkasan singkat. Simpan sebagai repos.mjs dan jalankan node repos.mjs nodejs.

const org = process.argv[2] ?? "nodejs";
async function topRepos(name, n = 3) {
  const res = await fetch(`https://api.github.com/orgs/${name}/repos?per_page=100`);
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  const repos = await res.json();
  return repos
    .sort((a, b) => b.stargazers_count - a.stargazers_count)
    .slice(0, n)
    .map((r) => `${r.stargazers_count}\t${r.name}`);
}
try {
  const lines = await topRepos(org);
  console.log(lines.join("\n"));
} catch (err) {
  console.error("failed:", err.message);
  process.exitCode = 1;
}

Ekstensi .mjs menjadikan file sebagai ES module, sehingga await boleh dipakai di level teratas.

Kesalahan umum pemula

• Memakai == alih-alih ===, yang menyebabkan konversi tipe mengejutkan.
• Lupa await, sehingga Anda mendapat objek Promise yang masih pending, bukan nilainya.
• Mengira const membuat objek immutable. const hanya mencegah penugasan ulang; obj.x = 1 tetap bisa. Gunakan Object.freeze bila perlu.
• Membandingkan objek atau array dengan ===, yang memeriksa identitas, bukan isi.
• Kehilangan this saat mengirim method sebagai callback. Gunakan arrow function atau .bind(obj).

Langkah selanjutnya

Baca MDN JavaScript Guide, referensi gratis yang paling lengkap, dan berlatihlah dengan DOM browser (document.querySelector, event). Lalu pelajari npm dan module, framework seperti React, Vue, atau Svelte untuk front end, atau Node.js untuk server. Menambahkan TypeScript di atas JavaScript memberi Anda tipe statis dan bantuan editor yang lebih baik.