Browser Compatibility

Satu berkas JavaScript yang sama dapat berperilaku berbeda di dua komputer, karena lingkungannya berbeda versi. Node 24 di lingkungan course ini mendukung seluruh ES2025, tetapi pengguna aplikasi web memakai lingkungan yang tidak kita pilih: Chrome dua tahun lalu, Safari di ponsel yang jarang diperbarui, atau Firefox versi lama di kantor. Fitur baru selalu butuh waktu untuk sampai ke semua lingkungan tersebut.

Karena itu, keputusan memakai fitur baru harus didahului satu pertanyaan: apakah lingkungan target mendukungnya? Chapter ini melatih dua alat pemeriksa, pola keputusan di runtime, dan cara menuliskan target secara eksplisit agar tidak bergantung pada ingatan.

Dua Alat Pemeriksa: caniuse dan MDN #

caniuse.com (https://caniuse.com/ ) adalah basis data dukungan fitur platform web — API JavaScript, DOM, CSS, dan HTML. Ketik nama fitur, dan halaman menampilkan grid: kolom berisi versi browser, warna berisi status. Hijau berarti didukung penuh, kuning berarti didukung sebagian dengan catatan yang wajib dibaca, merah berarti tidak didukung.

Tabel compat di MDN berada di bagian bawah hampir setiap halaman API. Datanya berasal dari proyek terbuka browser-compat-data yang dikelola bersama ekosistem. Kekuatan khususnya: tabel ini juga mencakup API bahasa murni dan runtime Node.js, lengkap dengan catatan bila perilaku antar-engine berbeda.

Kedua alat menampilkan hal yang sama dalam satu hal penting: versi pertama yang mendukung. Bila target kita adalah versi yang lebih tinggi dari angka di tabel, fitur tersebut aman dipakai.

Membaca Tabel Compat Halaman MDN #

Struktur tabelnya konsisten: kolom desktop di kiri, kolom ponsel di kanan, dan — untuk API bahasa — baris Node.js. Setiap sel berisi versi pertama yang mendukung. Berikut data yang kita petik dari basis compat MDN saat chapter ini ditulis, untuk fitur Array.prototype.at dari ES2022:

Array.prototype.at
Desktop : Chrome 92 | Edge 92 | Firefox 90
Mobile  : Safari iOS 15.4
Runtime : Node.js 16.6.0

Cara membacanya bisa langsung diubah menjadi kalimat keputusan. Pengguna Chrome 91 ke bawah tidak punya .at(). Safari di perangkat iOS 15.3 ke bawah juga belum. Node baru mendukungnya sejak 16.6.0 — artinya aplikasi Node versi lama juga masuk hitungan. Sebaliknya, bila target minimum proyek kita Chrome 100, baris itu boleh dilewati: semua pengguna target sudah di atas versi pertama yang mendukung.

Angka-angka itu akan berubah seiring waktu; tabelnya hidup dan terus diperbarui. Yang tidak berubah adalah cara membacanya: cari versi pertama, bandingkan dengan target, catat celahnya.

Feature Detection: Keputusan di Runtime #

Tabel memberi jawaban per versi, tetapi kode kita sering berjalan di lingkungan yang tidak kita pilih satu per satu. Prinsipnya: jangan bertanya versi browser — uji keberadaan fiturnya langsung. typeof memeriksa keberadaan tanpa menjalankan apa pun, sehingga aman dipanggil pada fitur yang belum ada. Bila fitur tersedia, kode lewat jalur utama; bila tidak, jalur cadangan mengambil alih.

// uji-fitur.js — pola feature detection sebelum memakai fitur baru
// Jalankan di terminal: node uji-fitur.js

const angka = [5, 12, 8, 130, 44];

// Fitur milik JavaScript itu sendiri: Array.prototype.at (ES2022).
console.log(typeof angka.at === "function");

// Fitur milik lingkungan: ResizeObserver hanya ada di browser.
console.log(typeof globalThis.ResizeObserver === "function");

// Fallback: bila fitur tidak tersedia, lewat jalur cadangan.
function ambilTerakhir(daftar) {
  return typeof daftar.at === "function"
    ? daftar.at(-1)
    : daftar[daftar.length - 1];
}
console.log(ambilTerakhir(angka));

Output yang Dihasilkan:

true
false
44

Mari kita telaah barisnya:

1. Baris 7 (typeof angka.at === "function"): Array.prototype.at adalah bagian bahasa, sehingga tersedia di Node 24 dan hasilnya true.
2. Baris 10 (typeof globalThis.ResizeObserver === "function"): ResizeObserver milik lingkungan browser, bukan bahasa — di Node hasilnya false, di browser modern hasilnya true. Pemeriksaan typeof tetap aman meski fitur tidak ada; inilah beda lingkungan yang dibedakan tanpa galat.
3. Baris 13–17 (ambilTerakhir): pola lengkapnya tampak di sini — periksa sekali, pilih jalur, dan tetap kembalikan hasil yang benar. angka.at(-1) dan angka[angka.length - 1] menjawab pertanyaan yang sama.

Pola ini juga menjawab lingkungan non-browser: kode yang sama berjalan di Node, di browser, dan di web worker tanpa perlu menebak tempatnya.

Menuliskan Target: Browserslist #

Pemeriksaan per fitur menyebalkan kalau harus diulang dari nol setiap proyek. Browserslist menyelesaikannya sebagai format konfigurasi: daftar browser yang didukung proyek ditulis sekali — di package.json atau berkas .browserslistrc — lalu dibaca bersama oleh berbagai tool di ekosistem. Build tool memakainya memutuskan transformasi kode yang perlu dilakukan, dan linter menandai API yang berada di luar target.

Kuerinya berbentuk teks pendek. Contoh yang lazim:

> 0.5%, last 2 versions, Firefox ESR

Artinya: browser dengan pangsa pemakaian di atas 0,5 persen, dua versi terakhir setiap browser, ditambah versi Firefox ESR (Extended Support Release — edisi Firefox untuk organisasi yang diperbarui lambat dan stabil).

Manfaat utamanya bukan sintaksnya, melainkan keputusannya yang terdokumentasi: “browser mana yang kita dukung” berhenti menjadi asumsi di kepala anggota tim dan menjadi satu baris konfigurasi yang disepakati.

Dengan seluruh alat di atas, keputusan memakai fitur baru bisa dijalankan sebagai rutinitas empat langkah:

1. Cek status di bahasa — apakah fitur sudah stage 4 dan masuk edisi resmi? (chapter ECMAScript Specification)
2. Cek dukungan lingkungan — tabel compat MDN atau caniuse untuk target kita.
3. Tuliskan target — kueri Browserslist di proyek, sekali saja.
4. Kelola sisa risiko di runtime — feature detection dan jalur cadangan.

Dengan tiga keterampilan ini — membaca tabel, mendeteksi di runtime, menuliskan target — keputusan memakai fitur baru berhenti menjadi tebakan. Chapter berikutnya kembali ke dokumen bahasa itu sendiri: pohon Reference yang memetakan seluruh API JavaScript.

// uji-fitur.js — pola feature detection sebelum memakai fitur baru
// Jalankan di terminal: node uji-fitur.js

const angka = [5, 12, 8, 130, 44];

// Fitur milik JavaScript itu sendiri: Array.prototype.at (ES2022).
console.log(typeof angka.at === "function");

// Fitur milik lingkungan: ResizeObserver hanya ada di browser.
console.log(typeof globalThis.ResizeObserver === "function");

// Fallback: bila fitur tidak tersedia, lewat jalur cadangan.
function ambilTerakhir(daftar) {
  return typeof daftar.at === "function"
    ? daftar.at(-1)
    : daftar[daftar.length - 1];
}
console.log(ambilTerakhir(angka));