# Getting Started with Modern JavaScript — Destructuring

The two most used data structures in JavaScript are `Object` and `Array`. The **destructuring assignment** introduced in ECMAScript 2015 is a shorthand syntax that allows us to extract array values or object properties into variables. In this article, we go through the syntax of both data structures and give examples when you can use them.

# Destructuring Arrays

In ES5 you could access items in an array by index:

```js
var fruit = ['apple', 'banana', 'kiwi'];

var apple = fruit[0];
var banana = fruit[1];
var kiwi = fruit[2];
```

With ES6 destructuring, the code becomes simpler:

```js
const [apple, banana, kiwi] = fruit;
```

Sometimes you might want to skip over items in the array being destructured:


```js
const [,,kiwi] = ['apple', 'banana', 'kiwi'];
```

Or you can save the other items in an array with the **rest** pattern:

```js
const [apple, …rest] = ['apple', 'banana', 'kiwi'];

console.log(rest); // -> ['banana', 'kiwi']
```

> Note that the destructuring assignment pattern works for any iterable.

# Destructuring Objects

**Object destructuring** lets you extract properties from objects and bind them to variables. Instead of accessing `width` through `rectangle.width` we can access the property and assign it to a variable:

```js
const rectangle = { width: 5, height: 8 };

const { width } = rectangle;
```

What’s even better, _object destructuring_ can extract multiple properties in one statement. This makes the code clearer. The order of the properties does not matter.

```js
const { width, height } = rectangle;
```

If we want to change the name of the property we can do it using a colon:

```js
const { width: w, height: h } = rectangle;

console.log(w); // -> 5
```

Here we assign the property `width` from `rectangle` to a variable named `w`.

# Default Values

When you destructure on properties that are not defined, you get `undefined`:

```js
const { password } = {};

console.log(password); // -> undefined
```

You can provide default values for when the property you are destructuring is not defined:

```js
const [favorite = 'apple'] = [];
console.log(favorite); // -> apple

const { width = 100 } = {};
console.log(width); // -> 100
```

# Examples

There are many places where we can use destructuring to make the code terser. Let’s see some examples!

## String Manipulation

We could for example do some string manipulation on a name and directly assign to variables `firstName` and `lastName`:

```js
const [firstName, lastName] = 'Max Best'.split(' ');

// firstName = 'Max', lastName = 'Best'
```

## Swapping Variable Values

Let’s first do the ES5 swap:

```js
var me = 'happy', you = 'sad';

var temp = me;
me = you;
you = temp;

// me = 'sad', you = 'happy'
```

And now let’s swap back with ES6 destructuring:

```js
[me, you] = [you, me];

// me = 'happy', you = 'sad'
```

No more need for temporary variables!

## Function Parameter Objects

When you are passing multiple parameters it often makes sense to do it as an object. We can use _destructuring_ whenever we want to unpack its properties:

```js
function calculateArea({ width, height }) {
  console.log('Area is ' + width * height);
}

calculateArea({ width: 5, height: 6 }); 
// -> Area is 30
```

We can also set default values and change variable names:

```js
function calculateArea({ width: w = 10, height: h = 5 }) {
  console.log('Area is ' + w * h);
}

calculateArea({ height: 6 });
// -> Area is 60
```

## Multiple Return Values

If you need to return multiple values from a function you can return an array or object and destructure the result:

```js
function returnWidthAndHeight() {
  return [5, 10];
}

const [width, height] = returnWidthAndHeight();
// width = 5, height = 10
```

---

# Conclusion

Destructuring is a JavaScript expression that allows us to extract data from arrays and objects. In this article, we have explored the syntax and various ways we can use it in our code. Destructuring of arrays and objects is something that will make your code a bit shorter and cleaner all over the place.

%[https://www.educative.io/courses/game-development-js-tetris]