Let, Const, Arrow Function, dan Template Literal

Selamat datang di seri baru: JavaScript Modern. Seri Vibe Coding sudah selesai, dan seperti yang dijanjikan, sekarang kita membangun fondasi yang benar. Lima episode ke depan (#45-49) membahas syntax JavaScript versi modern (ES6 ke atas) yang dipakai di hampir semua kode React, Node.js, dan tutorial masa kini.

Kenapa seri ini penting? Karena kalau kamu buka kode React nanti, kamu akan menemukan const, arrow function =>, dan backtick di mana-mana. Tanpa memahami empat konsep di artikel ini, kode React akan terlihat seperti bahasa alien. Jadi anggap artikel ini sebagai kunci pembuka pintu ke semua materi frontend modern.

Kamu sudah kenal variabel dan function dari seri JavaScript Basic (#23-29). Sekarang kita naik kelas: cara modern menulis keduanya.

Var Itu Masa Lalu, Kenalan dengan Let dan Const

Di JavaScript lama, variabel dideklarasikan dengan var. Di JavaScript modern, kita pakai let dan const. Kenapa repot-repot ganti? Karena var punya perilaku aneh yang sering bikin bug misterius.

Bayangkan variabel seperti kotak berlabel. Dengan var, kotaknya bisa "bocor" keluar dari ruangan tempat ia dibuat. Perhatikan:

function contohVar() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 10, x bocor keluar dari blok if!
}
contohVar();

Variabel x dibuat di dalam blok if, tapi bisa diakses dari luar blok. Ini namanya function scope: var hanya peduli pada batas function, bukan batas blok {}. Di program kecil tidak masalah, di program besar ini sumber bug yang bikin pusing.

let dan const memperbaikinya dengan block scope: variabel hanya hidup di dalam blok tempat ia dideklarasikan.

function contohLet() {
  if (true) {
    let y = 10;
  }
  console.log(y); // ReferenceError: y is not defined
}
contohLet();

console.log(nama);
var nama = "Budi";

Let vs Const: Kapan Pakai yang Mana

Aturannya sederhana dan wajib dihafal:

• const: untuk nilai yang tidak akan diganti (tidak bisa di-assign ulang). Pakai ini sebagai default.
• let: untuk nilai yang memang akan berubah, misalnya counter di loop atau hasil perhitungan bertahap.
• var: jangan dipakai di kode baru. Titik.

const PI = 3.14;
PI = 3.14159; // TypeError: Assignment to constant variable

let skor = 0;
skor = skor + 10; // boleh, skor memang dirancang untuk berubah

Ada satu jebakan yang wajib kamu pahami soal const:

const belanjaan = ["beras", "telur"];
belanjaan.push("minyak");
console.log(belanjaan);

Arrow Function: Bukan Sekadar Versi Pendek

Banyak tutorial bilang arrow function itu "cara singkat nulis function". Itu benar tapi tidak lengkap, dan ketidaklengkapan inilah yang bikin pemula kaget nanti. Mari lihat dulu bentuknya:

// Cara lama
function tambah(a, b) {
  return a + b;
}

// Arrow function
const tambah = (a, b) => a + b;

Kalau badannya cuma satu baris, kurung kurawal dan return bisa dihilangkan. Hasilnya tambah(2, 3) tetap 5 di kedua versi. Sejauh ini memang terlihat seperti sekadar singkatan.

Tapi ada perbedaan mendasar yang jauh lebih penting: arrow function tidak punya this sendiri. Ia meminjam this dari scope tempat ia ditulis. Function biasa malah sebaliknya, this-nya bisa berubah tergantung siapa yang memanggilnya. Ini topik yang akan sangat terasa manfaatnya saat kamu pakai React dan event handler nanti.

Untuk sekarang, hafalkan dua hal: pakai arrow function untuk callback dan function sederhana (ini gaya standar kode modern), dan jangan pakai arrow function sebagai method object kalau kamu butuh this yang menunjuk ke object itu sendiri.

Template Literal: String yang Bisa Bernapas

Dulu, menggabungkan string dengan variabel itu menyiksa:

const nama = "Sinta";
const umur = 17;
// Cara lama: plus berderet-deret
console.log("Halo, nama saya " + nama + ", umur saya " + umur + " tahun.");

Template literal memakai backtick (tombol di bawah Esc) dan ${} untuk menyisipkan variabel atau ekspresi apa pun:

const nama = "Sinta";
const umur = 17;
console.log(`Halo, nama saya ${nama}, umur saya ${umur} tahun.`);
console.log(`Tahun depan umur saya ${umur + 1} tahun.`);

Di dalam ${} boleh ada ekspresi JavaScript apa pun, bukan cuma nama variabel. Bonusnya: template literal bisa multi-baris tanpa trik khusus, sangat berguna untuk bikin template HTML di JavaScript nanti.

Persepsi yang Perlu Diluruskan

Persepsi salah 1: "var, let, const itu sama saja, yang penting jalan." Tidak sama. var yang bocor keluar blok dan hoisting undefined-nya adalah sumber bug klasik yang sulit dilacak. Kode modern memakai const sebagai default justru supaya niat programmer jelas terbaca: "nilai ini tidak akan berubah".

Persepsi salah 2: "Arrow function cuma gaya penulisan." Perbedaan this adalah perbedaan perilaku, bukan gaya. Memahaminya sekarang menghemat berjam-jam debugging saat kamu masuk React nanti.

Latihan: Ubah, Jangan Ketik Ulang

Ambil satu file JavaScript lamamu (dari seri JavaScript Basic, misalnya proyek to-do list #29), lalu:

1. Ganti semua var menjadi const. Jalankan. Kalau ada error "Assignment to constant variable", itu tandanya variabel tersebut memang berubah nilainya, ganti yang itu saja menjadi let.
2. Ubah semua function callback menjadi arrow function.
3. Ubah semua penggabungan string dengan + menjadi template literal.

Latihan ini melatih insting modern: const dulu, let kalau terpaksa. Di episode berikutnya kita bahas Destructuring, Spread, Map, Filter, dan Reduce: senjata rahasia untuk mengolah data array dan object dengan elegan. Sampai jumpa.