Sihir Modern JS: Destructuring, Spread & Modules
Tahun 2015 merupakan titik terang sejarah JavaScript. Sebuah standarisasi masif bernama ECMAScript 6
(ES6) diluncurkan, merubah wajah JavaScript selamanya dari bahasa skrip cupu menjadi bahasa
raksasa dunia industri.
Sintaks-sintaks yang akan kamu pelajari di bab ini adalah Menu Wajib Makanan Sehari-Hari
jika kamu berencana terjun ke ekosistem React.js, Vue, atau Next.js. Tanpa menguasai ketiganya
(Destructuring, Spread, dan Modules), kamu akan mabuk laut membaca barisan kode Aplikasi Frontend Modern.
🧳 1. Membongkar Koper (Destructuring)
Bayangkan kamu baru pulang dari Prancis membawa Koper (Object) berisi baju, parfum, dan tas. Dulu, kamu harus mengambil isinya satu per satu. Dengan Destructuring, kamu bisa membongkar isi koper secara instan ke dalam variabel-variabel dengan satu baris kode!
Destructuring juga bisa dipakai untuk Array const [pertama, kedua] = ["A", "B"], namun
penggunaannya pada Object jauh lebih disukai oleh komunitas React.
🦠 2. Jurus Membelah Diri (Spread Operator ...)
Titik tiga (...) ini disebut Spread Operator. Fungsinya adalah untuk
mengeluarkan/menaburkan seluruh isi sebuah Koper (Array/Object) supaya isinya membaur atau dileburkan
ke tempat / variabel keranjang baru. Fitur ini sangat krusial dalam React karena State Management
menuntut kita agar TIDAK mengubah Array/Object asli (harus Cloning).
📦 Penaburan isi Array
const kelasPagi = ["Andi", "Budi"];
const kelasMalam = ["Cici", "Dodi"];
// ...mengeluarkan isi & meleburnya di Array baru
const gabung = [...kelasPagi, ...kelasMalam];
console.log(gabung);
// Hasil: ["Andi", "Budi", "Cici", "Dodi"]
🧬 Kloning & Modifikasi Object
const mobilLama = { merk: "Honda", warna: "Putih" };
// Salin semua isinya, tapi ubah warnanya!
const mobilBaru = {
...mobilLama,
warna: "Merah Candy"
};
console.log(mobilBaru);
// { merk: "Honda", warna: "Merah Candy" }
📑 3. Berbagi Bekal Lintas Dokumen (ES Modules)
Masalah purba dari HTML biasa adalah: semua file `.js` milikmu nyampur baur dan variabelnya saling menimpa satu
sama lain seperti mangkok Gado-Gado yang tumpah ruangannya. ES Modules menyelesaikan ini. Kini
file JavaScript tertutup mandiri (Terisolasi). Kamu harus dengan sengaja "mengekspor"
(export) kode dari dalam, dan dengan sengaja "mengimpor" (import) ke tujuannya.
export const pi = 3.14;
export function perkalian(a, b) {
return a * b;
}
// Ambil Fungsi memakai Kurung Kurawal (Destructuring)
import { perkalian, pi } from './utils/math.js';
console.log("Angka PI:", pi);
console.log("2 x 5 =", perkalian(2, 5));
// Jika kamu menggunakan Node.js/React,
// file terpisah menjagamu dari kekacauan kode raksasa!
Status Keamanan Browser Biasa
Sistem import/export ini akan diblokir
oleh keamaan browser karena mencegah peretasan melalui file lokal (CORS policy). Ia hanya bisa
berjalan jika kamu memutar server lokal (seperti Live Server, XAMPP, atau Vite/Next.js) dan
menyematkan type="module" pada tag HTML script kamu.
🎯 Ujian Kenaikan Sabuk: Kombinasi Sihir Modern
Bagaimana resep rahasia programmer React menggabungkan data lama (State), mencampurkannya dengan fitur baru dari input pengguna, lalu membongkarnya menjadi kartu nama UI yang indah? Mari kita praktikkan.
Hasil Render Akhir (Card Profil)
John (#99)
Hak Akses: Admin
*Perhatikan bagaimana "Guest" tergantikan oleh "Admin" hanya karena ...infoInput
diletakkan di sisi sebelah kanan ...profilServer. Teknik ini disebut Override State.