menengahes2021es2022sintaksMenengah3 mnt baca

Fitur Modern JavaScript: .at(), hasOwn, dan Assignment Pintar

Sintaks ES2021/ES2022 yang bikin kode lebih pendek dan aman: .at(-1), Object.hasOwn, ||=, &&=, ??=, cause di Error, dan top-level await.

Kenapa Fitur Ini Ada?

JavaScript terus berevolusi tiap tahun. Fitur-fitur ES2021 dan ES2022 lahir dari keluhan nyata programmer: mengambil elemen terakhir array itu ribet (arr[arr.length - 1]), mengecek properti object itu berisiko (obj.hasOwnProperty bisa ditimpa!), dan pola x = x || default ditulis berulang-ulang sampai membosankan. Fitur modern memangkas semua itu jadi sintaks yang lebih aman dan ekspresif.

Contoh 1: .at() dan Object.hasOwn()

javascript
const antrean = ["Budi", "Ani", "Citra"];

// Dulu: antrean[antrean.length - 1]
// Sekarang:
console.log(antrean.at(-1)); // "Citra" (index negatif = dari belakang)
console.log(antrean.at(0));  // "Budi"

// Object.hasOwn: cara aman cek properti milik sendiri
const user = { nama: "Budi" };
console.log(Object.hasOwn(user, "nama"));     // true
console.log(Object.hasOwn(user, "toString")); // false (cuma warisan)

// Kenapa bukan user.hasOwnProperty? Karena properti itu bisa ditimpa:
const licik = { hasOwnProperty: "rusak" };
// licik.hasOwnProperty("x") // ERROR! Object.hasOwn(licik, "x") tetap aman.

Contoh 2: Logical Assignment dan Error cause

javascript
// Pola lama yang bertele-tele:
let nama = "";
// if (!nama) nama = "Anonim";

// ||= : isi hanya jika falsy (kosong, 0, null, undefined...)
nama ||= "Anonim";
console.log(nama); // "Anonim"

// &&= : timpa hanya jika sudah truthy
let diskon = 10;
diskon &&= diskon * 2; // diskon ada, jadi digandakan
console.log(diskon); // 20

// ??= : isi hanya jika null/undefined (0 dan "" dianggap valid!)
let stok = 0;
stok ??= 100;
console.log(stok); // 0, tetap 0 karena 0 bukan null

// Error dengan cause: rantai penyebab error tetap terlacak
try {
  throw new Error("Gagal simpan struk", { cause: "Koneksi printer putus" });
} catch (e) {
  console.log(e.message); // "Gagal simpan struk"
  console.log(e.cause);   // "Koneksi printer putus"
}

Top-level await (disebutkan): di ES2022, file module (type="module" atau .mjs) boleh memakai await langsung di level atas tanpa membungkusnya dalam fungsi async. Berguna untuk inisialisasi, misal const data = await fetch("/api/menu").then(r => r.json()); di baris pertama module.

Jebakan Umum

1. ||= menelan nilai falsy yang valid seperti 0 dan "".

javascript
// SALAH kalau 0 adalah stok yang sah:
let stok = 0;
stok ||= 50; // stok jadi 50, padahal 0 berarti "habis" yang valid!

// BENAR: pakai ??= yang hanya bereaksi ke null/undefined
let stok2 = 0;
stok2 ??= 50; // tetap 0

2. .at() belum ada di browser sangat tua. Untuk proyek yang harus mendukung browser lawas, cek kompatibilitas atau pakai polyfill. Di semua browser modern (2022 ke atas) aman.

3. cause tidak otomatis tercetak di semua console lama. Datanya ada di error.cause, tapi stack trace bawaan mungkin tidak menampilkannya. Selalu log e.cause secara eksplisit saat debugging.

Ringkasan

.at(-1) mengakhiri era arr[arr.length - 1], Object.hasOwn adalah cara cek properti yang tidak bisa disabotase, logical assignment memangkas pola default berulang (dengan ??= sebagai pilihan paling aman), dan cause membuat rantai error bisa dilacak. Modernisasi kode lama dengan fitur ini, tapi pahami dulu perbedaan ||= vs ??= sebelum dipakai.

Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Modernisasi Kode Warung

Di dunia nyata, kamu akan sering mewarisi kode lama yang panjang dan bertele-tele. Mampu memodernisasi kode dengan sintaks baru adalah skill yang dihargai tim: kode jadi lebih pendek, lebih aman, dan lebih mudah dibaca. Refactor fungsi di bawah memakai .at(), Object.hasOwn(), dan logical assignment yang tepat (pilih ||= atau ??= dengan benar!).

<!doctype html>
<html>
<head>
<meta charset="utf-8" />

</head>
<body>
<h1>Halo JS</h1>
<p>Buka console preview untuk melihat output.</p>
<script src="index.js"></script>
</body>
</html>

Kuis Bab

Uji pemahamanmu: Angka, Teks & Tanggal

Jawab 5 soal berikut, lalu tekan "Periksa Jawaban".

1.Mengapa 0.1 + 0.2 menghasilkan 0.30000000000000004 di JavaScript?

2.Kapan regex adalah alat yang tepat?

3.Apa keunggulan utama Set dibanding array biasa?

4.Kapan Map lebih cocok daripada object biasa?

5.Kapan kamu membutuhkan BigInt?