Belajar JavaScript - Destructuring dan Assignment Terstruktur

#Pendahuluan

Begitu sering kode kalian terlihat seperti ini: const nama = pengguna.nama; const umur = pengguna.umur; — tiga baris untuk menyalin tiga properti. Destructuring mengubah pola itu menjadi satu pernyataan yang langsung mengekstrak nilai dari array atau objek ke variabel.

Fitur ES6 ini termasuk yang paling menyenangkan dipakai. Destructuring array memberi cara menukar variabel tanpa variabel sementara, dan destructuring objek membuat kode yang memakai parameter fungsi jauh lebih terbaca. Keduanya sering digabungkan dengan rest dan nilai default dari episode 7.

#Destructuring Array

#Mengekstrak Berdasarkan Posisi

Destructuring array mencocokkan variabel dengan elemen berdasarkan posisi:

Destructuring array dasar

const koordinat = [123, -7];
const [x, y] = koordinat;
 
console.log(x);
console.log(y);

const [x, y] = koordinat mengekstrak 123 ke x dan -7 ke y. Bentuk kiri tanda = menentukan bentuk struktur yang diharapkan, dan variabel diisi sesuai urutan. Ini jauh lebih ringkas daripada koordinat[0] dan koordinat[1].

#Mengabaikan Elemen dan Rest

Elemen yang tidak dibutuhkan bisa dilewati dengan koma kosong, dan rest menampung sisanya:

Mengabaikan elemen dan rest

const angka = [1, 2, 3, 4, 5];
 
const [, kedua, , keempat] = angka;
const [pertama, ...sisa] = angka;
 
console.log(kedua);
console.log(keempat);
console.log(pertama);
console.log(sisa);

const [, kedua, , keempat] = angka melewati posisi 1 dan 3 sehingga kedua bernilai 2 dan keempat bernilai 4. Sedangkan const [pertama, ...sisa] mengisi pertama dengan 1 dan sisa dengan [2, 3, 4, 5]. Rest dalam destructuring selalu menjadi elemen terakhir.

#Menukar Variabel Tanpa Variabel Sementara

Ini salah satu pola favorit: menukar dua variabel tanpa perlu variabel ketiga:

Menukar variabel

let a = "kiri";
let b = "kanan";
 
[a, b] = [b, a];
 
console.log(a);
console.log(b);

[a, b] = [b, a] membuat array sementara lalu mendestructuring-nya kembali — di bahasa lain, menukar dua nilai butuh tiga baris dan satu variabel bantu.

#Destructuring Objek

#Mengekstrak Berdasarkan Nama Kunci

Destructuring objek mencocokkan variabel dengan nama kunci, bukan posisi — urutan tidak penting:

Destructuring objek dasar

const pengguna = {
  nama: "Arman",
  role: "Engineer",
  tahun: 2020,
};
 
const { nama, tahun } = pengguna;
 
console.log(nama);
console.log(tahun);

const { nama, tahun } = pengguna mengekstrak properti nama dan tahun. Kunci yang tidak ada di dalam kurung kurawal diabaikan. Jika nama variabel yang diinginkan berbeda dari kunci, gunakan pola alias: const { username: namaUser } = user — berguna saat kunci data API tidak cocok dengan penamaan lokal.

#Nilai Default dan Destructuring Bersarang

#Menangani Properti yang Tidak Ada

Ketika properti tidak ada, hasil destructuring adalah undefined. Gabungkan dengan nilai default seperti pada parameter fungsi:

Nilai default pada destructuring

const pengguna = { nama: "Arman" };
 
const { nama, kota = "Jakarta", role = "Engineer" } = pengguna;
 
console.log(nama);
console.log(kota);
console.log(role);

const { nama, kota = "Jakarta" } = pengguna mengisi kota dengan default karena propertinya tidak ada di objek. Nilai default hanya berlaku untuk properti undefined, bukan untuk nilai falsy lain seperti null.

#Destructuring Bersarang

Data bertingkat bisa diekstrak langsung dengan struktur yang sama, misalnya dari respons API:

Destructuring bersarang

const response = {
  status: 200,
  data: {
    pengguna: {
      nama: "Arman",
      alamat: { kota: "Jakarta" },
    },
  },
};
 
const {
  status,
  data: {
    pengguna: {
      nama,
      alamat: { kota },
    },
  },
} = response;
 
console.log(status);
console.log(nama);
console.log(kota);

const { data: { pengguna: { nama } } } = response membongkar objek tiga tingkat dalam satu pernyataan: status, nama, dan kota. Destructuring bersarang harus mengikuti struktur data secara persis — beda satu tingkat saja hasilnya undefined.

#Destructuring pada Parameter Fungsi

#Mengekstrak Langsung di Parameter

Pola yang paling sering dipakai di dunia nyata: destructuring objek langsung di parameter fungsi:

Destructuring parameter fungsi

function tampilkanProfil({ nama, role, tahun }) {
  console.log(`${nama} - ${role} sejak ${tahun}`);
}
 
tampilkanProfil({ nama: "Arman", role: "Engineer", tahun: 2020 });

function tampilkanProfil({ nama, role, tahun }) menerima objek dan mengekstrak propertinya langsung di deklarasi parameter — pemanggil cukup mengirim satu objek. Ini pola standar di React dan banyak library lain.

#Menggabungkan dengan Default

Parameter terdestructuring juga bisa memakai nilai default:

Default pada parameter terdestructuring

function konfigurasi({ host = "localhost", port = 3000, ssl = false } = {}) {
  console.log(`Server: ${host}:${port}, ssl ${ssl}`);
}
 
konfigurasi({ port: 8080 });
konfigurasi();

function konfigurasi({ host = "localhost", port = 3000 } = {}) memberi nilai default per properti sekaligus default {} untuk seluruh objek. Dengan = {} di akhir, fungsi aman dipanggil tanpa argumen sama sekali.

#Penutup

Episode 11 membuat kalian mampu mengekstrak nilai secara terstruktur: destructuring array berdasarkan posisi dengan dukungan rest dan pola penukaran variabel, destructuring objek berdasarkan nama kunci dengan alias dan nilai default, destructuring bersarang, serta pola parameter fungsi yang menjadi standar di framework modern.

Inti yang harus dibawa pulang:

• Destructuring array mencocokkan variabel dengan posisi elemen.
• Destructuring objek mencocokkan variabel dengan nama kunci.
• Nilai default hanya berlaku untuk properti undefined.
• Rest ... menampung sisa elemen dan harus menjadi elemen terakhir.
• Destructuring bersarang harus mengikuti bentuk data persis.
• Parameter fungsi bisa terdestructuring dengan default objek {}.

Di episode 12 selanjutnya kita akan membahas scope, closure, dan konteks this — bagaimana JavaScript memutuskan variabel mana yang terlihat di mana, mekanisme closure yang membuat fungsi mengingat lingkungannya, serta empat aturan binding this. Ini episode tersulit dari fase dua, dan sekaligus yang paling memperdalam pemahaman kalian.