Masukkan Password
84 Destruktur Objek
Lecture ini membahas Object Destructuring, dan ini adalah pasangan dari materi sebelumnya tentang Array Destructuring.
Kalau Array Destructuring punya aturan utama:
Array → ambil berdasarkan posisi/index.
Maka Object Destructuring punya aturan utama:
Object → ambil berdasarkan nama property.
Ini perbedaan yang sangat penting untuk kamu kuasai karena nanti Object Destructuring akan sering sekali muncul di JavaScript modern.
1. Review: Apa itu destructuring?
Destructuring adalah syntax untuk membongkar isi Array atau Object lalu memasukkannya ke variable.
Misalnya kita punya object:
const employee = {
name: "John",
age: 28,
gender: "male"
};
Kita ingin mengambil:
name
age
gender
menjadi variable terpisah.
Tanpa destructuring:
const name = employee.name;
const age = employee.age;
const gender = employee.gender;
Dengan destructuring:
const { name, age, gender } = employee;
Jauh lebih singkat.
2. Perbedaan Array Destructuring dan Object Destructuring
Ini bagian yang paling penting.
Array Destructuring
Menggunakan:
[]
dan berdasarkan posisi.
const person = ["John", "Smith", 28];
const [firstName, lastName, age] = person;
Visual:
["John", "Smith", 28]
↓ ↓ ↓
firstName lastName age
Object Destructuring
Menggunakan:
{}
dan berdasarkan nama property.
const employee = {
name: "John",
age: 28,
gender: "male"
};
const { name, age, gender } = employee;
Visual:
{
name: "John" → name
age: 28 → age
gender: "male" → gender
}
Ingat:
ARRAY
→ []
→ berdasarkan POSISI
OBJECT
→ {}
→ berdasarkan NAMA PROPERTY
3. Tanpa Object Destructuring
Misalnya:
const employee = {
name: "John",
age: 28,
gender: "male"
};
Kita ingin membuat variable:
name
age
gender
Cara biasa:
const name = employee.name;
const age = employee.age;
const gender = employee.gender;
Kita harus berulang kali menulis:
employee.name
employee.age
employee.gender
4. Dengan Object Destructuring
Kita bisa menulis:
const { name, age, gender } = employee;
JavaScript akan membaca:
property "name"
↓
variable name
property "age"
↓
variable age
property "gender"
↓
variable gender
Sehingga:
console.log(name);
console.log(age);
console.log(gender);
hasil:
John
28
male
5. Kenapa menggunakan {}?
Karena yang kita destructure adalah Object.
Jadi syntax-nya:
const { name, age, gender } = employee;
Perhatikan {}.
Sedangkan Array:
const [firstName, lastName, age] = person;
menggunakan [].
Jangan tertukar.
| Jenis | Syntax | Berdasarkan |
|---|---|---|
| Array destructuring | [] | posisi/index |
| Object destructuring | {} | nama property |
6. Apakah urutan variable penting?
Tidak.
Ini salah satu perbedaan besar dengan Array Destructuring.
Misalnya:
const employee = {
name: "John",
age: 28,
gender: "male"
};
Kita bisa menulis:
const { gender, name, age } = employee;
Tetap menghasilkan:
gender // "male"
name // "John"
age // 28
Kenapa?
Karena JavaScript mencari property berdasarkan nama.
gender
↓
cari employee.gender
↓
"male"
Bukan berdasarkan posisi.
7. Bandingkan dengan Array
Array:
const person = ["John", "Smith", 28];
const [age, firstName, lastName] = person;
Hasil:
age → "John"
firstName → "Smith"
lastName → 28
Karena Array berdasarkan posisi.
Sedangkan Object:
const employee = {
name: "John",
age: 28,
gender: "male"
};
const { gender, name, age } = employee;
Hasilnya tetap benar.
gender → employee.gender
name → employee.name
age → employee.age
Jadi:
Array peduli posisi. Object peduli nama property.
Ini adalah mental model utama lecture ini.
8. Nama variable harus sama dengan property
Misalnya:
const employee = {
name: "John",
age: 28,
gender: "male"
};
Kita menulis:
const { name, age, gender } = employee;
JavaScript mencari:
name → employee.name
age → employee.age
gender → employee.gender
Tetapi bagaimana kalau kita ingin nama variable-nya berbeda?
Misalnya kita tidak ingin:
name
tetapi ingin:
firstName
Bisa.
Kita menggunakan alias.
9. Alias dalam Object Destructuring
Syntax:
const { name: firstName } = employee;
Ini sering terlihat membingungkan pada awalnya.
Bacanya:
Ambil property
name, lalu simpan nilainya ke variablefirstName.
Visual:
employee
│
└── name: "John"
↓
firstName
Jadi:
console.log(firstName);
hasil:
John
10. Jangan salah memahami :
Ini sangat penting.
Dalam:
const { name: firstName } = employee;
name bukan variable yang dibuat.
Yang menjadi variable adalah:
firstName
Sedangkan:
name
adalah property yang kita cari di object.
Jadi:
name
↓
property yang dicari
firstName
↓
nama variable baru
11. Contoh lengkap alias
const employee = {
name: "John",
age: 28,
gender: "male"
};
const {
name: firstName,
gender: G
} = employee;
Hasil:
firstName // "John"
G // "male"
Tidak ada variable:
name
gender
Yang tersedia adalah:
firstName
G
12. Kenapa kita membutuhkan alias?
Misalnya object dari API punya property:
{
name: "John"
}
Tetapi di kode kita ingin menggunakan:
firstName
Kita bisa:
const { name: firstName } = employee;
Ini sangat berguna ketika nama property dari data tidak sesuai dengan nama yang ingin kita gunakan dalam program.
13. Kalau property tidak ada?
Misalnya:
const employee = {
name: "John",
age: 28,
gender: "male"
};
Kemudian:
const { department } = employee;
Object tidak mempunyai:
department
Maka:
console.log(department);
hasil:
undefined
Visual:
employee
│
├── name
├── age
└── gender
department
↓
tidak ditemukan
↓
undefined
Ini sama seperti konsep undefined yang sudah kamu pelajari sebelumnya.
14. Default value dalam Object Destructuring
Kita bisa memberikan default value.
Misalnya:
const { department = "IT" } = employee;
Karena:
employee.department
tidak ada, maka:
department
akan mendapatkan:
"IT"
Jadi:
console.log(department);
hasil:
IT
15. Kalau property-nya tersedia?
Misalnya object sekarang punya:
const employee = {
name: "John",
age: 28,
gender: "male",
department: "HR"
};
Kemudian:
const { department = "IT" } = employee;
Hasil:
department // "HR"
Bukan "IT".
Karena "HR" sudah tersedia.
Jadi:
Property ada?
↓
YA
↓
gunakan value property
Property tidak ada / undefined?
↓
gunakan default value
16. Default value + alias
Kita juga bisa menggabungkan alias dan default value.
Misalnya property object:
const employee = {
name: "John"
};
Kita ingin variable bernama division, tetapi property-nya bernama department.
Kita bisa:
const {
department: division = "IT"
} = employee;
Artinya:
cari property:
department
simpan ke variable:
division
kalau tidak ada:
gunakan "IT"
Hasil:
division // "IT"
Ini syntax yang lebih advanced, tapi konsepnya merupakan gabungan dari dua hal yang sudah kamu pelajari:
property alias
+
default value
17. Nested Object Destructuring
Sekarang masuk ke bagian yang lebih menarik.
Misalnya object kita seperti ini:
const employee = {
name: "John",
age: 28,
gender: "male",
workDetails: {
experience: 5,
company: "Google"
}
};
Perhatikan:
employee
│
├── name
├── age
├── gender
│
└── workDetails
│
├── experience
└── company
workDetails adalah property dari employee.
Tetapi workDetails sendiri berisi object.
18. Mengambil nested property secara biasa
Tanpa destructuring:
const experience = employee.workDetails.experience;
const company = employee.workDetails.company;
Kita harus menulis:
employee
↓
workDetails
↓
experience
19. Dengan Nested Object Destructuring
Kita bisa menulis:
const {
workDetails: {
experience,
company
}
} = employee;
Hasil:
experience // 5
company // "Google"
20. Cara membaca syntax tersebut
Ini terlihat rumit:
const {
workDetails: {
experience,
company
}
} = employee;
Baca dari luar ke dalam.
Pertama:
workDetails
berarti:
Cari property
workDetailsdariemployee.
Kemudian:
{
experience,
company
}
berarti:
Dari object
workDetails, ambil propertyexperiencedancompany.
Visual:
employee
↓
workDetails
↓
┌────────────────────┐
│ experience: 5 │
│ company: "Google" │
└────────────────────┘
↓ ↓
experience company
21. Kenapa harus ada dua {}?
Karena ada dua level object.
Data:
const employee = {
workDetails: {
experience: 5
}
};
Ada:
employee
↓
workDetails
↓
experience
Maka destructuring mengikuti struktur tersebut:
const {
workDetails: {
experience
}
} = employee;
Jadi:
{} → object employee
{} → object workDetails
22. Nested Object + Alias
Misalnya object:
const employee = {
workDetails: {
exp: 5
}
};
Kita ingin variable:
experience
bukan:
exp
Maka:
const {
workDetails: {
exp: experience
}
} = employee;
Baca:
Dari
employee, ambilworkDetails, kemudian dariworkDetailsambil propertyexp, lalu simpan nilainya ke variableexperience.
Hasil:
experience // 5
23. Nested Object + beberapa property
Misalnya:
const employee = {
workDetails: {
exp: 5,
company: "Google"
}
};
Kita bisa:
const {
workDetails: {
exp: experience,
company
}
} = employee;
Hasil:
experience → 5
company → Google
Perhatikan:
exp: experience
artinya:
property → variable
Sedangkan:
company
artinya:
property company
↓
variable company
karena namanya sama.
24. Object yang memiliki Array
Sekarang ada kasus lain.
Misalnya:
const employee = {
name: "John",
area: [
"Mumbai",
"India"
]
};
Perhatikan:
employee
│
├── name
│
└── area
↓
["Mumbai", "India"]
area adalah property object, tetapi value-nya adalah Array.
Kita ingin:
city → Mumbai
country → India
25. Object Destructuring + Array Destructuring
Kita bisa menggabungkan keduanya:
const {
area: [city, country]
} = employee;
Hasil:
city // "Mumbai"
country // "India"
Ini sangat penting karena menunjukkan bahwa destructuring bisa dikombinasikan.
Kita menggunakan:
{} → karena employee adalah Object
[] → karena area berisi Array
Visual:
employee
↓
area
↓
["Mumbai", "India"]
↓ ↓
city country
26. Cara membaca syntax tersebut
const {
area: [city, country]
} = employee;
Baca:
“Dari object
employee, ambil propertyarea. Karena valueareaadalah Array, bongkar Array tersebut menjadicitydancountry.”
Jadi ada dua destructuring:
Object Destructuring
↓
area
↓
Array Destructuring
↓ ↓
city country
27. Ini sebenarnya sangat powerful
Misalnya data kita:
const employee = {
name: "John",
age: 28,
workDetails: {
experience: 5,
company: "Google"
},
area: [
"Mumbai",
"India"
]
};
Kita bisa mengambil semuanya sekaligus:
const {
name,
age,
workDetails: {
experience,
company
},
area: [city, country]
} = employee;
Hasil:
name → John
age → 28
experience → 5
company → Google
city → Mumbai
country → India
Padahal sebelumnya mungkin kita harus menulis banyak:
const name = employee.name;
const age = employee.age;
const experience = employee.workDetails.experience;
const company = employee.workDetails.company;
const city = employee.area[0];
const country = employee.area[1];
Destructuring membuatnya lebih ringkas.
28. Hubungkan dengan project CIN/Cinix kamu
Ini akan sangat berguna untuk project yang sedang kamu pelajari.
Misalnya ada movie:
const movie = {
name: "Interstellar",
rating: 4.6,
releaseYear: 2014,
genre: ["sci-fi", "drama"]
};
Tanpa destructuring:
const name = movie.name;
const rating = movie.rating;
const releaseYear = movie.releaseYear;
const genre = movie.genre;
Dengan object destructuring:
const {
name,
rating,
releaseYear,
genre
} = movie;
Lebih singkat.
29. Bisa digabung dengan Array Destructuring
Karena:
genre
adalah Array:
["sci-fi", "drama"]
kita bisa langsung mengambil genre pertama dan kedua:
const {
name,
rating,
genre: [firstGenre, secondGenre]
} = movie;
Hasil:
name → "Interstellar"
rating → 4.6
firstGenre → "sci-fi"
secondGenre → "drama"
Perhatikan kombinasi:
movie
↓
Object
↓
genre
↓
Array
↓
firstGenre / secondGenre
30. Hubungan dengan find()
Kamu sudah belajar:
const selectedMovie = movies.find((movie) => {
return movie.id === movieId;
});
find() menghasilkan sebuah object movie.
Misalnya:
const selectedMovie = movies.find(...);
hasilnya:
{
name: "Interstellar",
rating: 4.6,
releaseYear: 2014,
genre: ["sci-fi", "drama"]
}
Kita bisa langsung destructure:
const {
name,
rating,
releaseYear,
genre
} = selectedMovie;
Kemudian:
console.log(name);
console.log(rating);
console.log(releaseYear);
console.log(genre);
Ini adalah contoh nyata bagaimana materi destructuring akan digunakan di project.
31. Destructuring di parameter function
Ini bahkan lebih sering digunakan.
Misalnya:
function displayMovie(movie) {
console.log(movie.name);
console.log(movie.rating);
}
Kita bisa menggunakan destructuring langsung di parameter:
function displayMovie({ name, rating }) {
console.log(name);
console.log(rating);
}
Kemudian:
displayMovie(movie);
JavaScript akan mengambil:
movie.name → name
movie.rating → rating
Ini nanti akan sering kamu lihat di JavaScript modern.
32. Jangan tertukar dengan object literal
Ada syntax:
const employee = {
name: "John"
};
Ini adalah object literal.
Sedangkan:
const { name } = employee;
ini adalah object destructuring.
Memang sama-sama menggunakan {}, tetapi konteksnya berbeda.
Object literal
Membuat object:
const employee = {
name: "John"
};
Object destructuring
Membongkar object:
const { name } = employee;
Mental model:
{} saat MEMBUAT object
→ object literal
{} saat MEMBONGKAR object
→ object destructuring
33. Kesalahan umum yang perlu dihindari
❌ Kesalahan 1: Mengira Object berdasarkan posisi
Tidak.
const { age, name } = employee;
tetap benar.
Urutan tidak penting.
❌ Kesalahan 2: Property tidak sama tetapi tidak menggunakan alias
Misalnya:
const employee = {
name: "John"
};
const { firstName } = employee;
Hasil:
firstName // undefined
Karena object tidak punya property:
firstName
Yang ada:
name
Kalau ingin variable firstName:
const { name: firstName } = employee;
❌ Kesalahan 3: Bingung dengan name: firstName
Ingat:
const { name: firstName } = employee;
bukan:
firstName property → name variable
Tetapi:
property name
↓
variable firstName
34. Perbandingan lengkap Array vs Object Destructuring
| Array | Object | |
|---|---|---|
| Syntax | [] | {} |
| Berdasarkan | Posisi | Nama property |
| Urutan penting? | ✅ Ya | ❌ Tidak |
| Bisa skip? | , | Tidak dengan konsep yang sama |
| Alias | Tidak seperti object | property: variable |
| Nested | [[...]] | { nested: {...} } |
| Default | [x = 10] | {x = 10} |
Contoh:
Array
const person = ["John", 28];
const [name, age] = person;
Object
const person = {
name: "John",
age: 28
};
const { name, age } = person;
Kelihatannya mirip, tetapi mekanismenya berbeda.
35. Cheat sheet Object Destructuring
Basic
const { name, age } = employee;
Artinya:
employee.name → name
employee.age → age
Alias
const { name: firstName } = employee;
Artinya:
employee.name → firstName
Default
const { department = "IT" } = employee;
Jika tidak ada:
department → "IT"
Alias + default
const {
department: division = "IT"
} = employee;
Artinya:
employee.department
↓
division
kalau undefined
↓
"IT"
Nested Object
const {
workDetails: {
experience,
company
}
} = employee;
Object berisi Array
const {
area: [city, country]
} = employee;
36. Mental model paling penting
Kalau kamu melihat:
const { name, age } = employee;
langsung pikir:
EMPLOYEE OBJECT
↓
cari property
↓
┌──────────────┐
│ name │ → name
│ age │ → age
└──────────────┘
Sedangkan kalau:
const [first, second] = person;
langsung pikir:
PERSON ARRAY
↓
berdasarkan posisi
↓
index 0 → first
index 1 → second
Jadi hafalkan dua kalimat ini:
Array destructuring = berdasarkan posisi.
Object destructuring = berdasarkan nama property.
37. Hubungan dengan materi sebelumnya
Sekarang materi yang sudah kamu pelajari mulai saling terhubung:
Array
↓
forEach()
map()
filter()
find()
findIndex()
sort()
splice()
includes()
Kemudian sekarang:
Array Destructuring
Object Destructuring
Misalnya:
movies
.filter(...)
.map(({ name, rating }) => {
return `${name}: ${rating}`;
});
Di sini ada beberapa materi sekaligus:
filter()
↓
memilih movie
map()
↓
memproses setiap movie
({ name, rating })
↓
Object Destructuring
template literal
↓
membuat String
Inilah alasan destructuring sangat penting: syntax ini akan muncul di banyak kode JavaScript modern.
🧠 Kesimpulan besar
Object Destructuring pada dasarnya adalah cara cepat untuk mengatakan:
“Dari object ini, saya mau mengambil property-property tertentu dan memasukkannya ke variable.”
Contoh paling dasar:
const employee = {
name: "John",
age: 28,
gender: "male"
};
const { name, age, gender } = employee;
Hasil:
name → John
age → 28
gender → male
Kalau nama variable berbeda:
const { name: firstName } = employee;
Kalau tidak ada property:
const { department } = employee;
// undefined
Kalau ingin default:
const { department = "IT" } = employee;
Kalau nested object:
const {
workDetails: {
experience
}
} = employee;
Kalau object berisi Array:
const {
area: [city, country]
} = employee;
Dan aturan emasnya:
┌─────────────────────────────────┐
│ ARRAY DESTRUCTURING │
│ │
│ const [a, b] = array; │
│ ↓ │
│ berdasarkan POSISI │
└─────────────────────────────────┘
┌─────────────────────────────────┐
│ OBJECT DESTRUCTURING │
│ │
│ const {name, age} = object; │
│ ↓ │
│ berdasarkan PROPERTY NAME │
└─────────────────────────────────┘
Kalau kamu sudah benar-benar memahami “Array = posisi, Object = property name”, maka fondasi destructuring-mu sudah sangat bagus.