## Array destructuring

### Basic variable assignment

```js
const foo = ["one", "two", "three"]

const [one, two, three] = foo
console.log(one)    // "one"
console.log(three)  // "three"
```

### Assignment separate from declaraion

```js
let a, b

[a, b] = [1, 2]
console.log(b)  // 2
```

### Default values

```js
let a, b

[a=5, b=7] = [1]
console.log(a)  // 1
console.log(b)  // 7
```

### Swapping variables

```js
let a = 1
let b = 3

[a, b] = [b, a]
```

### Parsing an array returned by a function

```js
function f() {
  return [1, 2]
}

let a, b
[a, b] = f()
console.log(a)  // 1
console.log(b)  // 2
```

### Ignoring some returned values

```js
function f() {
  return [1, 2, 3]
}

const [a, , b] = f()
console.log(a)  // 1
console.log(b)  // 3
```

### Assigning the rest of an array to a variable

```js
const [a, ...b] = [1, 2, 3]
console.log(a)  // 1
console.log(b)  // [2, 3]
```

## Object destructuring

### Basic assignment

```js
const o = { p: 42, q: true }
const { p, q } = o

console.log(p)  // 42
console.log(q)  // true
```

### Assignment without declaration

```js
let a, b

({ a, b } = { a: 1, b: 2 })
```

### Assigning to new variable names

```js
const o = { p: 42, q: true }
const { p: foo, q: bar } = o

console.log(foo)    // 42
console.log(bar)    // true
```

### Default values

```js
let { a=10, b=5 } = {a: 3}

console.log(a)  // 3
console.log(b)  // 5
```

### Setting a function paramenter's default value

```js
function drawES6Chart({ size = 'big', cords = { x: 0, y: 0 }, radius = 25 } = {}) {
  console.log(size, cords, radius)
}

drawES6Chart({
  cords: { x: 18, y: 30 },
  radius: 30
})
```

### Nested object and array destructuring

```js
const metadata = {
  title: 'Scratchpad',
  translations: [{
    locale: 'de',
    localization_tags: [],
    last_edit: '2014-04-14T08:43:37',
    url: '/de/docs/Tools/Scratchpad',
    title: 'JavaScript-Umgebung'
  }],
  url: '/en-US/docs/Tools/Scratchpad'
}

const { title: englishTitle, translations: [{ title: localeTitle }] } = metadata

console.log(englishTitle)   // "Scratchpad"
console.log(localeTitle)    // "JavaScript-Umgebung"
```

### For of iteration and destructuring

```js
const people = [{
  name: "Mike Smith",
  family: {
    mother: "Jane Smith",
    father: "Harry Smith",
    sister: "Samantha Smith"
  },
  age: 35
}, {
  name: "Tom Jones",
  family: {
    mother: "Norah Jones",
    father: "Richard Jones",
    brother: "Howard Jones"
  },
  age: 25
}]

for (const { name: n, family: { father: f } } of people) {
  console.log(`Name: ${n}, Father: ${f}`)
}

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"
```

### Pulling fields from objects passed as function parameter

```js
function userId({ id }) {
  return id
}

function whois({ displayName, fullName: { firstName: name } }) {
  console.log(`${displayName} is ${name}`)
}

const user = {
  id: 42,
  displayName: 'jdoe'
  fullName: {
    firstName: 'John',
    lastName: 'Doe'
  }
}

console.log(`userId: ${userId(user)}`)  // "userId: 42"
whois(user) // "jdoe is John"
```

### Computed object property names and destructuring

```js
let key = 'z'
let { [key]: foo } = { z: 'bar' }

console.log(foo)
```