Lecture ini membahas salah satu fitur ES6 yang sangat sering digunakan dalam JavaScript dan TypeScript, yaitu Array Destructuring.

Kalau disederhanakan, inti materinya adalah:

Array destructuring memungkinkan kita mengambil isi array dan langsung memasukkannya ke beberapa variable berdasarkan posisi/index-nya.

Daripada menulis:

const firstName = person[0];
const lastName = person[1];
const age = person[2];

kita bisa menulis:

const [firstName, lastName, age] = person;

Hasilnya sama, tetapi syntax kedua jauh lebih ringkas.

Mari kita bahas pelan-pelan.

1. Apa itu Destructuring?

Kata destructuring secara sederhana bisa kita pahami sebagai:

“Membongkar sebuah data menjadi beberapa variable.”

Misalnya kita punya array:

const person = ["John", "Smith", 28];

Array tersebut berisi:

index 0 → "John"
index 1 → "Smith"
index 2 → 28

Tanpa destructuring, kita mengambilnya satu per satu:

const firstName = person[0];
const lastName = person[1];
const age = person[2];

Sekarang bayangkan array kita punya 10 atau 20 data.

Kita akan melakukan:

const data1 = person[0];
const data2 = person[1];
const data3 = person[2];
const data4 = person[3];
...

Tentu saja jadi cukup merepotkan.

Di sinilah destructuring membantu.

2. Syntax Dasar Array Destructuring

Syntax dasarnya:

const [variable1, variable2, variable3] = array;

Contoh:

const person = ["John", "Smith", 28];

const [firstName, lastName, age] = person;

Hasilnya:

firstName → "John"
lastName  → "Smith"
age       → 28

Perhatikan bagian ini:

const [firstName, lastName, age]

[] di sebelah kiri bukan berarti kita sedang membuat array baru untuk menyimpan data dalam konteks ini.

Ini adalah destructuring pattern.

Kita sedang mengatakan kepada TypeScript/JavaScript:

“Ambil elemen array ini berdasarkan posisinya dan masukkan ke variable-variable berikut.”

3. Destructuring Berdasarkan Posisi

Ini adalah konsep paling penting dalam Array Destructuring.

Array destructuring bekerja berdasarkan position/index.

Misalnya:

const person = ["John", "Smith", 28];

const [firstName, lastName, age] = person;

Visualisasinya:

person
┌─────────┬─────────┬─────┐
│  John   │  Smith  │ 28  │
└─────────┴─────────┴─────┘
     0         1       2
     ↓         ↓       ↓
 firstName lastName   age

Jadi:

firstName → person[0]
lastName  → person[1]
age       → person[2]

Bukan berdasarkan nama.

4. Nama Variable Tidak Harus Sama dengan Isi Array

Misalnya:

const person = ["John", "Smith", 28];

const [a, b, c] = person;

Tetap valid.

Hasil:

a → "John"
b → "Smith"
c → 28

Karena yang menentukan adalah posisi, bukan nama variable.

Contoh lain:

const [x, y, z] = person;

Hasilnya tetap:

x → "John"
y → "Smith"
z → 28

Jadi jangan berpikir:

firstName → karena namanya firstName

Yang benar:

firstName → karena berada di posisi pertama

5. Kenapa Ini Disebut Destructuring?

Karena kita seperti “membongkar” array.

Awalnya:

const person = ["John", "Smith", 28];

Satu wadah:

┌───────────────────────┐
│ John | Smith | 28     │
└───────────────────────┘

Kemudian kita bongkar:

const [firstName, lastName, age] = person;

Menjadi:

firstName → John
lastName  → Smith
age       → 28

Jadi:

ARRAY
  ↓
DESTRUCTURING
  ↓
BEBERAPA VARIABLE

6. Destructuring Tidak Menghancurkan Array Asli

Ini poin penting yang disebut dalam lecture.

Misalnya:

const person = ["John", "Smith", 28];

const [firstName, lastName, age] = person;

Setelah destructuring, person masih ada.

Kita masih bisa:

console.log(person);

Hasil:

["John", "Smith", 28]

Dan kita juga punya:

console.log(firstName);
console.log(lastName);
console.log(age);

Hasil:

John
Smith
28

Jadi destructuring tidak menghapus atau menghancurkan array.

Lebih tepatnya:

person
   │
   ├── firstName
   ├── lastName
   └── age

Kita hanya mengambil nilai dari array dan memasukkannya ke variable.

7. Jumlah Variable Tidak Harus Sama dengan Jumlah Element

Misalnya array memiliki 3 element:

const person = ["John", "Smith", 28];

Kita hanya membuat 2 variable:

const [firstName, lastName] = person;

Ini valid.

Hasil:

firstName → "John"
lastName  → "Smith"

Bagaimana dengan 28?

Tidak dimasukkan ke variable mana pun.

Secara visual:

person

John      → firstName
Smith     → lastName
28        → tidak digunakan

Jadi:

Jumlah variable boleh lebih sedikit daripada jumlah element array.

8. Bagaimana Kalau Variable Lebih Banyak?

Sekarang kebalikannya.

Array:

const person = ["John", "Smith", 28];

Memiliki 3 element.

Tetapi kita membuat 4 variable:

const [firstName, lastName, age, gender] = person;

Apa yang terjadi?

firstName → "John"
lastName  → "Smith"
age       → 28
gender    → undefined

Kenapa?

Karena array hanya memiliki index:

0 → John
1 → Smith
2 → 28

Tidak ada:

index 3

Jadi:

gender

tidak mendapatkan value.

Hasilnya:

undefined

9. Visualisasi Jumlah Variable Lebih Banyak

ARRAY
┌─────────┬─────────┬─────┐
│  John   │  Smith  │ 28  │
└─────────┴─────────┴─────┘
     ↓         ↓       ↓
firstName  lastName   age
     
Tidak ada element berikutnya
            ↓
         gender
            ↓
       undefined

Jadi:

const [a, b, c, d] = [10, 20, 30];

hasil:

a // 10
b // 20
c // 30
d // undefined

10. Default Value

Karena variable bisa mendapatkan undefined, JavaScript/TypeScript menyediakan cara untuk memberikan default value.

Misalnya:

const person = ["John", "Smith", 28];

const [firstName, lastName, age, gender = "male"] = person;

Array hanya memiliki tiga element.

Jadi:

firstName → John
lastName  → Smith
age       → 28
gender    → ?

Karena tidak ada element keempat, maka digunakan default:

"male"

Hasil:

firstName → "John"
lastName  → "Smith"
age       → 28
gender    → "male"

11. Default Value Hanya Digunakan Jika Value-nya undefined

Ini konsep yang penting.

Misalnya:

const person = ["John", "Smith", 28];

const [firstName, lastName, age, gender = "male"] = person;

Karena tidak ada element keempat:

gender === undefined

maka:

gender = "male"

Tetapi kalau array memiliki value:

const person = ["John", "Smith", 28, "female"];

maka:

const [firstName, lastName, age, gender = "male"] = person;

hasilnya:

gender → "female"

Bukan "male".

Karena sudah ada value dari array.

Jadi rule-nya:

Ada value?
   │
   ├── YES → gunakan value dari array
   │
   └── NO / undefined → gunakan default value

12. Skip Element dengan Comma

Sekarang bagian yang sangat menarik.

Misalnya:

const person = ["John", "Smith", 28];

Kita ingin:

John  → firstName
Smith → tidak perlu
28    → age

Bagaimana caranya?

Gunakan comma:

const [firstName, , age] = person;

Perhatikan:

[firstName, , age]

Ada dua comma di bagian tengah.

Visualisasinya:

             index
               ↓
person → ["John", "Smith", 28]
            ↓       ↓      ↓
           [0]     [1]    [2]

             ↓       ↓      ↓

       firstName   skip    age

Hasil:

firstName → "John"
age       → 28

"Smith" tidak dimasukkan ke variable apa pun.

13. Kenapa Harus Ada Comma?

Ini sangat penting.

Kita tidak bisa menulis:

const [firstName, age] = person;

dan berharap:

firstName → John
age → 28

Tidak begitu.

Yang terjadi:

firstName → John
age       → Smith

Karena destructuring berdasarkan posisi.

index 0 → firstName
index 1 → age

Kalau kita ingin melewati index 1, kita harus mempertahankan posisinya:

const [firstName, , age] = person;

Jadi comma kosong itu seperti mengatakan:

“Lewati posisi ini.”

14. Contoh Skip Multiple Elements

Misalnya:

const numbers = [10, 20, 30, 40, 50];

Kita hanya mau 10 dan 50.

Kita bisa:

const [first, , , , fifth] = numbers;

Hasil:

first  → 10
fifth  → 50

Visual:

10    20    30    40    50
↓     ↓     ↓     ↓     ↓
first  -     -     -    fifth

Walaupun syntax seperti ini bisa digunakan, kalau terlalu banyak skip biasanya kita perlu mempertimbangkan apakah destructuring adalah cara paling jelas untuk kasus tersebut.

15. const atau let?

Lecture juga menjelaskan:

const [firstName, lastName, age] = person;

Kita juga bisa menggunakan:

let [firstName, lastName, age] = person;

Perbedaannya sama seperti penggunaan const dan let pada variable biasa.

Dengan const:

const [firstName, lastName] = person;

kita tidak bisa melakukan:

firstName = "Bob";

Karena firstName adalah constant.

Sedangkan dengan let:

let [firstName, lastName] = person;

firstName = "Bob";

boleh.

Jadi destructuring tidak mengubah aturan const dan let.

16. Destructuring Bukan Copy Array

Ini juga konsep yang bagus untuk dipahami.

Ketika kita melakukan:

const [firstName, lastName] = person;

kita tidak sedang membuat:

person → array baru

Kita sedang mengambil nilai element:

person[0] → firstName
person[1] → lastName

Secara konsep mirip dengan:

const firstName = person[0];
const lastName = person[1];

Hanya syntax destructuring lebih ringkas.

17. Perbandingan Sebelum dan Sesudah Destructuring

Tanpa destructuring

const person = ["John", "Smith", 28];

const firstName = person[0];
const lastName = person[1];
const age = person[2];

Kita harus:

1. Membuat variable.
2. Mengakses array.
3. Menulis index.
4. Mengulangi proses tersebut.

Dengan destructuring

const person = ["John", "Smith", 28];

const [firstName, lastName, age] = person;

Lebih singkat.

Secara konsep:

Tanpa destructuring:

variable ← array[index]
variable ← array[index]
variable ← array[index]


Dengan destructuring:

[variable, variable, variable] ← array

18. Contoh dengan Data Lebih Banyak

Misalnya:

const employee = [
    "Budi",
    "Santoso",
    30,
    "Developer",
    "Jakarta"
];

Tanpa destructuring:

const firstName = employee[0];
const lastName = employee[1];
const age = employee[2];
const job = employee[3];
const city = employee[4];

Dengan destructuring:

const [firstName, lastName, age, job, city] = employee;

Jauh lebih mudah dibaca.

Kita langsung bisa melihat hubungan:

employee
    ↓
[firstName, lastName, age, job, city]

19. Contoh Skip Data

Misalnya kita hanya membutuhkan:

• nama depan
• umur
• kota

Tidak membutuhkan last name dan job.

Kita bisa:

const employee = [
    "Budi",
    "Santoso",
    30,
    "Developer",
    "Jakarta"
];

const [firstName, , age, , city] = employee;

Hasil:

firstName → "Budi"
age       → 30
city      → "Jakarta"

Ini sangat berguna ketika kita hanya membutuhkan beberapa posisi tertentu.

20. Contoh Default Value

Misalnya:

const user = ["Budi", "Santoso"];

Kita ingin mengambil:

const [firstName, lastName, age = 18] = user;

Hasil:

firstName → "Budi"
lastName  → "Santoso"
age       → 18

Karena array tidak punya element pada index 2.

21. Jangan Salah Memahami = pada Destructuring

Perhatikan:

const [firstName, lastName, age = 18] = person;

= di sini bukan assignment biasa seperti:

age = 18;

Ini berarti:

“Kalau element untuk age bernilai undefined, gunakan 18 sebagai default.”

Contoh:

const person = ["John", "Smith"];

const [firstName, lastName, age = 18] = person;

Karena:

person[2]

tidak ada, maka:

age = 18

22. Array Destructuring vs Akses Index

Mari bandingkan secara langsung.

Contoh:

// biasa
const firstName = person[0];
const lastName = person[1];
const age = person[2];

vs:

// destructuring
const [firstName, lastName, age] = person;

23. Hal Terpenting: Posisi Variable = Posisi Element

Kalau ada satu hal yang harus kamu ingat dari lecture ini, ingat ini:

ARRAY DESTRUCTURING = BERDASARKAN POSISI

Contoh:

const data = ["A", "B", "C"];

const [x, y, z] = data;

Maka:

x → index 0 → A
y → index 1 → B
z → index 2 → C

Kalau kita ubah urutannya:

const [z, x, y] = data;

maka:

z → A
x → B
y → C

Nama variable sama sekali tidak menentukan element mana yang diambil.

Posisi yang menentukan.

24. Mental Model yang Sangat Mudah

Bayangkan kamu punya tiga kotak:

ARRAY:

┌─────────┬─────────┬─────┐
│  John   │  Smith  │ 28  │
└─────────┴─────────┴─────┘
     ↓         ↓       ↓
     0         1       2

Kemudian kamu menyiapkan tiga kotak kosong:

┌────────────┬────────────┬─────────┐
│ firstName  │ lastName   │   age   │
└────────────┴────────────┴─────────┘
       ↓            ↓           ↓
       0            1           2

Destructuring mengatakan:

kotak 0 → kotak 0
kotak 1 → kotak 1
kotak 2 → kotak 2

Itulah seluruh konsep Array Destructuring.

25. Pola Lengkap yang Perlu Kamu Hafalkan

Basic

const [a, b, c] = array;

Hanya mengambil sebagian

const [a, b] = array;

Skip element

const [a, , c] = array;

Default value

const [a, b = defaultValue] = array;

Kombinasi skip + default

const [a, , c = 100] = array;

26. Contoh Lengkap

const person = ["John", "Smith", 28];

const [
    firstName,
    lastName,
    age,
    gender = "male"
] = person;

console.log(firstName);
console.log(lastName);
console.log(age);
console.log(gender);
console.log(person);

Output:

John
Smith
28
male
["John", "Smith", 28]

Perhatikan:

gender → male

karena tidak ada element keempat.

Dan:

person

tetap utuh.

27. Contoh dengan Skip

const person = ["John", "Smith", 28];

const [firstName, , age] = person;

console.log(firstName);
console.log(age);

Output:

John
28

Smith dilewati.

Kenapa?

Karena:

[firstName, , age]

berarti:

index 0 → firstName
index 1 → skip
index 2 → age

28. Hubungannya dengan ES6

Destructuring diperkenalkan di ECMAScript 2015 (ES6).

ES6 membawa banyak fitur modern JavaScript, salah satunya:

Destructuring

Dan syntax ini sangat umum digunakan sekarang, baik dalam:

• JavaScript
• TypeScript
• React
• Node.js
• frontend development
• backend development

Jadi mempelajari destructuring memang sangat penting.

29. Kesalahan yang Sering Dilakukan Pemula

Kesalahan 1 — Mengira berdasarkan nama

const person = ["John", "Smith", 28];

const [age, firstName, lastName] = person;

Ini bukan:

age       → 28
firstName → John
lastName  → Smith

Melainkan:

age       → "John"
firstName → "Smith"
lastName  → 28

Karena berdasarkan posisi.

Kesalahan 2 — Lupa comma ketika ingin skip

Salah untuk mengambil John dan 28:

const [firstName, age] = person;

Hasil:

firstName → John
age       → Smith

Yang benar:

const [firstName, , age] = person;

Kesalahan 3 — Mengira array berubah

const [firstName, lastName] = person;

Tidak membuat:

person

menjadi hilang.

Array tetap ada.

Kesalahan 4 — Mengira variable lebih banyak akan error

const [a, b, c, d] = [1, 2, 3];

Tidak error hanya karena variable lebih banyak.

Hasil:

a → 1
b → 2
c → 3
d → undefined

30. Cheat Sheet

                 ARRAY DESTRUCTURING
                         │
                         ↓
          Membongkar array menjadi variable
                         │
                         ↓
              BERDASARKAN POSISI
                         │
          ┌──────────────┼──────────────┐
          ↓              ↓              ↓
       normal           skip        default
          │              │              │
 [a, b, c] = arr   [a, , c] = arr  [a, b=10] = arr

Contoh:

const person = ["John", "Smith", 28];

Normal

const [firstName, lastName, age] = person;

Sebagian

const [firstName, lastName] = person;

Skip

const [firstName, , age] = person;

Default

const [firstName, lastName, age, gender = "male"] = person;

31. Kesimpulan Utama

Jadi, Array Destructuring adalah syntax ES6 untuk mengambil element dari array dan langsung memasukkannya ke beberapa variable.

Syntax dasarnya:

const [variable1, variable2, variable3] = array;

Hal-hal yang wajib kamu ingat:

1. Destructuring = membongkar array menjadi variable.
2. Assignment dilakukan berdasarkan posisi/index.
3. Index 0 masuk ke variable pertama.
4. Index 1 masuk ke variable kedua.
5. Index 2 masuk ke variable ketiga.
6. Jumlah variable boleh lebih sedikit dari element array.
7. Jika variable lebih banyak, yang tidak mendapat element akan bernilai undefined.
8. Kita bisa memberikan default value.
9. Kita bisa skip element menggunakan comma kosong.
10. Destructuring tidak menghancurkan array asli.
11. Bisa menggunakan const maupun let.

Kalimat paling penting untuk diingat:

const [a, b, c] = array artinya: ambil element ke-0 dari array ke a, element ke-1 ke b, dan element ke-2 ke c.

Kalau konsep ini sudah benar-benar dipahami, nanti ketika masuk ke Object Destructuring, kamu akan melihat pola yang mirip, tetapi ada satu perbedaan besar: array destructuring berdasarkan posisi, sedangkan object destructuring berdasarkan nama property.