JavaScript

JavaScript digunakan untuk membuat halaman web interaktif, seperti menu yang bisa dibuka, formulir yang memeriksa isian, dan konten yang diperbarui tanpa memuat ulang halaman. JavaScript juga berjalan di server melalui Node.js dan menjadi dasar banyak aplikasi mobile dan desktop. Setiap browser modern menjalankan JavaScript secara bawaan.

JavaScript dan Java adalah dua bahasa pemrograman berbeda yang hanya memiliki kemiripan nama. JavaScript terutama berjalan di browser dan bertipe dinamis, sedangkan Java bertipe statis dan dikompilasi menjadi bytecode untuk Java Virtual Machine. Nama yang mirip itu berasal dari keputusan pemasaran pada tahun 1990-an.

DOM atau Document Object Model adalah pohon objek yang dibangun browser dari halaman HTML agar JavaScript bisa membaca dan mengubah halaman tersebut. Melalui DOM, JavaScript bisa menemukan elemen, mengubah teks, menambahkan class, dan membuat elemen baru. Setiap perubahan yang terlihat di halaman akibat skrip selalu melewati DOM.

JavaScript ditambahkan ke halaman HTML dengan tag script, baik berisi kode secara langsung maupun menunjuk ke file JavaScript terpisah melalui atribut src. Menaruh tag script di akhir body, atau menambahkan atribut defer, membuat HTML dimuat lebih dulu. File JavaScript terpisah lebih mudah di-cache dan dirawat.

Di JavaScript, let dan const memiliki cakupan blok, sedangkan var memiliki cakupan fungsi dan bisa dideklarasikan ulang. Variabel const tidak bisa diberi nilai baru, meskipun isi objek yang disimpan di const tetap bisa berubah. JavaScript modern memakai const secara bawaan, let jika nilainya harus berubah, dan menghindari var.

Event di JavaScript adalah sinyal yang dikirim browser ketika sesuatu terjadi, seperti klik, tekanan tombol keyboard, pengiriman formulir, atau halaman selesai dimuat. Skrip merespons event dengan memasang fungsi listener melalui addEventListener. Event listener adalah cara JavaScript membuat halaman bereaksi terhadap pengguna.

Event delegation di JavaScript berarti memasang satu event listener pada elemen induk alih-alih satu listener di setiap elemen anak. Listener memeriksa target event untuk mengetahui anak mana yang diklik. Event delegation memakai lebih sedikit memori dan juga berfungsi untuk elemen yang ditambahkan ke halaman belakangan.

Gunakan fungsi fetch di JavaScript untuk meminta data dari API, lalu baca isinya dengan metode json milik response. Fungsi fetch mengembalikan promise, sehingga kode biasanya menunggu hasilnya dengan async dan await. Memeriksa status response dan menangkap error menjaga halaman tetap berfungsi saat jaringan bermasalah.

Promise di JavaScript adalah objek yang mewakili nilai yang baru akan tersedia nanti, seperti hasil permintaan jaringan. Sebuah promise berada dalam keadaan pending, fulfilled, atau rejected. Kode merespons hasilnya dengan then dan catch, atau dengan async dan await.

Async dan await membuat kode JavaScript bisa menunggu sebuah promise dengan cara yang terbaca seperti kode langkah demi langkah biasa. Fungsi yang ditandai async selalu mengembalikan promise, dan await menghentikan sementara fungsi itu sampai promise selesai. Error di dalam fungsi async ditangani dengan blok try dan catch biasa.

ES6, disebut juga ECMAScript 2015, adalah pembaruan besar standar bahasa JavaScript pada tahun 2015. ES6 menambahkan let dan const, arrow function, class, template literal, destructuring, module, dan promise. Semua browser modern mendukung ES6, dan fitur baru JavaScript terus ditambahkan setiap tahun sejak itu.

Arrow function di JavaScript adalah cara lebih singkat menulis fungsi dengan sintaks =>. Arrow function tidak memiliki this sendiri, sehingga this tetap mengambil nilai dari kode di sekitarnya. Arrow function umum dipakai untuk callback pendek, seperti yang diberikan ke map dan filter.

JSON atau JavaScript Object Notation adalah format teks untuk menyimpan dan bertukar data dalam bentuk key dan value. JavaScript mengubah objek menjadi teks JSON dengan JSON.stringify dan mengubah teks JSON kembali menjadi objek dengan JSON.parse. Sebagian besar API web mengirim dan menerima data dalam format JSON.

JavaScript mudah dimulai oleh pemula karena hanya butuh browser dan text editor. Bagian yang lebih sulit datang belakangan, seperti kode asinkron, scope, dan banyaknya alat di sekitar bahasa ini. Sebagian besar pelajar sudah bisa membuat halaman interaktif yang berguna dalam beberapa minggu latihan rutin.

Ya, belajar JavaScript murni sebelum React atau Vue membuat kedua framework itu jauh lebih mudah dipahami. Kedua framework dibangun di atas fitur inti JavaScript seperti function, array, object, module, dan promise. Developer yang menguasai dasarnya juga bisa men-debug kode framework, bukan sekadar menebak.

TypeScript adalah JavaScript yang ditambah tipe statis, dikembangkan oleh Microsoft dan dikompilasi menjadi JavaScript biasa. Tipe membuat code editor bisa menangkap banyak kesalahan sebelum kode dijalankan. TypeScript populer di proyek besar tempat banyak developer berbagi kode yang sama.

Halaman JavaScript dimuat lebih cepat dengan mengirim lebih sedikit JavaScript, memuat skrip dengan defer atau async, dan memecah bundle besar agar setiap halaman hanya memuat yang dibutuhkannya. Minify dan kompresi file memperkecil ukuran unduhan. Menjauhkan pekerjaan berat dari main thread membuat halaman tetap responsif terhadap klik dan ketikan.

Di JavaScript, === membandingkan nilai sekaligus tipenya, sedangkan == mengubah tipe lebih dulu sebelum membandingkan. Contohnya, 0 == "0" bernilai true, tetapi 0 === "0" bernilai false. Memakai === menghindari hasil yang mengejutkan dan menjadi aturan umum dalam kode JavaScript modern.

Module di JavaScript adalah file terpisah yang mengekspor fungsi atau nilai dan mengimpor apa yang dibutuhkannya dari file lain. Module menjaga kode tetap tertata, menghindari variabel global, dan membuat proyek besar lebih mudah dirawat. Browser memuat module melalui tag script yang atribut type-nya diatur ke module.

JavaScript di-debug di browser dengan developer tools, yang dibuka dengan F12 atau dengan klik kanan pada halaman lalu memilih Inspect. Panel Console menampilkan error dan nilai yang dicetak, sedangkan panel Sources memungkinkan Anda memasang breakpoint dan menjalankan kode baris demi baris. Panel Network menampilkan setiap permintaan yang dibuat halaman beserta response-nya.

Event loop adalah mekanisme yang membuat JavaScript yang berjalan di satu thread bisa menangani banyak tugas tanpa membeku. Pekerjaan lambat seperti timer dan permintaan jaringan menunggu di latar belakang, dan event loop menjalankan setiap callback yang selesai ketika call stack kosong. Kode yang berjalan lama tetap memblokir event loop, itulah sebabnya perulangan berat membuat halaman tidak responsif.

Ya, JavaScript bisa berjalan di server melalui runtime seperti Node.js, Deno, dan Bun. JavaScript di sisi server bisa membangun API, membaca file, dan terhubung ke database. Memakai satu bahasa di browser dan server memungkinkan tim berbagi kode dan keahlian.

Kode JavaScript dijaga keamanannya dengan tidak pernah memasukkan teks yang tidak tepercaya ke halaman melalui innerHTML, memvalidasi ulang semua input di server, dan tidak menaruh rahasia di kode front-end. Apa pun yang dikirim ke browser bisa dibaca pengguna, termasuk API key. Content Security Policy dan dependency yang selalu diperbarui memblokir banyak serangan umum.

Di JavaScript, localStorage menyimpan data hanya di browser, sedangkan cookie dikirim ke server bersama setiap permintaan. localStorage menampung lebih banyak data dan cocok untuk pengaturan seperti tema yang dipilih. Cookie yang ditandai HttpOnly dan Secure adalah tempat yang lebih aman untuk sesi login karena skrip tidak bisa membacanya.

Kode JavaScript yang mudah dirawat ditulis dengan fungsi-fungsi kecil, nama yang jelas, module, format yang konsisten, dan linter seperti ESLint. Hindari variabel global, dan pisahkan kode yang mengubah DOM dari kode yang mengolah data. Pengujian otomatis membuat perubahan di kemudian hari tetap aman.