Masukkan Password
29 Destrukturisasi Objek
Lecture ini melanjutkan materi sebelumnya tentang destructuring, tetapi sekarang kita pindah dari Array Destructuring ke Object Destructuring.
Kalau Array Destructuring punya satu aturan utama:
Array → destructuring berdasarkan posisi/index.
Maka Object Destructuring punya aturan utama:
Object → destructuring berdasarkan nama property.
Ini perbedaan paling penting yang harus kamu pegang.
1. Apa Itu Object Destructuring?
Misalnya kita punya object:
const user = {
firstName: "John",
lastName: "Smith",
age: 28,
gender: "male"
};
Kalau kita ingin mengambil firstName, age, dan gender, cara biasa adalah:
const firstName = user.firstName;
const age = user.age;
const gender = user.gender;
Ini valid.
Tetapi kalau property-nya banyak, penulisannya bisa menjadi cukup panjang.
Object Destructuring memungkinkan kita menulis:
const { firstName, age, gender } = user;
Hasilnya:
firstName → "John"
age → 28
gender → "male"
Jadi secara sederhana:
OBJECT
↓
DESTRUCTURING
↓
VARIABLE
Kita “membongkar” property-property dari object menjadi variable.
2. Syntax Object Destructuring
Bentuk dasarnya:
const { property1, property2, property3 } = object;
Contoh:
const user = {
firstName: "John",
lastName: "Smith",
age: 28
};
const { firstName, lastName, age } = user;
Sekarang kita punya tiga variable:
firstName
lastName
age
dengan value:
firstName → "John"
lastName → "Smith"
age → 28
3. Kenapa Menggunakan {}?
Ini penting karena sebelumnya kita belajar Array Destructuring.
Array
Menggunakan:
const [a, b, c] = array;
Object
Menggunakan:
const { a, b, c } = object;
Jadi:
Array → []
Object → {}
Contohnya:
const person = ["John", "Smith", 28];
const [firstName, lastName, age] = person;
Sedangkan object:
const person = {
firstName: "John",
lastName: "Smith",
age: 28
};
const { firstName, lastName, age } = person;
4. Perbedaan Paling Penting: Array vs Object
Ini bagian yang sangat penting.
Array berdasarkan posisi
Misalnya:
const person = ["John", "Smith", 28];
const [a, b, c] = person;
Maka:
index 0 → a
index 1 → b
index 2 → c
Object berdasarkan nama property
Misalnya:
const user = {
firstName: "John",
age: 28
};
const { firstName, age } = user;
TypeScript/JavaScript mencari property:
firstName
age
di dalam object.
Visual:
user
│
├── firstName: "John"
│ ↓
│ firstName
│
└── age: 28
↓
age
Jadi:
Array → position matters.
Object → property name matters.
5. Tidak Peduli Urutan Property
Ini salah satu perbedaan menarik dengan array.
Misalnya:
const user = {
firstName: "John",
lastName: "Smith",
age: 28
};
Kita bisa menulis:
const { age, firstName, lastName } = user;
Hasilnya tetap:
age → 28
firstName → John
lastName → Smith
Kenapa?
Karena object destructuring mencari property berdasarkan nama, bukan posisi.
Bandingkan dengan array.
const person = ["John", "Smith", 28];
const [age, firstName, lastName] = person;
Hasilnya:
age → "John"
firstName → "Smith"
lastName → 28
Karena array berdasarkan posisi.
6. Analogi Sederhana
Bayangkan ada dua jenis lemari.
Array
Lemari array punya laci:
┌─────────┐
│ John │ ← laci 0
├─────────┤
│ Smith │ ← laci 1
├─────────┤
│ 28 │ ← laci 2
└─────────┘
Kita mengambil berdasarkan nomor laci.
Object
Lemari object punya label:
┌──────────────────┐
│ firstName: John │
├──────────────────┤
│ lastName: Smith │
├──────────────────┤
│ age: 28 │
└──────────────────┘
Kita tidak peduli urutan.
Kita bilang:
“Saya mau yang labelnya
age.”
Maka kita mendapatkan 28.
Itulah mengapa:
Array → INDEX
Object → PROPERTY NAME
7. Variable Harus Match dengan Property
Misalnya:
const user = {
firstName: "John",
age: 28
};
Kita menulis:
const { firstName, age } = user;
Ini bekerja karena object memiliki:
firstName
age
yang sesuai dengan nama variable.
Kalau kita menulis:
const { firstName, country } = user;
sementara object tidak punya:
country
maka secara JavaScript, country akan menjadi:
undefined
Namun dalam TypeScript, terutama ketika object memiliki tipe yang jelas, TypeScript dapat memberikan error karena property country tidak dikenal pada tipe object tersebut.
Misalnya:
const user = {
firstName: "John",
age: 28
};
const { country } = user;
TypeScript bisa mengatakan:
Property 'country' does not exist on type ...
Ini salah satu keuntungan TypeScript.
8. Kenapa JavaScript dan TypeScript Berbeda di Sini?
JavaScript lebih fleksibel.
Misalnya:
const user = {
firstName: "John",
age: 28
};
const { country } = user;
console.log(country);
Hasil:
undefined
JavaScript berkata:
“Tidak ada property
country? Oke, nilainyaundefined.”
TypeScript lebih ketat.
Kalau TypeScript mengetahui bahwa object tersebut tidak memiliki property country, TypeScript bisa memberi error sebelum program dijalankan.
TypeScript
↓
"country tidak ada di object ini"
↓
❌ Compile-time error
Ini merupakan contoh bagaimana TypeScript membantu mencegah kesalahan lebih awal.
9. Object Destructuring dengan let
Kita bisa menggunakan:
let { firstName, age } = user;
Kemudian variable dapat diubah:
firstName = "Bob";
age = 30;
Ini diperbolehkan karena kita menggunakan let.
10. Object Destructuring dengan const
Kita juga bisa:
const { firstName, age } = user;
Sekarang:
firstName = "Bob";
tidak diperbolehkan.
Karena variable hasil destructuring adalah constant.
Jadi sama seperti variable biasa:
const → tidak bisa reassignment
let → bisa reassignment
Destructuring tidak mengubah aturan const dan let.
11. Bagaimana Kalau Nama Variable Berbeda dari Property?
Nah, ini bagian yang sangat penting dan sering digunakan.
Misalnya object kita:
const user = {
firstName: "John",
age: 28
};
Kita ingin variable-nya bernama:
name
bukan:
firstName
Kita tidak bisa langsung:
const { name } = user;
karena object tidak punya property:
name
Yang ada adalah:
firstName
Untuk itu kita menggunakan alias.
12. Syntax Alias
Syntax-nya:
const { propertyName: variableName } = object;
Contoh:
const user = {
firstName: "John",
age: 28
};
const { firstName: name, age } = user;
Ini mungkin terlihat sedikit membingungkan pada awalnya.
Mari kita pecah:
firstName: name
Artinya:
firstName → property yang dicari
name → nama variable yang dibuat
Jadi:
user.firstName
↓
name
Hasil:
console.log(name);
akan menghasilkan:
John
13. Jangan Salah Membaca Alias
Misalnya:
const { firstName: name } = user;
Banyak pemula mengira:
“
firstNamedannameadalah dua variable.”
Bukan.
Yang dibuat sebagai variable adalah:
name
Sedangkan:
firstName
adalah nama property yang ingin kita ambil.
Jadi:
Object property Variable
↓ ↓
firstName → name
14. Contoh Lebih Lengkap
const user = {
firstName: "John",
lastName: "Smith",
age: 28,
gender: "male"
};
const {
firstName: name,
lastName,
age,
gender
} = user;
Sekarang variable yang tersedia:
name
lastName
age
gender
Bukan:
firstName
Karena kita membuat alias:
firstName: name
Jadi:
console.log(name);
hasil:
John
15. Kenapa Alias Berguna?
Bayangkan property object berasal dari API:
const user = {
first_name: "John",
last_name: "Smith"
};
Tetapi dalam code kita ingin menggunakan naming convention:
firstName
lastName
Kita bisa:
const {
first_name: firstName,
last_name: lastName
} = user;
Sekarang kita memiliki:
firstName → John
lastName → Smith
Ini sangat berguna ketika nama data dari sumber luar tidak sesuai dengan naming convention yang kita gunakan dalam code.
16. Array Destructuring vs Object Destructuring + Alias
Bandingkan.
Array
const person = ["John", "Smith", 28];
const [firstName, lastName, age] = person;
Penentuan berdasarkan:
POSITION
Object
const user = {
firstName: "John",
age: 28
};
const { firstName, age } = user;
Penentuan berdasarkan:
PROPERTY NAME
Object dengan alias
const { firstName: name } = user;
Artinya:
property firstName
↓
variable name
17. Apakah Object Asli Berubah?
Sama seperti Array Destructuring, object asli tidak dihancurkan.
Misalnya:
const user = {
firstName: "John",
age: 28
};
const { firstName, age } = user;
Object tetap:
console.log(user);
Hasil:
{
firstName: "John",
age: 28
}
Destructuring hanya mengambil value dari property tersebut.
Secara konsep:
user
│
├── firstName → firstName variable
│
└── age → age variable
Object aslinya tetap ada.
18. Contoh Object yang Lebih Kompleks
Misalnya:
const product = {
name: "Laptop",
price: 15000000,
brand: "Lenovo",
stock: 10
};
Tanpa destructuring:
const name = product.name;
const price = product.price;
const brand = product.brand;
Dengan destructuring:
const { name, price, brand } = product;
Sekarang kita bisa:
console.log(name);
console.log(price);
console.log(brand);
19. Tidak Harus Mengambil Semua Property
Misalnya object:
const product = {
name: "Laptop",
price: 15000000,
brand: "Lenovo",
stock: 10
};
Kita hanya membutuhkan name dan price.
Cukup:
const { name, price } = product;
Tidak perlu:
const { name, price, brand, stock } = product;
Jadi:
Kita hanya destructure property yang memang kita butuhkan.
20. Default Value pada Object Destructuring
Object destructuring juga bisa menggunakan default value.
Misalnya:
const user = {
name: "John"
};
const { name, age = 18 } = user;
Object tidak memiliki:
age
Maka:
name → John
age → 18
Konsepnya mirip dengan Array Destructuring.
const [age = 18] = [];
dan:
const { age = 18 } = user;
Keduanya memberikan default ketika hasil yang didapat adalah undefined.
21. Alias + Default Value
Kita juga bisa menggabungkan alias dengan default value.
Misalnya:
const user = {
firstName: "John"
};
const {
firstName: name,
age = 18
} = user;
Hasil:
name → John
age → 18
Jadi syntax bisa dikombinasikan.
22. Kesalahan yang Sering Dilakukan
Kesalahan 1 — Menggunakan nama variable yang tidak ada
const user = {
firstName: "John",
age: 28
};
const { name } = user;
name bukan property dari user.
Kalau TypeScript memiliki informasi tipe yang sesuai, ini akan ditolak.
Kalau memang ingin variable name, gunakan alias:
const { firstName: name } = user;
Kesalahan 2 — Mengira berdasarkan posisi
Misalnya:
const user = {
firstName: "John",
age: 28
};
const { age, firstName } = user;
Tidak masalah.
Hasil:
age → 28
firstName → John
Urutannya tidak penting.
Ini berbeda dengan array.
Kesalahan 3 — Menganggap firstName: name membuat dua variable
const { firstName: name } = user;
Yang dibuat adalah:
name
firstName hanya digunakan untuk mencari property.
23. Visualisasi Lengkap
Misalnya:
const user = {
firstName: "John",
lastName: "Smith",
age: 28
};
const {
firstName: name,
age
} = user;
Visualisasinya:
USER OBJECT
┌─────────────────────────┐
│ firstName: "John" │
│ lastName: "Smith" │
│ age: 28 │
└─────────────────────────┘
│
destructuring
│
┌───────┴───────┐
↓ ↓
firstName: name age
↓ ↓
name age
↓ ↓
"John" 28
Perhatikan:
firstName → name
adalah alias.
24. Perbandingan Array dan Object
Ini tabel yang paling penting dari dua lecture terakhir:
| Array Destructuring | Object Destructuring | |
|---|---|---|
| Syntax | [] | {} |
| Berdasarkan | posisi/index | nama property |
| Urutan penting? | Ya | Tidak |
| Bisa skip? | Ya, dengan comma | Tidak menggunakan pola yang sama |
| Alias | Tidak seperti object | Ya |
| Default value | Ya | Ya |
Contoh:
Array
const data = ["John", 28];
const [name, age] = data;
Artinya:
index 0 → name
index 1 → age
Object
const data = {
name: "John",
age: 28
};
const { name, age } = data;
Artinya:
property "name" → name
property "age" → age
25. Cara Mengingat dengan Mudah
Gunakan dua kata ini:
ARRAY → POSISI
OBJECT → NAMA
Atau:
Array Destructuring
↓
"Yang keberapa?"
Object Destructuring
↓
"Property apa?"
Misalnya:
const data = ["John", 28];
const [name, age] = data;
Kita bertanya:
Element keberapa?
Sedangkan:
const data = {
name: "John",
age: 28
};
const { name, age } = data;
Kita bertanya:
Property apa?
26. Kenapa Object Destructuring Sangat Berguna?
Dalam aplikasi modern, kita sering bekerja dengan object.
Contohnya data API:
const response = {
id: 100,
name: "John",
email: "john@example.com",
age: 28,
address: "Jakarta"
};
Kita mungkin hanya membutuhkan:
const { name, email } = response;
Daripada:
const name = response.name;
const email = response.email;
Destructuring membuat code lebih pendek dan sering kali lebih mudah dibaca.
Ini juga sangat sering muncul saat bekerja dengan function, API response, React, dan library JavaScript lainnya.
27. Mental Model
Bayangkan object seperti lemari dengan label:
OBJECT
┌─────────────────────┐
│ firstName → John │
│ lastName → Smith │
│ age → 28 │
│ gender → male │
└─────────────────────┘
Kemudian:
const { firstName, age } = user;
Artinya:
“Ambil property dengan label
firstNamedanage, lalu buat variable dengan nama tersebut.”
Kalau:
const { firstName: name } = user;
artinya:
“Cari property
firstName, tetapi simpan hasilnya dalam variable bernamaname.”
28. Cheat Sheet
Basic Object Destructuring
const { name, age } = user;
Artinya:
user.name → name
user.age → age
Alias
const { firstName: name } = user;
Artinya:
user.firstName → name
Bukan:
firstName → variable
name → variable
Hanya name yang menjadi variable.
Default value
const { age = 18 } = user;
Kalau user.age adalah undefined:
age → 18
Kombinasi alias + default
const {
firstName: name,
age = 18
} = user;
29. Kesimpulan
Object Destructuring adalah cara untuk mengambil property dari sebuah object dan memasukkannya ke variable dengan syntax yang lebih ringkas.
Syntax dasarnya:
const { property1, property2 } = object;
Konsep paling penting:
┌───────────────────────────────┐
│ ARRAY DESTRUCTURING │
│ │
│ berdasarkan POSITION / INDEX │
│ │
│ const [a, b] = array │
└───────────────────────────────┘
┌───────────────────────────────┐
│ OBJECT DESTRUCTURING │
│ │
│ berdasarkan PROPERTY NAME │
│ │
│ const { a, b } = object │
└───────────────────────────────┘
Dan kalau nama variable ingin berbeda dari property:
const { firstName: name } = user;
dibaca:
property firstName
↓
ambil value
↓
simpan ke variable name
Jadi, jangan tertukar:
🟦 Array Destructuring = posisi yang menentukan.
🟩 Object Destructuring = nama property yang menentukan.
Kalau kamu sudah menguasai dua kalimat itu, fondasi destructuring-mu sudah benar.