Masukkan Password
83 Destruktur Array
Lecture ini memperkenalkan Array Destructuring, salah satu syntax ES6 yang sangat sering dipakai di JavaScript modern.
Kalau dibuat sesederhana mungkin:
Array destructuring = mengambil isi Array lalu langsung memasukkannya ke beberapa variable berdasarkan posisi/index.
Sebelumnya kamu mungkin menulis seperti ini:
const person = ["John", "Smith", 28, "male"];
const firstName = person[0];
const lastName = person[1];
const age = person[2];
Dengan destructuring, semuanya bisa dilakukan dalam satu baris:
const [firstName, lastName, age] = person;
Hasilnya sama:
firstName → "John"
lastName → "Smith"
age → 28
Mari kita bahas dari dasar sampai nested array.
1. Apa itu destructuring?
Kata destructure bisa dibayangkan sebagai:
“Membongkar sesuatu menjadi bagian-bagian.”
Misalnya kamu punya sebuah kotak:
┌──────────────────────────────┐
│ ["John", "Smith", 28, "male"]│
└──────────────────────────────┘
Kamu ingin mengambil isinya satu per satu:
John → firstName
Smith → lastName
28 → age
male → gender
Destructuring memungkinkan kita melakukan itu dengan syntax:
const [firstName, lastName, age, gender] = person;
Jadi secara mental:
Array
↓
destructuring
↓
┌──────────┬──────────┬─────┬────────┐
│ firstName│ lastName │ age │ gender │
│ "John" │ "Smith" │ 28 │ "male" │
└──────────┴──────────┴─────┴────────┘
2. Sebelum destructuring
Misalnya kita punya:
const person = ["John", "Smith", 28, "male"];
Kalau tanpa destructuring:
const firstName = person[0];
const lastName = person[1];
const age = person[2];
const gender = person[3];
Perhatikan polanya:
person[0] → firstName
person[1] → lastName
person[2] → age
person[3] → gender
Cara ini tentu valid.
Tetapi agak panjang.
3. Dengan Array destructuring
Kita bisa menulis:
const [firstName, lastName, age, gender] = person;
JavaScript otomatis mencocokkan berdasarkan posisi.
person:
index 0 index 1 index 2 index 3
↓ ↓ ↓ ↓
"John" "Smith" 28 "male"
↓ ↓ ↓ ↓
firstName lastName age gender
Jadi:
console.log(firstName); // John
console.log(lastName); // Smith
console.log(age); // 28
console.log(gender); // male
4. Ini bukan berdasarkan nama
Ini bagian yang sangat penting.
Array destructuring bekerja berdasarkan posisi, bukan nama.
Misalnya:
const person = ["John", "Smith", 28, "male"];
const [age, firstName, gender] = person;
JavaScript tidak peduli nama variable-nya.
Yang terjadi:
index 0 → age
index 1 → firstName
index 2 → gender
Sehingga:
age // "John"
firstName // "Smith"
gender // 28
Walaupun namanya terasa tidak masuk akal.
Jadi:
Array destructuring = position matters.
5. Visual paling penting
Misalnya:
const person = ["John", "Smith", 28, "male"];
Kemudian:
const [firstName, lastName, age, gender] = person;
Bayangkan seperti zip:
PERSON ARRAY
────────────────────────────
index 0 → "John"
↓
firstName
index 1 → "Smith"
↓
lastName
index 2 → 28
↓
age
index 3 → "male"
↓
gender
Atau:
["John", "Smith", 28, "male"]
↓ ↓ ↓ ↓
first last age gender
6. Harus menggunakan const?
Tidak.
Kamu bisa menggunakan:
const [firstName, lastName] = person;
atau:
let [firstName, lastName] = person;
Sama seperti variable biasa.
Gunakan const kalau variable hasil destructuring tidak akan di-reassign.
const [firstName, lastName] = person;
Kalau nanti:
firstName = "David";
tidak boleh.
Kalau menggunakan:
let [firstName, lastName] = person;
maka boleh:
firstName = "David";
7. Destructuring tidak menghancurkan Array asli
Ini juga penting.
Misalnya:
const person = ["John", "Smith", 28, "male"];
const [firstName, lastName] = person;
Array person tetap ada:
console.log(person);
hasil:
["John", "Smith", 28, "male"]
Destructuring hanya mengambil nilai untuk dimasukkan ke variable.
Tidak seperti:
splice()
→ mengubah Array
sort()
→ mengubah Array
reverse()
→ mengubah Array
Destructuring bukan operasi untuk mengubah Array.
8. Kalau variable lebih sedikit daripada element Array
Misalnya:
const person = ["John", "Smith", 28, "male"];
Kita hanya ingin nama:
const [firstName, lastName] = person;
Hasil:
firstName // "John"
lastName // "Smith"
Bagaimana dengan:
28
"male"
Tidak masalah.
Element tersebut hanya tidak kita ambil.
["John", "Smith", 28, "male"]
↓ ↓
first last
28 → tidak diambil
male → tidak diambil
Jadi kamu tidak harus membuat variable untuk semua element.
Ini salah satu keuntungan destructuring.
9. Bagaimana cara melewati element di tengah?
Nah, ini bagian yang agak unik.
Misalnya:
const person = ["John", "Smith", 28, "male"];
Kita ingin:
firstName → John
lastName → Smith
gender → male
Kita tidak ingin membuat variable untuk 28.
Kalau kita menulis:
const [firstName, lastName, gender] = person;
SALAH untuk tujuan tersebut.
Hasilnya:
firstName → John
lastName → Smith
gender → 28
Kenapa?
Karena position:
index 0 → firstName
index 1 → lastName
index 2 → gender
10. Gunakan comma untuk skip
Kita perlu meninggalkan posisi kosong:
const [firstName, lastName, , gender] = person;
Perhatikan:
[firstName, lastName, , gender]
↑
posisi kosong
Hasil:
firstName // "John"
lastName // "Smith"
gender // "male"
Visual:
ARRAY
────────────────────────────
index 0 → John → firstName
index 1 → Smith → lastName
index 2 → 28 → SKIP
index 3 → male → gender
11. Kenapa ada dua comma?
Perhatikan:
[firstName, lastName, , gender]
Setelah lastName ada:
,
lalu posisi kosong:
,
Secara sederhana, comma tersebut memberi tahu JavaScript:
“Lewati element di posisi ini.”
Ini sering disebut elision dalam konteks destructuring, tetapi istilah itu belum perlu kamu hafalkan.
Cukup ingat:
[,] → skip posisi
12. Kalau variable lebih banyak daripada element Array?
Misalnya:
const person = ["John", "Smith", 28, "male"];
const [
firstName,
lastName,
,
gender,
city
] = person;
Array hanya punya empat element.
Sedangkan variable meminta lima posisi.
Maka:
firstName // "John"
lastName // "Smith"
gender // "male"
city // undefined
Kenapa?
Karena tidak ada element ke-5.
13. Posisi yang tidak tersedia menjadi undefined
Misalnya:
const numbers = [10, 20];
const [a, b, c] = numbers;
Hasil:
a // 10
b // 20
c // undefined
Visual:
Array:
[10, 20]
↓ ↓
a b
c
↓
tidak ada data
↓
undefined
Ini nyambung dengan materi undefined yang sudah kamu pelajari.
14. Default value dalam destructuring
Nah, kalau tidak ada value, kita bisa memberikan default value.
Contoh:
const person = ["John", "Smith", 28, "male"];
const [
firstName,
lastName,
,
gender,
city = "London"
] = person;
Karena city tidak punya element dari Array:
city → undefined
maka default:
"London"
digunakan.
Hasil:
city // "London"
15. Bentuk default value
Syntax-nya:
const [variable = defaultValue] = array;
Contoh:
const [name = "Guest"] = [];
Hasil:
name // "Guest"
Karena Array kosong.
16. Kalau value tersedia, default tidak digunakan
Misalnya:
const person = ["John", "Smith", 28, "male", "Mumbai"];
const [
firstName,
lastName,
,
gender,
city = "London"
] = person;
Sekarang ada value:
index 4 → "Mumbai"
Maka:
city // "Mumbai"
Bukan "London".
Jadi aturan default:
Ada value?
↓
YA → gunakan value tersebut
TIDAK / undefined
↓
gunakan default
17. Ini mirip default parameter function
Kamu sebelumnya sudah belajar:
function greet(name = "Guest") {
console.log(name);
}
Kalau tidak diberikan:
greet();
→ "Guest"
Destructuring juga punya konsep serupa:
const [name = "Guest"] = [];
→ "Guest"
Jadi konsepnya:
tidak ada value
↓
gunakan default
18. Tetapi hati-hati: default hanya bekerja ketika undefined
Misalnya:
const person = [undefined];
const [name = "Guest"] = person;
hasil:
name // "Guest"
Karena value-nya undefined.
Tetapi:
const person = [null];
const [name = "Guest"] = person;
hasil:
name // null
Default tidak digunakan.
Jadi:
undefined → default digunakan
null → null tetap digunakan
Untuk level sekarang, yang paling penting adalah memahami default sebagai:
“Kalau tidak ada nilai yang bisa diberikan ke variable tersebut, gunakan nilai cadangan.”
19. Nested Array Destructuring
Sekarang bagian yang lebih menarik.
Misalnya Array kita seperti ini:
const person = [
"John",
"Smith",
28,
"male",
["Mumbai", "India"]
];
Perhatikan element terakhir ternyata merupakan Array lain:
person
│
├── "John"
├── "Smith"
├── 28
├── "male"
└── ["Mumbai", "India"]
↑
nested Array
Kita ingin:
firstName → John
lastName → Smith
gender → male
city → Mumbai
country → India
20. Gunakan nested square brackets
Kita bisa menulis:
const [
firstName,
lastName,
,
gender,
[city, country]
] = person;
Perhatikan:
[city, country]
Ini adalah destructuring untuk nested Array.
21. Cara JavaScript membaca syntax tersebut
Array:
[
"John",
"Smith",
28,
"male",
["Mumbai", "India"]
]
Destructuring:
[
firstName,
lastName,
,
gender,
[city, country]
]
Pasangkan:
"John"
↓
firstName
"Smith"
↓
lastName
28
↓
skip
"male"
↓
gender
["Mumbai", "India"]
↓
[city, country]
Kemudian nested Array:
["Mumbai", "India"]
↓ ↓
city country
Hasil:
firstName // "John"
lastName // "Smith"
gender // "male"
city // "Mumbai"
country // "India"
22. Kenapa perlu [city, country]?
Ini bagian yang sangat penting untuk memahami nested destructuring.
Kalau kita menulis:
const [
firstName,
lastName,
,
gender,
city,
country
] = person;
Apa yang terjadi?
Array utama hanya punya:
index 4 → ["Mumbai", "India"]
Jadi:
city
↓
["Mumbai", "India"]
country
↓
undefined
Karena nested Array dianggap sebagai satu element dari Array utama.
23. Visualisasinya
Tanpa nested destructuring:
person
│
├── index 0 → "John"
├── index 1 → "Smith"
├── index 2 → 28
├── index 3 → "male"
└── index 4 → ["Mumbai", "India"]
↑
satu element
Maka:
city
mendapat:
["Mumbai", "India"]
Dengan nested destructuring:
const [
firstName,
lastName,
,
gender,
[city, country]
] = person;
Kita mengatakan:
“Element index 4 ini ternyata Array. Bongkar Array itu juga.”
Jadi:
person
↓
index 4
↓
["Mumbai", "India"]
↓
├── city
└── country
24. Nested destructuring bisa lebih dalam
Secara konsep bisa saja:
const data = [
"John",
["Mumbai", ["India", "Asia"]]
];
Bisa dibongkar dengan:
const [
name,
[city, [country, continent]]
] = data;
Hasil:
name → John
city → Mumbai
country → India
continent → Asia
Tidak perlu sering menggunakan nesting sedalam ini dalam kode sehari-hari, tetapi penting memahami bahwa destructuring mengikuti struktur data.
25. Destructuring berdasarkan struktur
Ini mental model yang sangat bagus:
Array biasa:
[value1, value2, value3]
↓ ↓ ↓
var1 var2 var3
Nested Array:
[value1, [value2, value3]]
↓ ↓
var1 [var2, var3]
↓
dibongkar
Jadi syntax destructuring sebenarnya mencoba mengikuti bentuk Array.
26. Contoh yang dekat dengan project kamu
Misalnya movie punya genre:
const genres = ["action", "sci-fi", "drama"];
Kita bisa mengambil genre pertama dan kedua:
const [firstGenre, secondGenre] = genres;
Hasil:
firstGenre // "action"
secondGenre // "sci-fi"
Kalau hanya ingin genre pertama:
const [firstGenre] = genres;
Hasil:
firstGenre // "action"
Ini jauh lebih readable daripada:
const firstGenre = genres[0];
Keduanya benar, hanya destructuring lebih praktis ketika mengambil beberapa element sekaligus.
27. Contoh dengan hasil find()
Ini nanti akan sangat berguna.
Misalnya:
const person = {
name: "John",
age: 28
};
Untuk object nanti kita akan belajar:
const { name, age } = person;
Tetapi jangan tertukar:
Array
Gunakan:
[]
const [first, second] = array;
Object
Gunakan:
{}
const { name, age } = object;
Lecture ini baru membahas Array destructuring. Object destructuring akan dibahas berikutnya.
28. Array destructuring vs Object destructuring
Ini sangat penting untuk lecture berikutnya.
Array
Berdasarkan posisi:
const person = ["John", "Smith", 28];
const [firstName, lastName, age] = person;
index 0 → firstName
index 1 → lastName
index 2 → age
Object
Berdasarkan property/key:
const person = {
name: "John",
age: 28
};
const { name, age } = person;
property "name" → name
property "age" → age
Jadi:
ARRAY
→ posisi
OBJECT
→ nama property
Ini salah satu perbedaan paling penting yang perlu kamu ingat.
29. Destructuring bisa dilakukan langsung dari Array literal
Tidak harus selalu punya variable Array terlebih dahulu.
Misalnya:
const [first, second, third] = [10, 20, 30];
Hasil:
first // 10
second // 20
third // 30
Prosesnya:
[10, 20, 30]
↓
[first, second, third]
30. Bisa digunakan dengan let
Contoh:
let [firstName, lastName] = ["John", "Smith"];
Kemudian:
firstName = "David";
boleh.
Tetapi:
const [firstName, lastName] = ["John", "Smith"];
binding variable-nya tidak boleh di-reassign.
31. Kesalahan umum #1 — mengira nama variable menentukan posisi
Misalnya:
const person = ["John", "Smith", 28];
const [age, name, lastName] = person;
Jangan berpikir:
age → cari angka 28
name → cari John
Bukan begitu.
JavaScript hanya melihat posisi:
index 0 → age
index 1 → name
index 2 → lastName
Jadi:
age // "John"
name // "Smith"
lastName // 28
32. Kesalahan umum #2 — lupa comma saat skip
Misalnya ingin:
John → firstName
Smith → lastName
male → gender
Jangan:
const [firstName, lastName, gender] = person;
Karena:
gender → 28
Yang benar:
const [firstName, lastName, , gender] = person;
33. Kesalahan umum #3 — mengira Array asli hilang
Destructuring:
const [firstName, lastName] = person;
tidak membuat:
person
menjadi kosong.
Array masih:
["John", "Smith", 28, "male"]
Destructuring hanya mengambil value-nya.
34. Kesalahan umum #4 — lupa bahwa element yang tidak ada adalah undefined
const numbers = [10, 20];
const [a, b, c] = numbers;
console.log(c);
hasil:
undefined
Karena:
index 2
↓
tidak ada
↓
undefined
Kalau mau cadangan:
const [a, b, c = 0] = numbers;
hasil:
c // 0
35. Destructuring sangat berguna ketika mengambil return value
Misalnya sebuah function mengembalikan Array:
function getUser() {
return ["John", "Smith", 28];
}
Tanpa destructuring:
const user = getUser();
const firstName = user[0];
const lastName = user[1];
const age = user[2];
Dengan destructuring:
const [firstName, lastName, age] = getUser();
Ini jauh lebih ringkas.
36. Hubungan dengan method Array yang sudah kamu pelajari
Ini mulai menjadi penting dalam JavaScript modern.
Misalnya:
const movies = [
{ name: "Movie A", rating: 4.5 },
{ name: "Movie B", rating: 3.8 }
];
Nanti ketika menggunakan:
movies.map((movie) => {
...
});
kamu bisa menemukan syntax seperti:
movies.map(([a, b]) => ...)
atau dalam object:
movies.map(({ name, rating }) => ...)
Jadi destructuring akan sering muncul bersama:
map()
filter()
find()
forEach()
function parameters
Makanya syntax ini sangat penting untuk JavaScript modern.
37. Ringkasan semua fitur yang dibahas lecture
Basic
const [a, b, c] = array;
berdasarkan posisi:
index 0 → a
index 1 → b
index 2 → c
Skip element
const [a, , c] = array;
Artinya:
index 0 → a
index 1 → skip
index 2 → c
Tidak ada element
const [a, b, c] = [1, 2];
maka:
c // undefined
Default value
const [a, b = 10] = [1];
hasil:
a // 1
b // 10
Value tersedia → default tidak digunakan
const [a, b = 10] = [1, 20];
hasil:
a // 1
b // 20
Nested Array
const person = [
"John",
"Smith",
28,
"male",
["Mumbai", "India"]
];
const [
firstName,
lastName,
,
gender,
[city, country]
] = person;
Hasil:
firstName → John
lastName → Smith
gender → male
city → Mumbai
country → India
38. Cheat sheet super singkat
ARRAY DESTRUCTURING
──────────────────────────────────
const [a, b, c] = array;
→ berdasarkan POSISI
const [a, b] = [10, 20];
a = 10
b = 20
Skip:
const [a, , c] = [10, 20, 30];
a = 10
c = 30
Default:
const [a = 100] = [];
a = 100
Nested:
const [a, [b, c]] = [10, [20, 30]];
a = 10
b = 20
c = 30
🧠 Mental model terakhir
Bayangkan Array sebagai deretan kotak:
Array:
┌──────┬───────┬────┬────────┐
│ John │ Smith │ 28 │ male │
└──────┴───────┴────┴────────┘
↓ ↓ ↓ ↓
a b c d
Destructuring:
const [a, b, c, d] = person;
Posisi variable mengikuti posisi element.
Kalau ingin melewati:
const [a, b, , d] = person;
Kalau tidak ada value:
const [a, b, c = 100] = person;
Kalau element-nya Array lagi:
const [a, [b, c]] = person;
Jadi kalimat paling penting dari lecture ini adalah:
Array destructuring memungkinkan kita mengambil element-element Array ke dalam beberapa variable secara langsung, dan pencocokannya dilakukan berdasarkan posisi/index, bukan berdasarkan nama variable.
Dan ini akan menjadi fondasi penting untuk materi berikutnya: Object Destructuring, di mana aturan utamanya berubah dari “berdasarkan posisi” menjadi “berdasarkan nama property.”