> For the complete documentation index, see [llms.txt](https://ga0-2.gitbook.io/seifxr10anz-content/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ga0-2.gitbook.io/seifxr10anz-content/week-13/day-3-destructuring-spread-rest-and-ajax/destructuring-assignment.md).

# Destructuring Assignment

Destructuring assignment allows you to extract values from arrays or objects and assign them to variables in a single statement.

#### Arrays

"Regular" way

```javascript
const fruits = ["apple", "kiwi", "banana", "tomato"]
const first = fruits[0]
const second = fruits[1]
```

Destructuring

```javascript
const fruits = ["apple", "kiwi", "banana", "tomato"]
const [first, second] = fruits
```

#### Objects

"Regular" way

```javascript
const account = {
  username: "fred",
  balance: 100000,
  type: "savings"
}
const username = account.username
const balance = account.balance
```

Destructuring

```javascript
const account = {
  username: "fred",
  balance: 100000,
  type: "savings"
}
const { username, balance } = account
```

#### Read More

* [JS Info](https://javascript.info/destructuring-assignment)
* [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)