IF Notes

JavaScript

5 min read

Back to IF3110 Pengembangan Aplikasi Berbasis Web

Topic

Questions/Cues

  • Apa itu JavaScript?

  • Bagaimana JS dieksekusi?

  • Tipe data dasar di JS?

  • Perbedaan == & ===?

  • Apa itu var, let, const?

  • Konsep Objects & Prototypes?

  • Bagaimana JS berinteraksi dengan HTML?

  • Apa itu DOM?

  • Apa itu Event Loop?

  • Mengapa perlu Asynchronous?

  • Apa itu Callback?

  • Apa itu Promise?

  • Apa itu async/await?

Reference Points

  • Slides IF3110-04-JavaScript.pdf

Definisi dan Lingkungan Eksekusi JavaScript

JavaScript (JS) adalah bahasa pemrograman interpreter-based yang dinamis dan loosely-typed. Awalnya hanya berjalan di browser, kini JS bisa berjalan di server (Node.js) atau lingkungan lain. JS adalah bahasa di balik interaktivitas halaman web.

Cara Kerja (di Browser):

  1. Kode JavaScript ditulis dalam file .js atau langsung di tag <script> dalam HTML.

  2. Ketika browser memuat halaman, JavaScript Engine (seperti Google V8 di Chrome atau SpiderMonkey di Firefox) akan mem-parsing dan mengeksekusi kode tersebut.

  3. Engine ini mengubah kode JS menjadi bytecode dan kemudian menjadi kode mesin yang dioptimalkan untuk dijalankan.

Sintaks Dasar, Tipe Data, dan Variabel

Sintaks Dasar:

  • Mirip dengan C atau Java, case-sensitive.

  • Titik koma (;) di akhir baris bersifat opsional.

  • Komentar menggunakan // (satu baris) atau /* */ (banyak baris).

Tipe Data Primitif:

  • Number: Semua angka adalah floating-point 64-bit (double). Termasuk nilai spesial seperti Infinity dan NaN (Not a Number).

  • String: Teks yang diapit oleh " atau '. Bersifat immutable (tidak bisa diubah).

  • Boolean: true atau false. Nilai-nilai seperti 0, "", null, undefined, NaN dianggap “falsy” (akan menjadi false saat dikonversi).

  • null: Representasi nilai “kosong” atau “tidak ada”.

  • undefined: Variabel yang sudah dideklarasikan tapi belum diberi nilai.

Variabel:

  • var: Deklarasi variabel dengan lingkup fungsi (function scope). Bisa dideklarasi ulang. (Kurang disarankan di kode modern).

  • let: Deklarasi variabel dengan lingkup blok (block scope). Tidak bisa dideklarasi ulang di lingkup yang sama.

  • const: Sama seperti let tapi nilainya tidak bisa diubah setelah diinisialisasi (konstan).

Operator dan Kontrol Alur

Operator Perbandingan Penting:

  • == (Loose Equality): Membandingkan nilai setelah melakukan konversi tipe data. Contoh: "5" == 5 hasilnya true.

  • === (Strict Equality): Membandingkan nilai DAN tipe data, tanpa konversi. Contoh: "5" === 5 hasilnya false. Praktik terbaik adalah selalu menggunakan === untuk menghindari bug tak terduga.

Kontrol Alur:

  • Kondisional: if...else, switch.

  • Perulangan: for (klasik, for...in untuk properti objek, for...of untuk nilai array), while.

  • Error Handling: try...catch...throw untuk menangani pengecualian (exceptions).

Functions, Objects, dan Prototypes

Functions:

  • Adalah “first-class citizens”, artinya fungsi bisa diperlakukan seperti data: disimpan dalam variabel, dilewatkan sebagai argumen, dan dikembalikan dari fungsi lain.

  • Dapat didefinisikan dengan kata kunci function atau sebagai arrow function (=>).

Objects:

  • Hampir semua hal di JavaScript adalah objek. Objek adalah kumpulan pasangan key-value (properti dan nilai).

  • Dibuat menggunakan object literal ({}) atau dengan constructor function (new Date()).

Prototypes & Inheritance:

  • JavaScript menggunakan prototypal inheritance. Setiap objek memiliki prototype (objek lain) yang menjadi “cetakan” atau sumber properti dan method warisan.

  • Sejak ES6, kata kunci class diperkenalkan sebagai “syntactic sugar” (penyederhanaan sintaks) di atas sistem prototype untuk membuatnya lebih mirip bahasa berbasis kelas tradisional.

DOM, Events, dan Asynchronous

Document Object Model (DOM):

  • Adalah representasi struktur halaman HTML dalam bentuk objek. JavaScript menggunakan DOM untuk memanipulasi konten, struktur, dan gaya halaman secara dinamis.

  • Method umum: document.getElementById(), document.querySelector(), document.createElement().

Events:

  • JS bersifat event-driven. Skrip bereaksi terhadap aksi pengguna (event) seperti click, mouseover, keydown.

  • Event Listener (.addEventListener()) digunakan untuk “mendengarkan” event pada sebuah elemen dan menjalankan fungsi (callback) saat event terjadi.

Concurrency & Event Loop:

  • JavaScript pada dasarnya single-threaded. Untuk mencegah operasi yang lama (seperti request network) memblokir seluruh halaman, JS menggunakan model asynchronous dengan Event Loop.

  • Event Loop: Sebuah proses yang terus-menerus memeriksa message queue (antrian tugas). Jika call stack (tumpukan eksekusi) kosong, ia akan mengambil tugas dari antrian dan menjalankannya.

Mengelola Asynchronous: Callback, Promise, Async/Await

  • Callback: Sebuah fungsi yang dilewatkan sebagai argumen ke fungsi lain, untuk dieksekusi nanti setelah operasi selesai. Penggunaan callback yang berlebihan dapat menyebabkan “Callback Hell”/“Pyramid of Doom” (kode yang sulit dibaca).

  • Promise: Sebuah objek yang merepresentasikan hasil dari operasi asynchronous yang akan selesai di masa depan. Sebuah Promise memiliki tiga state: pending (menunggu), fulfilled (berhasil), atau rejected (gagal). then() digunakan untuk menangani hasil sukses, dan catch() untuk menangani kegagalan. Ini membuat kode lebih rapi daripada callback.

  • async/await: Sintaks modern yang dibangun di atas Promise. Kata kunci async membuat sebuah fungsi mengembalikan Promise. Kata kunci await digunakan di dalam fungsi async untuk menunggu sebuah Promise selesai, membuat kode asynchronous terlihat dan terasa seperti kode synchronous, sehingga jauh lebih mudah dibaca dan dikelola.

Summary

JavaScript adalah bahasa dinamis single-threaded yang menghidupkan web melalui manipulasi DOM dan penanganan event. Untuk menangani operasi yang memakan waktu tanpa memblokir antarmuka pengguna, JS menggunakan model asynchronous berbasis Event Loop. Pola modern untuk mengelola asynchronous telah berevolusi dari Callback menjadi Promise yang lebih terstruktur, dan disederhanakan lebih lanjut dengan sintaks async/await yang intuitif, memungkinkan penulisan kode non-blocking yang bersih dan mudah dibaca.

Graph View

Backlinks