Destructuring JavaScript: Objek, Array, Nilai Default, dan Rest

Destructuring Adalah Pencocokan Pola pada Bentuk

Destructuring memungkinkanmu menulis pola yang mencerminkan bentuk sebuah objek atau array, lalu mengambil nilai berdasarkan nama atau posisi dalam satu baris, mirip unpacking di Python. Alih-alih mengambil isi sebuah nilai property demi property, kamu menjelaskan apa yang kamu mau dan JavaScript menyerahkannya.

Dua jenisnya:

const user = { name: "Ada", age: 36 };
const { name, age } = user;
console.log(name, age);

const scores = [90, 85, 72];
const [first, second, third] = scores;
console.log(first, second, third);

Kurung kurawal mencocokkan objek berdasarkan nama property. Kurung siku mencocokkan array berdasarkan posisi. Dalam kedua kasus, variabel di sisi kiri adalah deklarasi baru: kamu tidak sedang mengakses index nilainya, melainkan menjelaskan sebuah pola yang mengekstrak bagian-bagiannya.

Sebelum destructuring ada, kode yang sama terlihat seperti ini:

const name = user.name;
const age = user.age;
const first = scores[0];
const second = scores[1];

Bukan masalah besar, tetapi jadi berulang-ulang kalau kamu melakukannya di setiap fungsi.

Destructuring Objek Memakai Nama Property

Untuk objek, nama di dalam kurung kurawal harus cocok dengan nama property pada sumbernya. Urutannya tidak penting, karena JavaScript mencarinya berdasarkan key.

const book = {
    title: "The Pragmatic Programmer",
    author: "Hunt & Thomas",
    year: 1999,
};

const { year, title } = book;
console.log(title, year);

Kalau sebuah property tidak ada di objek, variabelnya bernilai undefined, tanpa error:

const book = { title: "Refactoring" };
const { title, author } = book;
console.log(title);
console.log(author);

Perilaku undefined yang diam-diam ini penting diingat saat salah ketik nama property membuatmu bingung tengah malam.

Mengganti Nama Variabel

Kadang nama property di objek bukan nama yang kamu inginkan untuk variabelnya, mungkin karena bentrok dengan sesuatu di scope, atau API-nya memakai konvensi penamaan yang tidak kamu sukai. Pakai original: newName untuk mengikat ulang:

const response = { id: 42, msg: "ok" };
const { id: userId, msg: message } = response;

console.log(userId, message);

Bacalah sebagai "ambil property id, beri nama userId." Nama property ditulis lebih dulu, nama variabel baru setelah titik dua. Bentuknya mirip anotasi tipe di bahasa lain, padahal bukan.

Nilai Default

Kalau sebuah property mungkin tidak ada, beri nilai default langsung di polanya:

function connect(options) {
    const { host = "localhost", port = 5432, timeout = 5000 } = options;
    console.log(`connecting to ${host}:${port} (timeout ${timeout}ms)`);
}

connect({ host: "db.example.com" });
connect({});

Default hanya berlaku saat nilainya undefined. null, 0, dan "" semuanya diteruskan apa adanya:

const { retries = 3 } = { retries: null };
console.log(retries);

Yang satu itu sering menjebak. Kalau kamu ingin null juga memicu default, kamu butuh pengecekan eksplisit, atau pakai operator nullish coalescing ?? setelah destructuring.

Kamu bisa menggabungkan default dengan penggantian nama:

const { host: hostname = "localhost" } = {};
console.log(hostname);

Destructuring Array Memakai Posisi

Array tidak punya nama, hanya index, jadi polanya mencocokkan berdasarkan posisi. Pakai koma untuk melewati elemen yang tidak kamu perlukan:

const coords = [40.7, -74.0, 10];
const [lat, lon] = coords;
console.log(lat, lon);

const [, , altitude] = coords;
console.log(altitude);

Dua koma di awal berarti "lewati index 0 dan 1." Agak padat dilihat, tetapi praktis saat kamu hanya butuh satu nilai dari tengah.

Destructuring array sangat berguna untuk fungsi yang mengembalikan tuple:

function minMax(nums) {
    return [Math.min(...nums), Math.max(...nums)];
}

const [low, high] = minMax([5, 2, 9, 1, 7]);
console.log(low, high);

Pola yang sama muncul di mana-mana di React hooks: const [count, setCount] = useState(0).

Pola Rest: Mengumpulkan Sisanya

Di dalam pola destructuring, ...name mengumpulkan semua yang tidak dicocokkan berdasarkan nama atau posisi ke dalam variabel baru.

Untuk array, rest mengambil bagian ekornya:

const [head, ...tail] = [1, 2, 3, 4, 5];
console.log(head);
console.log(tail);

Untuk objek, rest mengambil setiap property yang tidak disebutkan secara eksplisit:

const user = { id: 1, name: "Ada", email: "ada@example.com", role: "admin" };
const { id, ...rest } = user;

console.log(id);
console.log(rest);

Inilah cara yang lazim untuk membuang satu field dari objek tanpa mengubah objek aslinya: rest adalah objek baru yang berisi semuanya kecuali id.

Rest harus menjadi elemen terakhir dalam pola. const [...init, last] adalah syntax error.

Destructuring Bersarang

Pola bisa bersarang. Kalau sebuah property juga berupa objek atau array, kamu bisa melakukan destructuring ke dalamnya dalam ekspresi yang sama:

const response = {
    status: 200,
    data: {
        user: { name: "Ada", age: 36 },
        tags: ["admin", "beta"],
    },
};

const {
    status,
    data: {
        user: { name },
        tags: [primaryTag],
    },
} = response;

console.log(status, name, primaryTag);

Sangat kuat, tetapi pakailah dengan hati-hati. Tiga tingkat kurung kurawal bersarang mulai terasa seperti teka-teki. Kalau sudah begitu, pindahkan nilai perantara ke variabelnya sendiri: kode yang mudah dibaca lebih baik daripada kode yang cerdik.

Satu jebakan: data: { user } di dalam pola tidak membuat variabel bernama data. Itu hanya perintah untuk "masuk ke data dan lanjutkan destructuring." Kalau kamu butuh data itu sendiri, tambahkan secara terpisah:

const response = { data: { user: { name: "Ada" } } };
const { data, data: { user } } = response;
console.log(data);
console.log(user);

Destructuring Parameter Fungsi

Tempat yang paling sering kamu pakai untuk destructuring adalah daftar parameter fungsi. Teknik ini mengubah "berikan sebuah objek options" menjadi signature yang menjelaskan dirinya sendiri:

function createUser({ name, email, role = "member", active = true }) {
    console.log({ name, email, role, active });
}

createUser({ name: "Ada", email: "ada@example.com" });
createUser({ name: "Boris", email: "b@example.com", role: "admin" });

Di tempat pemanggilan, bentuknya sama seperti pemanggilan dengan objek options biasa. Di dalam fungsi, kamu mendapat variabel bernama dengan nilai default, tanpa lagi boilerplate options.name || "default".

Satu jebakan tajam: memanggil fungsi ini tanpa argumen akan crash, karena kamu tidak bisa melakukan destructuring pada undefined. Beri nilai default untuk seluruh parameternya:

function createUser({ name = "anon", role = "member" } = {}) {
    console.log(name, role);
}

createUser();

= {} setelah pola berarti "kalau tidak ada argumen yang masuk, anggap saja itu objek kosong." Lalu default di dalamnya yang mengambil alih.

Menukar dan Mengisi Ulang Nilai

Destructuring juga bekerja dengan variabel yang sudah dideklarasikan, tetapi kamu butuh kurung biasa di sekitar pola objek (kalau tidak, JavaScript membaca { sebagai awal sebuah blok):

let a = 1;
let b = 2;

[a, b] = [b, a];
console.log(a, b);

let user = { name: "Ada" };
({ name: user.name } = { name: "Boris" });
console.log(user);

Penukaran nilai dengan array terlihat rapi. Pengisian ulang dengan objek lebih jarang, tetapi trik kurung ini layak diingat untuk saat kamu membutuhkannya.

Contoh Realistis

Menggabungkan sebagian besar materi di atas: sebuah fungsi yang memproses response API:

function summarise({
    status,
    data: { items = [] } = {},
    meta: { total = 0 } = {},
} = {}) {
    const [firstItem, ...rest] = items;
    return {
        ok: status === 200,
        first: firstItem?.name ?? "none",
        remaining: rest.length,
        total,
    };
}

console.log(summarise({
    status: 200,
    data: { items: [{ name: "alpha" }, { name: "beta" }, { name: "gamma" }] },
    meta: { total: 3 },
}));

console.log(summarise());

Setiap lapisan destructuring punya nilai default, jadi fungsinya tetap bertahan saat datanya tidak lengkap, tanpa tumpukan pengaman if. Itulah keuntungan sebenarnya: signature yang presisi sekaligus pemaaf.

Berikutnya: Object Spread

Destructuring mengambil nilai keluar dari objek. Spread memasukkannya: menyalin, menggabungkan, dan menimpa. Keduanya selalu berjalan beriringan di JavaScript modern, dan spread adalah topik berikutnya.