Frontend Academy · Pelajaran

Destructuring dan Spread Object

Ekstrak properti object dengan destructuring, klon dan gabungkan object dengan operator spread, serta gunakan parameter rest dalam tanda tangan fungsi.

Destructuring dan Spread Object adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa Itu Destrukturisasi?

Destrukturisasi mengekstrak nilai dari objek dan larik ke dalam variabel bernama. Ini merupakan bentuk singkat dari beberapa pernyataan akses properti, sehingga kode menjadi ringkas dan menyampaikan dengan jelas properti mana yang digunakan.

Dasar-Dasar Destrukturisasi Objek

Gunakan kurung kurawal di sisi kiri penugasan untuk mengekstrak properti bernama.

const user = { name: 'Alice', age: 30, role: 'admin' };

// Without destructuring:
const name = user.name;
const age = user.age;

// With destructuring:
const { name, age, role } = user;
console.log(name); // 'Alice'
console.log(age);  // 30

Mengganti Nama Variabel yang Didestrukturisasi

Gunakan sintaks property: newName untuk mengganti nama properti saat melakukan destrukturisasi. Ini berguna ketika nama properti bertabrakan dengan variabel yang sudah ada atau kurang deskriptif.

const { name: userName, age: userAge } = user;
console.log(userName); // 'Alice'

Nilai Bawaan dalam Destrukturisasi

Jika suatu properti bernilai undefined, nilai bawaan akan digunakan. Anda dapat menggabungkannya dengan penggantian nama.

const { name, role = 'viewer', theme = 'light' } = user;
// role is 'admin' (from object)
// theme is 'light' (default — not in object)

Destrukturisasi Objek Bertingkat

Lakukan destrukturisasi objek bertingkat dengan memberikan pola bertingkat.

const order = {
  id: 42,
  customer: { name: 'Bob', email: 'bob@example.com' },
  total: 99.99
};
const { id, customer: { name, email }, total } = order;
console.log(name); // 'Bob'

Destrukturisasi Larik

Gunakan kurung siku untuk melakukan destrukturisasi larik berdasarkan posisi. Lewati elemen dengan tanda koma.

const [first, second, , fourth] = [10, 20, 30, 40];
console.log(first);  // 10
console.log(second); // 20
console.log(fourth); // 40

// Swap variables:
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1

Destrukturisasi Parameter Fungsi

Lakukan destrukturisasi langsung pada parameter fungsi agar API lebih bersih dan kode dapat menjelaskan dirinya sendiri. Teknik ini sangat umum pada fungsi komponen React.

function greet({ name, greeting = 'Hello' }) {
  return `${greeting}, ${name}!`;
}
greet({ name: 'Alice' });          // 'Hello, Alice!'
greet({ name: 'Bob', greeting: 'Hi' }); // 'Hi, Bob!'

Operator Penyebaran pada Objek

Operator penyebaran { ...obj } membuat salinan dangkal objek dan dapat menggabungkan objek. Kunci yang muncul belakangan akan menggantikan kunci sebelumnya jika terjadi benturan.

const defaults = { theme: 'light', lang: 'en', debug: false };
const userPrefs = { theme: 'dark', lang: 'fr' };
const settings = { ...defaults, ...userPrefs };
// { theme: 'dark', lang: 'fr', debug: false }

Operator Penyebaran pada Larik

[...arr] membuat salinan dangkal larik. Gunakan penyebaran untuk menggabungkan larik serta menambahkan item di awal atau akhir tanpa mengubah larik asli.

const base = [1, 2, 3];
const extended = [...base, 4, 5]; // [1, 2, 3, 4, 5]
const prepended = [0, ...base];   // [0, 1, 2, 3]
const combined = [...base, ...extended]; // [1, 2, 3, 1, 2, 3, 4, 5]

Sintaksis Sisa dalam Destrukturisasi

Sintaksis sisa mengumpulkan properti atau elemen yang tersisa ke dalam objek atau larik baru. Sisa harus menjadi pola terakhir.

const { name, ...rest } = { name: 'Alice', age: 30, role: 'admin' };
console.log(name); // 'Alice'
console.log(rest); // { age: 30, role: 'admin' }

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

Salinan Dangkal vs Salinan Mendalam

Penyebaran dan destrukturisasi sama-sama membuat salinan dangkal. Objek dan larik bertingkat masih berupa referensi bersama. Buat klon mendalam dengan structuredClone(obj) (modern) atau JSON.parse(JSON.stringify(obj)) (versi lama).

const a = { x: 1, nested: { y: 2 } };
const b = { ...a };
b.x = 99;           // a.x is still 1 (shallow copy OK)
b.nested.y = 99;    // a.nested.y is now 99! (reference shared)

Pemeriksaan Singkat

Apa yang dilakukan oleh const { a, ...rest } = obj?

Ringkasan: Destrukturisasi dan Penyebaran

Destrukturisasi objek mengekstrak properti bernama. Destrukturisasi larik mengekstrak berdasarkan posisi. Ganti nama dengan titik dua, tetapkan nilai bawaan dengan =. Gunakan pola bertingkat untuk objek mendalam. Penyebaran membuat salinan dangkal dan menggabungkan objek atau larik. Sisa mengumpulkan properti atau elemen yang tersisa.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Destructuring dan Spread Object” gratis?

Ya — teks lengkap “Destructuring dan Spread Object” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Destructuring dan Spread Object”?

Ekstrak properti object dengan destructuring, klon dan gabungkan object dengan operator spread, serta gunakan parameter rest dalam tanda tangan fungsi. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Destructuring dan Spread Object” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Frontend Academy