Destructuring JS
Tags: beginners, javascript
Published: 2020-08-29 02:29:29

When working with JavaScript objects and/or arrays it can sometimes be helpful to extract properties/values and save them as individual variables. This can be achieved very efficiently with a process called destructuring.  

####Array Destructuring 
If we are given a large array we can extract just the first three elements using a form of destructuring, shown below:

```javascript
let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let [a, b, c] = array;

console.log(a) => 1
console.log(b) => 2
console.log(c) => 3
```

If we wanted `a` to represent the first element, `b` to represent the second element and `c` to represent the remaining elements we could modify our earlier expression as follows:

```javascript
let array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let [a, b, ...c] = array;

console.log(a) => 1
console.log(b) => 2
console.log(c) => [3, 4, 5, 6, 7, 8, 9]
```

We can also set default values for destructuring variables:

```javascript
let array = [1, 2];
let [a = 5, b = 5, c = 5] = array;

console.log(a) => 1
console.log(b) => 2
console.log(c) => 5
```

The last couple array destructuring techniques I'll cover are assigning an array that is a return value and the process for skipping elements:

```javascript
function returnArr() {
  return [1, 2, 3, 4, 5, 6];
}

let [a, ,b] = returnArr();

console.log(a) => 1
console.log(b) => 3
```

In the last example our function, `returnArr`, returns an array. We assign the first and third values of this array by using destructuring with a comma-separated empty value between our first and second variables (`a` & `b`).


####Object Destructuring 
Destructuring JavaScript objects is very similar to how we went about destructuring arrays. I have provided a basic example of object destructuring below:

```javascript 
let obj = {color: 'black/rust', size: 'large', breed: 'Rottweiler'};

let {color, size, breed} = obj;

console.log(color) => 'black/rust'
console.log(size) => 'large'
console.log(breed) => 'Rottweiler'
```

If you'd like to assign new variable names you can do so like this:

```javascript 
let obj = {color: 'black/rust', size: 'large', breed: 'Rottweiler'};

let {color: c, size: s, breed: b} = obj;

console.log(c) => 'black/rust'
console.log(s) => 'large'
console.log(b) => 'Rottweiler'
```

Object destructuring is very powerful when iterating over an array of many objects. It can be implemented into a function to minimize typing out long variable names. I have provided an example below:

```javascript
let dogs = [
  {
    name: "Bruno",
    stature: {
      weight: "70lbs",
      size: "large"
    },
    age: 1,
    breed: "Mutt"
  },
  {
    name: "Bat",
    stature: {
      weight: "6lbs",
      size: "tiny"
    },
    age: 3,
    breed: "Pomeranian"
  },
  {
    name: "Kiwi",
    stature: {
      weight: "65lbs",
      size: "large"
    },
    age: 14,
    breed: "Chocolate Lab"
  },
  {
    name: "Ralph",
    stature: {
      weight: "90lbs",
      size: "extra large"
    },
    age: 9,
    breed: "Rottweiler"
  }
];

for (let {name: pup, stature: {size: largeness}} of dogs) {
  let a;
  largeness === 'extra large' ? a = 'an' : a = 'a';
  console.log(`${pup} is ${a} ${largeness} doggo`)
}

=>

'Bruno is a large doggo'
'Bat is a tiny doggo'
'Kiwi is a large doggo'
'Ralph is an extra large doggo'
```

Destructuring both makes it easier to write out code and can make it much easier to read through code that may include deeply nested variables. Hope this run-through helped!

####Sources:

1. [MDN Web Docs - Destructuring Assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)