Apa itu destructuring dan apa yang bisa dilakukan?

Question

Accepted Answer

**Destructuring** membongkar nilai dari array atau properti dari objek ke dalam variabel terpisah dalam satu pernyataan yang mudah dibaca.

```js
// array destructuring (by position)
const [first, second] = [10, 20];      // first=10, second=20
const [a, , c] = [1, 2, 3];            // skip the middle → a=1, c=3

// object destructuring (by name)
const { name, age } = user;
const { name: userName } = user;        // rename → userName
const { city = "Unknown" } = address;   // default if missing
```

## Pola yang kuat

```js
// nested
const { address: { city } } = user;

// rest — grab the leftovers
const { id, ...rest } = obj;

// function parameters with defaults (very common)
function createUser({ name, role = "user" } = {}) { ... }

// swap variables without a temp
[x, y] = [y, x];
```

## Di mana Anda melihatnya terus-menerus

```js
// React
const [count, setCount] = useState(0);
function Card({ title, children }) { ... }

// imports, API responses
const { data, error } = await api.get("/users");
```

## Mengapa ini penting

Destructuring menghilangkan boilerplate (`const name = user.name; const age = user.age;` menjadi satu baris), membuat tanda tangan fungsi mendokumentasikan diri sendiri (Anda melihat dengan tepat prop mana yang digunakan), dan idiomatik dalam JS, React, dan Node modern.

Fitur nilai default dan rest juga membuat penanganan data opsional/parsial menjadi bersih.