BAB 1 — Belajar JavaScript: Fondasi Dinamis Dunia Web Modern (Pemula)

BAB 1 — Belajar JavaScript: Fondasi Dinamis Dunia Web Modern (Pemula)

JavaScript adalah bahasa pemrograman yang menjadi jantung dari sebagian besar aplikasi web interaktif saat ini.

Mulai dari animasi sederhana hingga sistem web kompleks seperti Gmail, YouTube, atau aplikasi SPA berbasis React dan Vue—semuanya bergantung pada JavaScript.

Bab ini akan membahas sejarah, evolusi teknologi, hingga cara kerja internal JavaScript yang menentukan performanya di browser modern.

1. Sejarah & Tujuan JavaScript: Dari 10 Hari Menjadi Standar Internet

JavaScript lahir pada tahun 1995 ketika Netscape ingin menambahkan interaktivitas pada halaman web. Mereka menugaskan Brendan Eich untuk menciptakan bahasa scripting yang dapat dijalankan di browser—dan ia menyelesaikannya hanya dalam 10 hari.

Perjalanan nama:

  1. Mocha → nama awal ketika prototipe dibuat
  2. LiveScript → nama resmi sementara
  3. JavaScript → nama final untuk alasan pemasaran (meskipun tidak ada hubungan teknis dengan Java)

Tujuan utama JavaScript saat diciptakan:

  • Menambahkan logika pada halaman web
  • Digunakan oleh developer non-teknis
  • Dieksekusi langsung oleh browser, tanpa kompilasi
  • Mendampingi HTML (struktur) dan CSS (presentasi)

Seiring waktu, JavaScript berkembang dari bahasa kecil berbasis browser menjadi bahasa universal yang digunakan di server, desktop, mobile, bahkan embedded devices.

2. Browser Engine & JavaScript Engine: “Otak” di Balik Kecepatan Web

Setiap browser memiliki dua komponen utama:

  1. Rendering Engine – memproses HTML & CSS
  2. JavaScript Engine – mengeksekusi JavaScript

Berikut mesin JavaScript terkemuka:

V8 (Google Chrome, Edge, Opera)

  • Salah satu engine tercepat di dunia
  • Digunakan juga oleh Node.js, menjadikan JavaScript populer di server-side
  • Memiliki JIT Compiler agresif dan sistem optimisasi canggih

SpiderMonkey (Mozilla Firefox)

  • Mesin JavaScript pertama di dunia
  • Terkenal fleksibel dan akurat dalam menerjemahkan spesifikasi ECMAScript

JavaScriptCore / Nitro (Safari)

  • Dikembangkan oleh Apple
  • Optimasi kuat untuk perangkat Apple seperti iPhone & Mac

Chakra (Legacy Microsoft Edge)

  • Digunakan sebelum Edge berpindah ke Chrome engine
  • Fokus pada performa aplikasi Windows berbasis JavaScript

Mesin-mesin ini tidak hanya mengeksekusi kode—mereka menganalisa, mengoptimalkan, dan menyesuaikan performa berdasarkan kebiasaan eksekusi kode kita.

3. Hubungan JavaScript dengan HTML & CSS: Tiga Pilar Web

Ketiga teknologi ini saling melengkapi:

  • HTML (HyperText Markup Language) → kerangka / struktur
  • CSS (Cascading Style Sheets) → tampilan / desain
  • JavaScript → perilaku / interaksi

Tugas JavaScript dalam halaman web:

  • Menangani event pengguna (klik, scroll, input, dll.)
  • Mengubah struktur halaman lewat DOM Manipulation
  • Mengubah gaya secara dinamis
  • Mengambil data dari server dengan AJAX / Fetch API
  • Membuat animasi yang kompleks
  • Mengontrol alur aplikasi (routing, state management, dll.)

Tanpa JavaScript, halaman hanya dapat menampilkan informasi statis seperti brosur digital.

4. JavaScript Modern (ES6+): Transformasi Besar Bahasa Web

Tahun 2015, JavaScript mengalami reformasi besar dengan lahirnya ECMAScript 6 (ES6). Sejak itu, setiap tahun hadir pembaruan baru (ES7, ES8, dst.).

Fitur penting ES6+ yang mengubah cara developer bekerja:

▪ Variabel modern

  • let dan const menggantikan var
  • Lebih aman dan tidak mudah menimbulkan bug

▪ Arrow Function

const greet = name => `Hello, ${name}`;

▪ Template Literal

`Nama saya ${name} dan umur saya ${age}`

▪ Class & OOP yang lebih rapi

class Person {
  constructor(name) {
    this.name = name;
  }
}

▪ Module system (import/export)

Memungkinkan pembuatan struktur aplikasi besar:

import calculate from './math.js';

▪ Promise & async/await

Memudahkan penulisan kode asynchronous:

const data = await fetch(url);

ES6 menjadikan JavaScript bahasa yang jauh lebih modern, efisien, dan scalable.

5. Cara Kerja JavaScript: Interpreter, Bytecode, dan JIT Compiler

Meski disebut bahasa interpreted, kenyataannya JavaScript engine modern melakukan hybrid execution yang kompleks.

Proses yang terjadi di dalam engine:

  1. Parsing
    Kode diubah menjadi AST (Abstract Syntax Tree)
  2. Bytecode Generation
    Interpreter mengubah AST menjadi bytecode tingkat menengah
  3. JIT Compiler (Just-in-Time)
    Bagian kode yang sering digunakan (hot code) dikompilasi menjadi machine code
    → membuatnya sangat cepat
  4. Optimization & De-optimization
    Jika variabel berubah tipe atau pola, engine dapat menurunkan optimisasi untuk menjaga akurasi

Ilustrasi sederhana alurnya:

Source Code → Parser → AST → Interpreter → Bytecode → JIT Compiler → Machine Code

Inilah mengapa JavaScript bisa tetap cepat meski tipe datanya dinamis.

6. Event Loop: Mekanisme di Balik Asynchronous JavaScript

JavaScript bersifat single-threaded, tetapi dapat menangani banyak proses asynchronous seperti:

  • AJAX / fetch
  • Timer
  • Event DOM
  • WebSocket
  • Promises

Semua itu diatur oleh event loop, bukan dijalankan langsung dalam call stack.

Komponen utama event loop:

  • Call Stack → tempat eksekusi kode sinkron
  • Web API → menangani operasi async di luar thread utama
  • Callback Queue → antrean event seperti setTimeout
  • Microtask Queue → untuk Promise, prioritas lebih tinggi
  • Event Loop → jembatan antar komponen

Contoh Output Event Loop:

console.log("A");

setTimeout(() => {
  console.log("B");
}, 0);

console.log("C");

Output:

A
C
B

Ini karena callback setTimeout hanya boleh masuk call stack setelah stack kosong.

Related Posts