Understanding Destructuring in JavaScript
Tags: javascript, webdev, beginners
Published: 2021-06-27 21:53:56

## Table of Contents
1. [What is Destructuring](#what-is-destructuring)
2. [Why Destructuring is useful](#why-destructuring-is-useful)
3. [Destructuring objects](#destructuring-objects)
4. [Destructuring arrays ](#destructuring-arrays)
5. [Bonus Part](#bonus-part)
6. [Resources](#resources)

## What is Destructuring?

>The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values 
from arrays, or properties from objects, into distinct variables.

In this post we will discuss how destructuring works on both `objects` and `arrays` in JavaScript.

## Why Destructuring is useful?

With destructuring we can read a property and assign its value to a variable without duplicating the property name. More than that, we can read multiple properties from the same object in just one statement. This is very useful especially when we are dealing with large or nested arrays and objects. 

At the end of the day destructuring is a syntactic sugar that
makes our development process easier, faster and more convenient!

## Destructuring objects

In the example below we create the object person that contains the fields name and age. Let's say that we want to extract these properties from the object.

### Without Destructuring

```js
const person = {
    name: 'Alex',
    age: '22',
};

const name = person.name;
const age =  person.age;

// Alex
console.log(name);
// 22
console.log(age);
```
In the example below we do the same, but now we are using destructuring.

### With Destructuring

```js
const person = {
    name: 'Alex',
    age: '22',
};
 
const { name, age } = person;

// Alex
console.log(name);
// 22
console.log(age);
```

`const { name, age } = person` is an object destructuring assignment. This statement defines the variables name and age, then assigns to them the values of properties `person.name` and `person.age` correspondingly.

Let's try to expand our previous example and add the nested object address in the object person.

### Without Destructuring
```js
const person = {
    name: 'Alex',
    age: '22',
    address: {
        street: 'Wall Street',
        number: 21
    }
};

const name = person.name;
const age =  person.age;
const street = person.address.street;
const number = person.address.number;

// Alex
console.log(name);
// 22
console.log(age);
// Wall Street
console.log(street);
// 21
console.log(number);
```

### With Destructuring

```js
const person = {
    name: 'Alex',
    age: '22',
    address: {
        street: 'Wall Street',
        number: 21
    }
};

const { 
    name, 
    age, 
    address,
    address: {
        street,
        number,
    }, 
} = person;

// Alex
console.log(name);
// 22
console.log(age);
// Wall Street
console.log(street);
// 21
console.log(number);

```
There are many cases where we would want to use a different name than what is provided on the object itself, so adding a colon after the property name allows us to rename it. This is especially useful when we are dealing with name collisions or when we are working on objects that use property names that are not valid variable names. In the example below we rename all the variables that we used before.

```js
const person = {
    name: 'Alex',
    age: '22',
    address: {
        street: 'Wall Street',
        number: 21
    }
};

const { 
    name: myName, 
    age: myAge, 
    address: {
        street: streetName,
        number: numberName,
    }, 
} = person;

// Alex
console.log(myName);
// 22
console.log(myAge);
// Wall Street
console.log(streetName);
// 21
console.log(numberName);
```


## Destructuring arrays

In the example below we create the array result. Let's say that we want to assign the array values to some variables.


### Without Destructuring

```js
const result = [1, 5, 'koala'];

const first = result[0];
const second = result[1];
const third = result[2];

// 1 5 'koala'
console.log(first, second, third);
```


### With Destructuring

```js
const result = [1, 5, 'koala'];
const [first, second, third] = result;

// 1 5 'koala'
console.log(first, second, third);
```

The way that destructuring works in the arrays is simple. The position of the variable name matches the values index in the array.

Moreover, you can do more complex things like skipping array elements or assigning the rest of the items in an array to a particular variable.

```js
const result = [1, 5, 'koala'];
const [,,third] = result;
const [first,...rest] = result;

// 'koala'
console.log(third);
// 1
console.log(first);
// [ 5, 'koala' ]
console.log(rest);

```

##Bonus Part

We can use Destructuring at function parameters, passing arguments that are coming from objects and arrays.

In the example below, we will use the object person and we will create the array cities. Then we will implement the function `printInfo` that prints the name of the person and the city that person lives. 

```js
const person = {
    name: 'Alex',
    age: '22',
    address: {
        street: 'Wall Street',
        number: 21
    }
};

const cities = ['Athens', 'New York', 'Tokyo'];

function printInfo({ name }, [,,city]) {
    console.log('My name is', name, "and i live in", city);
}

// My name is Alex and i live in Tokyo
printInfo(person, cities);
```
### Resources

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