Destructuring

Destructuring adalah sintaks untuk membongkar nilai dari object atau array langsung ke dalam variabel, dan polanya ditulis menyerupai bentuk asli datanya. Satu baris deklarasi dapat mengambil beberapa nilai sekaligus tanpa mengulang nama object atau array pemiliknya. Topik ini membahas pembongkaran object dan array, nilai default untuk bagian yang kosong, penggantian nama variabel, destructuring pada parameter fungsi, serta pembongkaran bersarang dan penukaran dua variabel. Nama fitur ini berarti membongkar struktur, karena yang dibongkar adalah nilai di dalam strukturnya, bukan strukturnya sendiri.

Membongkar object#

Pembongkaran object ditulis dengan kurung kurawal di sisi kiri, dan nama-nama di dalamnya mencari properti dengan nama yang sama pada object di sisi kanan. Pola { nomor, nama } berarti ambil properti nomor dan properti nama, lalu simpan masing-masing ke variabel bernama sama. Urutan penulisan tidak berpengaruh, karena pencocokannya melalui nama kunci, bukan posisi.

// Destructuring object: pola kurawal ditempelkan pada bentuk objectnya.
const anggota = { nomor: "A-1042", nama: "Citra", kelas: "11 IPA 2" };

const { nomor, nama } = anggota;

console.log(nomor);
console.log(nama);

A-1042
Citra

Properti kelas tidak ikut diambil karena tidak disebut pada polanya, dan itu wajar karena pembongkaran boleh mengambil sebagian saja. Nama yang diambil wajib persis sama dengan kuncinya, termasuk huruf besar dan kecilnya, sehingga { Nama } tidak akan menemukan kunci nama. Pembongkaran pada properti yang tidak ada tidak melempar error, melainkan menghasilkan undefined, dan bagian kosong inilah yang diisi oleh nilai default.

Membongkar array#

Pembongkaran array memakai kurung siku di sisi kiri, dan pencocokannya mengikuti urutan elemen. Pola [pertama, kedua] mengambil elemen indeks 0 dan indeks 1, sehingga posisi menentukan nilainya. Ini berbeda dengan object yang pencocokannya melalui nama kunci. Elemen di tengah boleh dilewati dengan menuliskan koma tanpa nama, dan jumlah variabel boleh lebih sedikit maupun lebih banyak daripada jumlah elemennya.

// Destructuring array: pola kurung siku mengikuti urutan elemennya.
const nilaiUjian = [88, 92, 79];

const [pertama, kedua, ketiga] = nilaiUjian;
const [, tengah] = nilaiUjian;

console.log(pertama);
console.log(ketiga);
console.log(tengah);

88
79
92

Baris const [, tengah] melewati elemen pertama tanpa memberinya nama, dan variabel tengah terisi elemen kedua. Pembongkaran array tidak mengubah array asalnya sama sekali, variabel di sisi kiri hanya menerima salinan nilai elemennya. Elemen yang dilewati dengan koma kosong harus dihitung dengan cermat, karena satu koma yang kurang menggeser seluruh pemetaan di belakangnya. Untuk array panjang, rest yang dibahas pada topik spread dan rest lebih aman daripada menulis banyak koma kosong. Pola yang lebih panjang daripada datanya juga sah, variabel tanpa pasangan elemen bernilai undefined, sama seperti indeks di luar jangkauan. Pembongkaran array paling berguna untuk data berurutan yang maknanya sudah jelas dari posisinya, misalnya baris hasil pembacaan tabel atau tiga nilai yang dikembalikan fungsi.

Nilai default dan penggantian nama#

Dua tambahan kecil membuat pembongkaran object jauh lebih tahan banting. Nilai default dipasangkan dengan tanda sama dengan pada pola, dan aktif ketika propertinya tidak ada atau bernilai undefined. Penggantian nama ditulis dengan titik dua, dan artinya ambil properti sebelum titik dua, lalu simpan ke variabel dengan nama sesudahnya. Keduanya boleh dipakai bersamaan pada satu pola.

// Default mengisi properti yang tidak ada, penggantian nama mengganti variabelnya.
const pengaturan = { tema: "gelap" };

const { tema, ukuranFont = 14 } = pengaturan;
const { tema: modeTampilan } = pengaturan;

console.log(tema, ukuranFont);
console.log(modeTampilan);

gelap 14
gelap

ukuranFont bernilai 14 meskipun pengaturan tidak memuatnya, karena default mengisi bagian yang kosong. Nilai default hanya aktif untuk undefined, sehingga properti yang bernilai null, 0, atau string kosong tetap dipakai apa adanya. Batas ini sengaja dibuat tegas, null dianggap nilai yang sengaja diberikan, bukan nilai yang hilang. Variabel modeTampilan memuat nilai tema yang sama, tetapi dengan nama yang lebih bermakna pada konteks pemakaiannya. Penggantian nama penting saat dua object dengan kunci yang sama dibongkar dalam satu lingkup, karena kedua nilai dapat dipisahkan tanpa variabel perantara.

Destructuring pada parameter fungsi#

Parameter fungsi juga bisa berupa pola destructuring, dan caranya sama seperti pada variabel biasa. Fungsi menerima satu object, lalu langsung membongkar properti yang dibutuhkan di daftar parameternya. Pemanggil tidak perlu mengingat urutan argumen, cukup menyebut nama properti untuk setiap nilai yang dikirim. Nilai default pada pola juga bekerja seperti biasa, sehingga parameter opsional tetap ditulis dengan rapi.

// Destructuring pada parameter: fungsi menerima object lalu membongkarnya.
function nilaiAkhir({ tugas, ujian, bobotTugas = 0.4 }) {
  return tugas * bobotTugas + ujian * (1 - bobotTugas);
}

console.log(nilaiAkhir({ tugas: 90, ujian: 80 }));
console.log(nilaiAkhir({ tugas: 90, ujian: 80, bobotTugas: 0.5 }));

84
85

Kedua hasil dihitung dari rumus yang sama, yaitu 90 dikali bobot ditambah 80 dikali sisa bobotnya. Pemanggilan pertama memakai bobot bawaan 0.4 sehingga menghasilkan 36 + 48 = 84, sedangkan pemanggilan kedua mengubah bobot menjadi 0.5 sehingga menghasilkan 85. Properti yang tidak dikirim pemanggil tidak memicu error, nilainya hanya undefined atau mengaktifkan defaultnya. Bila seluruh argumen bisa hilang, object parameter itu sendiri juga dapat diberi nilai default, misalnya { tugas, ujian } = {} di dalam kurung parameter. Pola ini lazim pada fungsi yang parameternya banyak dan sebagian bersifat opsional, karena satu object kecil lebih mudah dibaca daripada lima argumen berurutan.

Nested destructuring dan penukaran variabel#

Object dan array sering saling bersarang, dan pola destructuring mengikuti bentuk sarangnya. Properti yang bernilai object dapat dibongkar lebih dalam dengan menulis pola kurawal berikutnya di posisinya, dan aturannya tetap sama pada setiap tingkat. Pembongkaran bersarang sebaiknya secukupnya saja, karena pola yang terlalu dalam justru lebih sulit dibaca daripada beberapa penugasan biasa.

// Nested destructuring membongkar object yang berada di dalam object.
const siswa = { nama: "Budi", alamat: { kota: "Bandung", kodePos: "40115" } };

const { alamat: { kota } } = siswa;
console.log(kota);

// Dua variabel ditukar isinya dengan destructuring array.
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b);

Bandung
2 1

Variabel kota terisi dari dua tingkat sarang dalam satu baris, sedangkan nama tidak diambil karena polanya hanya menuruni alamat. Kunci yang salah tulis pada pola bersarang tidak memicu error, nilainya hanya undefined, sehingga pemeriksaan cepat dengan console.log sangat membantu saat polanya masih baru. Baris [a, b] = [b, a] menukar dua variabel tanpa variabel bantu, karena array sementara di sisi kanan dibentuk lebih dulu sebelum pembongkarannya dijalankan. Pola ini membutuhkan variabel yang sudah ada, sehingga a dan b dideklarasikan dengan let, dan itu sekaligus alasan pola penukaran tidak bekerja pada variabel const. Untuk data yang lebih dalam dari dua tingkat, beberapa penugasan biasa biasanya lebih mudah dipahami daripada satu pola panjang.

Ringkasan#

• Pola kurawal membongkar object melalui pencocokan nama kunci, sedangkan pola kurung siku membongkar array melalui urutan elemen, dan elemen tengah boleh dilewati dengan koma kosong.
• Nilai default aktif untuk properti atau elemen yang tidak ada maupun bernilai undefined.
• Titik dua pada pola mengganti nama variabelnya, misalnya { tema: mode }, dan keduanya dapat digabung menjadi { tema: mode = "terang" }.
• Pola destructuring dapat ditempelkan pada parameter fungsi, menyusuri sarang object sesuai bentuknya, dan menukar dua variabel melalui [a, b] = [b, a].

Referensi#

• Destructuring assignment — MDN Web Docs — Aturan lengkap pembongkaran object dan array beserta default dan penggantian nama.
• Destructuring assignment — javascript.info — Bab pembongkaran object, array, dan parameter fungsi dengan contoh bertahap.