Dasar-Dasar JavaScript Modern: Fitur ES6+ yang Wajib Dikuasai Developer

JavaScript adalah bahasa yang wajib dikuasai siapa pun yang ingin bekerja di dunia web. Hampir semua interaksi yang kita rasakan di browser — tombol yang merespons klik, form yang memvalidasi data, hingga aplikasi yang terasa seperti desktop — digerakkan oleh JavaScript. Namun, JavaScript yang dipakai developer hari ini sangat berbeda dengan JavaScript lima belas tahun lalu. Sejak dirilisnya ECMAScript 2015 (ES6), bahasa ini berkembang pesat dengan fitur-fitur yang membuat kode lebih ringkas, aman, dan mudah dirawat. Memahami dasar-dasar JavaScript modern kini menjadi bekal minimum sebelum masuk ke framework seperti React, Vue, atau Node.js.

Artikel ini merangkum fitur-fitur inti JavaScript modern yang paling sering dipakai dalam pekerjaan sehari-hari: penulisan variabel dengan let dan const, arrow function, template literal, destructuring, hingga penanganan operasi asinkron dengan async/await. Jika Anda baru memulai, sebaiknya baca dulu panduan dasar JavaScript untuk pemula agar paham variabel, tipe data, dan struktur kontrol dasarnya, lalu kembali ke sini untuk melangkah ke gaya penulisan yang lebih modern.

Mengapa JavaScript Modern Berbeda dari JavaScript Lama

Sebelum ES6, developer JavaScript bekerja dengan var, fungsi biasa, dan banyak callback bersarang. Gaya ini bekerja, tetapi menimbulkan banyak jebakan: variabel yang “bocor” keluar blok, nilai this yang sulit diprediksi, dan kode asinkron yang sulit dibaca. ES6 dan rilis tahunan setelahnya (ES2017, ES2020, dan seterusnya) memperkenalkan perbaikan-perbaikan besar terhadap masalah tersebut.

Yang penting dipahami: semua browser modern dan runtime seperti Node.js sudah mendukung fitur-fitur ini secara penuh. Artinya, tidak ada alasan lagi menulis JavaScript dengan gaya lama untuk proyek baru. Berikut fondasi-fondasi yang perlu Anda kuasai lebih dulu.

Variabel let dan const: Fondasi Gaya Penulisan Baru

Kata kunci let dan const menggantikan var dalam hampir semua kasus. Perbedaan terpentingnya ada pada scope (lingkup) dan sifat reassignment:

• var bersifat *function scope* dan di-*hoisting* dengan nilai undefined, sehingga bisa dipakai sebelum dideklarasikan — sumber bug klasik.
• let bersifat *block scope*, hanya hidup di dalam kurung kurawal tempat ia dideklarasikan.
• const juga *block scope*, tetapi nilainya tidak bisa diganti dengan assignment baru.

Aturan praktis yang dipakai komunitas: gunakan const secara default, dan pakai let hanya jika memang nilainya perlu diubah, misalnya penghitung loop atau akumulator. Dengan begitu, siapa pun yang membaca kode langsung tahu variabel mana yang berperilaku sebagai konstanta.

Fitur Inti ES6+ yang Paling Sering Dipakai

Arrow Function

Arrow function menyingkat penulisan fungsi dan menyelesaikan masalah this karena arrow function tidak memiliki this sendiri — ia mewarisi this dari lingkup di sekitarnya (*lexical this*).

// Fungsi biasa
const jumlah = function (a, b) {
  return a + b;
};

// Arrow function dengan hasil yang sama
const jumlahArrow = (a, b) => a + b;

Perhatikan bahwa untuk fungsi satu ekspresi, return bahkan bisa dihilangkan. Namun arrow function tidak cocok dipakai sebagai method objek yang butuh this miliknya sendiri — untuk kebutuhan itu, fungsi biasa atau method shorthand lebih tepat.

Template Literal

Template literal memakai tanda backtick (` `) dan memungkinkan interpolasi variabel langsung di dalam string, termasuk string multibaris tanpa gabungan \n`:

const nama = "Andi";
const salam = `Halo, ${nama}!
Selamat belajar JavaScript modern.`;

Ini jauh lebih bersih dibanding penyambungan string dengan + yang rawan salah ketik.

Destructuring dan Spread Operator

Destructuring memungkinkan kita “membongkar” nilai dari array atau properti objek ke variabel secara langsung, sementara spread operator (...) menyalin atau menggabungkan koleksi. Karena topik ini berhubungan erat dengan struktur data, ulasan mendalamnya sudah dibahas pada artikel object dan array serta fitur ES6 di JavaScript — termasuk contoh penggunaan destructuring dan spread yang lebih lengkap.

const user = { nama: "Budi", peran: "frontend" };
const { nama, peran } = user;

const defaultConfig = { tema: "gelap", bahasa: "id" };
const configUser = { ...defaultConfig, bahasa: "en" };

Pola di atas sangat umum di kode framework modern, terutama untuk props komponen dan konfigurasi.

Asynchronous JavaScript: dari Callback ke async/await

JavaScript berjalan pada satu *thread*, sehingga operasi yang memakan waktu — memanggil API, membaca file, atau query database — harus ditangani secara asinkron agar aplikasi tidak membeku. Evolusi penanganannya menarik untuk dicermati:

• Callback: gaya paling awal; fungsi dipanggil kembali setelah operasi selesai. Bersarang terlalu dalam menghasilkan “callback hell”.
• Promise: objek yang merepresentasikan hasil operasi di masa depan, bisa dirantai dengan .then() dan .catch().
• async/await: sintaks di atas Promise yang membuat kode asinkron terbaca seperti kode sinkron.

async function ambilData() {
  try {
    const respons = await fetch("https://api.contoh.com/produk");
    const data = await respons.json();
    console.log(data);
  } catch (error) {
    console.error("Gagal mengambil data:", error);
  }
}

Dengan async/await, penanganan error cukup memakai try/catch biasa, dan alur logika terbaca dari atas ke bawah. Fitur pendukung seperti *optional chaining* (?.) dan *nullish coalescing* (??) dari ES2020 melengkapi gaya ini dengan cara yang aman mengakses properti bersarang tanpa banyak pengecekan null.

Modul dan Kelas dalam JavaScript Modern

Dua fitur lain yang wajib dipahami adalah modul dan kelas. Modul (import/export) memecah kode ke beberapa berkas sehingga proyek besar tetap tertata, dan kini didukung native baik di browser maupun Node.js. Sementara itu, sintaks class memberi cara yang lebih ramah untuk membuat objek dan pewarisan dibanding manipulasi prototype manual — meski di balik layar mekanismenya tetap prototype-based.

export function formatRupiah(angka) {
  return new Intl.NumberFormat("id-ID", {
    style: "currency",
    currency: "IDR",
  }).format(angka);
}

Fungsi di atas bisa diimpor berkas lain dengan import { formatRupiah } from "./utils.js"; — pola dasar yang dipakai hampir semua proyek JavaScript modern.

Belajar dari Sumber Resmi

Daftar fitur di atas hanya puncak gunung es. Untuk pendalaman yang benar, jadikan MDN Web Docs sebagai rujukan utama. Halaman dokumentasi JavaScript resmi di MDN memuat panduan lengkap mulai dari grammar dan tipe, alur kontrol, fungsi, objek, hingga topik lanjutan seperti closure, inheritance, dan modul — lengkap dengan referensi seluruh built-in object dan contoh kode yang bisa langsung dicoba. Karena MDN ditulis dan ditinjau oleh komunitas yang sama yang menjaga standar JavaScript, materinya jauh lebih dapat diandalkan daripada tutorial acak di internet.

Kesimpulan

Menguasai dasar-dasar JavaScript modern berarti berpindah dari gaya tulis lama ke pola yang lebih aman dan ekspresif: const/let untuk variabel, arrow function dan template literal untuk kode yang ringkas, destructuring dan spread untuk mengelola data, serta async/await untuk operasi asinkron yang mudah dibaca. Ditambah modul dan kelas, fondasi ini cukup membuat Anda nyaman membaca maupun menulis kode proyek modern apa pun. Langkah terbaik setelah membaca artikel ini adalah praktik langsung: buka konsol browser atau Node.js, tulis ulang contoh-contoh di atas dengan kasus Anda sendiri, dan konsultasikan detailnya ke dokumentasi resmi setiap kali menemui perilaku yang membingungkan.

Foto sampul oleh Chris Ried di Unsplash.