# How to destructure arrays and objects in JavaScript - part 2

Destructuring is one of the cool features that came with the release of ES6 in 2015, in the previous article on [How to destructure arrays and objects in JavaScript - part 1](https://theninja.blog/how-to-destructure-arrays-and-objects-in-java-script-part-1/), I discussed how destructuring works in arrays, this article focuses on objects and how to destructure them.

**Quick reminder in case you forgot how to destructure arrays:**

The code snippet below demonstrates how destructuring works in arrays, to know more, follow up on the previous article [here](https://theninja.blog/how-to-destructure-arrays-and-objects-in-java-script-part-1/).

```javascript
const colors = ['blue', 'red', 'yellow', 'green', 'purple'];
const [first, second, third, , fifth] = colors;
console.log(first); // 'blue'
console.log(fifth); // 'purple'
```

## How to destructure objects

> Destructuring arrays and objects in JavaScript are a bit similar in syntax but they still have their differences since they are not the same data type.

Object literals are denoted by the curly brace `{}`, so when destructuring objects, we do it like this:

```javascript
const dog = {
  name: 'Max',
  color: 'brown',
  legs: 4
};

const { name, color } = dog;
console.log(name); // 'Max'
console.log(color); // 'brown'
```

**Note:** The variables you set for the destructured properties have to be the _same_ as the property name on the original object, so if we did something like this:

```javascript
const dog = {
  name: 'Max',
  color: 'brown',
  legs: 4
};
const { owner } = dog;
console.log(owner); // undefined
```

Also, when destructuring objects, there's no need to skip properties because you can just specify what properties you want out of the object.

**You can assign default values to the variables**

Just like assigning default values in arrays work when destructuring, it's also possible to set default values in objects too, if the value of the variable evaluates to `undefined` the default value gets assigned.

for example:

```javascript
const dog = {
  name: 'Max',
  color: 'brown',
  legs: 4
};
const { owner = 'Steve' } = dog;
console.log(owner); // 'Steve'
```

**It's possible to change the variable name**

If you do wish to change the name of the variable to another (alias), you can do that by appending a colon followed by the variable name you wish to use, like this:

```javascript
const dog = {
  name: 'Max',
  color: 'brown',
  legs: 4
};
const { owner = 'Steve', legs: paws } = dog;
console.log(paws); // 4
console.log(legs); // reference error, undefined
```

As you see from the snippet, when you transfer a variable to an alias, that variable ceases to exist, so you can only refer to the alias you'd set now.

**You can also assign default values to aliases**

Yep, you can assign a default value to an alias just in case the original variable does not exist or evaluates to undefined. You do that by assigning the value after setting the alias.

```javascript
const dog = {
  name: 'Max',
  color: 'brown',
  legs: undefined
};
const { owner = 'Steve', legs: paws = 4 } = dog;
console.log(paws); // 4
```

_<center>neat right?</center>_

**Finally you can store the remaining properties in another object**

Using the rest operator `...`, you can store all remaining properties from the original object to a variable.

**Note:** This technique has to be used just before the closing curly brace:

```javascript
const dog = {
  name: 'Max',
  color: 'brown',
  legs: 4
};

const { color, ...rest } = dog;
console.log(rest); // {name: "Max", legs: 4}
```

In the next article, we'll be taking a deep dive into more advanced techniques in destructuring like nested destructuring and destructuring parameters of functions 😃.