# Destructuring with JavaScript
## What is Destructuring?
[Destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment), or destructuring assignment, is a JavaScript feature that makes it **easier to extract data from arrays and objects**, introduced in the [ES6 version of JavaScript](https://developer.mozilla.org/en-US/docs/Archive/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla).
----
At this point, we assume you already know how to extract data from arrays and objects. That means that you don’t NEED destructuring: **destructuring is a form of syntactic sugar**, which means that it is an easier way to write certain expressions, usually by being shorter and clearer than other forms. Even if you don’t use it yourself, you’ll probably see it in someone else’s code, so it’s valuable to understand.
---
## Destructuring Arrays
```javascript
let cars = ['ferrari', 'tesla', 'cadillac'];
```
If we wanted to access these cars individually and assign them to variables we could do this:
```javascript
let cars = ['ferrari', 'tesla', 'cadillac'];
let car1 = cars[0];
let car2 = cars[1];
let car3 = cars[2];
console.log(car1, car2, car3); // Prints: ferrari tesla cadillac
```
We can use destructuring to shorten our code and make it more concise:
```javascript
let cars = ['ferrari', 'tesla', 'cadillac'];
let [car1, car2, car3] = cars;
console.log(car1, car2, car3); // Prints: ferrari tesla cadillac
```
----
In the code above, we created **three variables (`car1`, `car2`, `car3`) that correspond to the three elements in the `cars` array**. Each variable name in the new array will be assigned the value of the corresponding element. As you can see, we are able to achieve what we did previously with three lines of code, in one! Imagine how many lines of code we would save working with an array with 10 elements!
---
## Destructuring Objects
We can also use **destructuring assignment with objects**. Let’s look at a basic use case in which we capture an object’s properties with new variables:
```javascript
let destinations = { x: 'TPE', y: 'KEL', z: 'TYN' };
let x = destinations.x;
let y = destinations.y;
let z = destinations.z;
console.log(x, y, z); // Prints TPE KEL TYN
```
With the simplified destructuring syntax, we access the values by **matching the variable names to the property names**.
```javascript
let destinations = { x: 'TPE', y: 'KEL', z: 'TYN' };
let { x, y, z } = destinations;
console.log(x, y, z); // Prints TPE KEL TYN
```
----
Using destructuring syntax, we’re able to **create new variables directly from an object’s properties**. In this case, we took the values of `destination.x`, `destination.y`, and `destination.z` and stored them in new variables `x`, `y`, `z`, respectively.
---
## Destructuring Function Parameters
Function arguments are another place where destructuring is useful. Instead of accepting a complete object as an argument, a function can **use destructuring to capture specific properties as named parameters**.
----
```javascript
let truck = {
model: '1977 Mustang convertible',
maker: 'Ford',
city: 'Detroit',
year: '1977',
convertible: true
};
const printCarInfo = ({model, maker, city}) => {
console.log(`The ${model}, or ${maker}, is in the city ${city}.`);
};
printCarInfo(truck);
// Prints: The 1977 Mustang convertible, or Ford, is in the city Detroit.
```
----
The printCarInfo function **uses object destructuring to create three parameter variables**: `model`, `maker`, and `city`. When the function is invoked with the `truck` object, these parameters are assigned the corresponding values from that object.
Note that we don’t have to use every property from the `truck` object: **we only create parameter variables for the values that we need**.
---
Thank you :smile:
{"metaMigratedAt":"2023-06-15T21:34:14.732Z","metaMigratedFrom":"Content","title":"Destructuring with JavaScript","breaks":true,"contributors":"[{\"id\":\"bda81afc-f13e-4d82-9677-5359a2a615c9\",\"add\":3882,\"del\":15}]"}