Destructuring — Mengambil Value dari Object dan Array

Cuma butuh order number dan total dari data order? Kalau order.orderId dan order.total ditulis berulang-ulang, kodenya jadi makin panjang. Makin banyak field yang kamu perlukan, makin banyak baris yang diawali order. yang sama.

Artikel ini membahas destructuring, cara mengambil hanya value yang kamu perlukan ke variable sekaligus, dicocokkan dengan nama key atau posisi.

Mengambil Hanya yang Kamu Perlukan, Berdasarkan Nama — Destructuring Object

Kalau order number, total, dan nama customer diambil dari 1 object order, maka kamu harus menulis baris seperti const orderId = order.orderId; sebanyak jumlah field-nya. Karena order. yang sama terus diulang, sekilas jadi susah dibedakan value mana yang sebenarnya dipakai di tiap baris.

Dengan destructuring (syntax untuk mengambil banyak value ke variable sekaligus, dicocokkan dengan nama key object atau posisi array), semua itu cukup ditulis dalam 1 baris: const { orderId, total } = order;. Nama key yang ditulis di dalam {} di sisi kiri langsung jadi nama variable, dan masing-masing diisi value dari property yang namanya sama.

Kalau sebuah key tidak ada, default-nya ditambahkan dengan =, seperti const { shippingFee = 500 } = order;. Kalau value-nya mau diambil dengan nama lain, tulis const { orderId: id } = order;.

Dari object nested, value di dalamnya bisa diambil langsung dengan bentuk const { customer: { name } } = order;. Bagian setelah : berubah maknanya tergantung apakah yang ditulis nama variable atau kurung kurawal.

customer: name mengambil value customer ke variable bernama name, sementara customer: { name } mengambil name dari dalam customer. Bentuk yang kedua tidak membuat variable bernama customer.

const order = {
  orderId: "ORD-1268",
  total: 12800,
  customer: { name: "Maya Chen", email: "maya@example.com" },
};

// Nama key langsung jadi nama variable
const { orderId, total } = order;
console.log(orderId);          // ORD-1268
console.log(total);            // 12800

// Beri default dengan = untuk key yang tidak ada
const { couponCode = "tidak ada" } = order;
console.log(couponCode);       // tidak ada

// Tulis nama variable lain setelah :
const { total: totalAmount } = order;
console.log(totalAmount);      // 12800

// Ambil value langsung dari dalam object nested
const { customer: { email } } = order;
console.log(email);            // maya@example.com

Dari object order, ambil hanya value yang kamu perlukan untuk ditampilkan, satu per satu. order sudah dideklarasikan.

① Ambil order number dan total sekaligus, lalu tampilkan dengan format "ORD-3120 / 8600 dollars".

② Ambil nama customer langsung dari dalam object nested, lalu tampilkan.

③ Ambil shipping fee dengan default 500, lalu tampilkan. order tidak punya field shipping fee.

④ Ambil order number ke variable bernama id, lalu tampilkan.

(Kalau berjalan dengan benar, penjelasan akan muncul.)

Mengambil Berdasarkan Urutan — Destructuring Array dan rest

Array tidak punya nama key, jadi pencocokannya memakai posisi. Mau menangani item pertama dan item ke-2 di cart secara terpisah? Alih-alih menulis cart[0] dan cart[1], kamu bisa menderetkan nama variable-nya dan mengambil semuanya sekaligus.

Syntax-nya const [firstItem, secondItem] = cart;. Value di index 0 dan 1 masuk berurutan dari kiri ke kanan. Untuk melewatkan sebuah posisi, cukup taruh koma saja, seperti const [, secondItem] = cart;.

Untuk posisi yang element-nya tidak ada, kamu bisa menambahkan default dengan = "(tidak ada)". Perhatikan, default-nya cuma dipakai kalau value di posisi itu undefined.

Kalau yang ada di sana null, maka null itu diambil apa adanya. Supaya null ikut diganti dengan default, pakai ?? yang sudah dibahas di artikel sebelumnya.

Untuk mengambil semua sisanya sekaligus, pakai rest syntax (menambahkan ... di sisi kiri pola destructuring untuk menampung semua value yang belum diambil ke dalam 1 array atau object).

Kalau kamu menulis const [firstItem, ...restItems] = cart;, maka restItems berisi semua item mulai dari item ke-2, dalam bentuk array. ... cuma boleh ditaruh di posisi paling akhir sisi kiri.

const cart = ["Wireless Mouse", "USB-C Hub", "Monitor Arm"];

// Diambil berurutan dari kiri ke kanan
const [firstItem, secondItem] = cart;
console.log(firstItem);            // Wireless Mouse
console.log(secondItem);           // USB-C Hub

// Koma tanpa nama variable akan melewatkan posisi itu
const [, , thirdItem] = cart;
console.log(thirdItem);            // Monitor Arm

// ... menampung semua sisanya sebagai array (namanya diganti karena yang ke-1 sudah dipakai di atas)
const [headItem, ...tailItems] = cart;
console.log(tailItems.join(", "));  // USB-C Hub, Monitor Arm

// Object juga bisa menampung sisanya
const product = { name: "USB-C Hub", price: 2480, stock: 12 };
const { name, ...spec } = product;
console.log(Object.keys(spec).join(", "));  // price, stock

Pisahkan isi cart jadi item pertama dan sisanya. cart sudah dideklarasikan.

① Pisahkan jadi item pertama dan sisanya (sisanya ditampung dalam 1 array), lalu tampilkan item pertamanya.

② Tampilkan berapa banyak item yang masuk ke "sisanya".

③ Ambil hanya item ke-2 memakai syntax yang melewatkan item pertama, lalu tampilkan.

④ Ambil item ke-5 dengan cara melewatkan 4 item pertama memakai koma, beri default "(tidak ada)", lalu tampilkan.

Pisahkan object produk jadi field yang dipakai untuk tampilan dan field sisanya. product sudah dideklarasikan.

① Ambil hanya nama produk, lalu tampung sisanya di object terpisah, dan tampilkan nama produknya.

② Tampilkan key dari object yang menampung sisanya, digabung dengan ", ".

③ Ambil jumlah stok dengan default 0 untuk berjaga-jaga kalau key-nya tidak ada, lalu tampilkan.