Belajar JavaScript dari Nol

Belajar JavaScript dari Nol hingga Mahir

Belajar JavaScript dari nol sampai level "Expert" adalah perjalanan panjang—tapi juga menyenangkan dan menantang! JavaScript (JS) adalah bahasa pemrograman powerful yang digunakan untuk membangun website interaktif, aplikasi web, hingga backend menggunakan Node.js.

Dalam panduan ini, kamu akan dibimbing dari dasar hingga konsep lanjutan secara terstruktur, komprehensif, namun tetap praktis dan mudah dipahami. Tujuan akhirnya: menguasai JavaScript seperti seorang guru. Siap? Let’s go!

Tahap 1: Dasar-Dasar JavaScript

1.1 Pengenalan JavaScript

Apa itu JavaScript?
Bahasa pemrograman yang awalnya hanya berjalan di browser (client-side), kini juga bisa dijalankan di server menggunakan Node.js.
Cara Menjalankan JavaScript:
- Di browser melalui tag <script> di HTML.
- Di console browser (tekan F12 > Console).
- Di Node.js menggunakan node file.js.
Tools yang Dibutuhkan:
- Code editor: Visual Studio Code (VS Code), Sublime, Atom.
- Browser: Chrome, Firefox.
- Node.js: Untuk menjalankan JavaScript di luar browser.

1.2 Sintaks Dasar JavaScript

Deklarasi Variabel

JavaScript:

let nama = "Budi";
const PI = 3.14;
var umur = 25;

Hindari penggunaan var, gunakan let atau const.

Tipe Data

Primitif: string, number, boolean, undefined, null, symbol, bigint
Kompleks: array, object

Operator

Aritmatika: +, -, *, /, %
Perbandingan: ==, ===, !=, !==, >, <
Logika: &&, ||, !

1.3 Kontrol Alur

Percabangan

JavaScript:

if (nilai >= 80) {
  console.log("Lulus dengan baik!");
}

Perulangan

JavaScript:

for (let i = 0; i < 5; i++) {
  console.log(i);
}

1.4 Fungsi

JavaScript:

function sapa(nama) {
  return `Halo, ${nama}!`;
}

Arrow Function

JavaScript:

const tambah = (a, b) => a + b;

1.5 Latihan Dasar

Kalkulator sederhana.
Manipulasi array (push, pop, shift, unshift, sort).

Tahap 2: Menengah - Memahami JavaScript Lebih Dalam

2.1 Manipulasi DOM

HTML:

<button id="tombol">Klik Saya</button>
<p id="teks">Halo</p>
<script>
  document.getElementById("tombol").onclick = () => {
    document.getElementById("teks").textContent = "Teks berubah!";
  };
</script>

2.2 Array & Objek Lanjutan

JavaScript:

let arr = [1, 2, 3];
arr.map(x => x * 2);
arr.filter(x => x > 1);

Destructuring & Spread Operator

JavaScript:

const [a, b] = [1, 2];
const {nama, umur} = {nama: "Budi", umur: 25};

2.3 Asynchronous JavaScript

Callback

JavaScript:

setTimeout(() => console.log("Selesai"), 1000);

Promise

JavaScript:

new Promise(resolve => setTimeout(() => resolve("OK"), 1000)).then(console.log);

Async/Await

JavaScript:

async function ambilData() {
  const data = await fetch(...);
}

2.4 Error Handling

JavaScript:

try {
  // kode rawan error
} catch (e) {
  console.error("Error:", e.message);
}

2.5 Latihan Menengah

To-do list interaktif.
Fetch data dari API publik.

Tahap 3: Lanjutan - Menjadi Mahir

3.1 Modularitas

JavaScript:

// math.js
export const tambah = (a, b) => a + b;

// main.js
import { tambah } from './math.js';

3.2 OOP (Object-Oriented Programming)

JavaScript:

class Mobil {
  constructor(merek) {
    this.merek = merek;
  }
  jalan() {
    return `${this.merek} berjalan`;
  }
}

3.3 Functional Programming

JavaScript:

const tambahSatu = arr => arr.map(x => x + 1);

3.4 Framework dan Library

React: UI interaktif.
Vue: Ringan dan fleksibel.
Node.js: Backend JS.

Contoh React:

Rich (BB code):

function App() {
  return <h1>Halo React!</h1>;
}

3.5 Latihan Lanjutan

Buat dashboard, sistem manajemen tugas, aplikasi e-commerce.

Tahap 4: Menuju Level “Expert”

4.1 Best Practices

Gunakan debounce, throttle, dan clean code.
Gunakan ESLint, Prettier.
Pelajari testing (Jest/Mocha).

4.2 Menguasai Ekosistem

Build Tools: Webpack, Vite, Parcel.
State Management: Redux, Zustand.
Database & Server: Express.js, MongoDB, PostgreSQL.

4.3 Mengajar & Berkontribusi

Tulis blog/tutorial.
Kontribusi ke GitHub.
Ajar di komunitas.

4.4 Sumber Belajar

Roadmap Belajar

Waktu	Fokus Pembelajaran
Minggu 1-4	Dasar sintaks & DOM
Minggu 5-8	API, async, manipulasi data
Bulan 3-6	Framework, OOP, proyek besar
Bulan 6+	Ajarkan orang lain, kontribusi open source

Tips Sukses

Konsisten latihan 1-2 jam/hari.
Kerjakan proyek nyata.
Gunakan console.log untuk debugging.
Buat portfolio GitHub.
Gabung komunitas JavaScript Indonesia.

Proyek Akhir: Aplikasi Manajemen Tugas

JavaScript:

let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
function render() {
  app.innerHTML = tasks.map((t, i) => `<li>${t} <button onclick="hapus(${i})">x</button></li>`).join("");
}
function tambah(t) {
  tasks.push(t);
  localStorage.setItem("tasks", JSON.stringify(tasks));
  render();
}
function hapus(i) {
  tasks.splice(i, 1);
  localStorage.setItem("tasks", JSON.stringify(tasks));
  render();
}

Kalau kamu ikuti roadmap ini secara konsisten dan penuh semangat, bukan cuma jadi "mahir"—tapi kamu bisa jadi "Master JavaScript" yang bisa mengajar dan menginspirasi orang lain!

Belajar JavaScript dari Nol