73 lines
1.9 KiB
Markdown
73 lines
1.9 KiB
Markdown
|
---
|
||
|
|
title: Destructuring Assignment
|
||
|
|
---
|
||
|
|
|
||
|
|
## Destructuring Assignment
|
||
|
|
|
||
|
|
Destructuring Assignment syntax is a Javascript expression that makes it possible to unpack values or properties from arrays or objects.
|
||
|
|
|
||
|
|
Lets say that you have an array that contains a first name and last name as it's two values, but you want to reassign those values to something more descriptive. You can use Destructuring to accomplish this.
|
||
|
|
|
||
|
|
**ES5 Destructuring**
|
||
|
|
|
||
|
|
```js
|
||
|
|
var fullName = ["John", "Smith"];
|
||
|
|
var firstName = fullName[0];
|
||
|
|
var lastName = fullName[1];
|
||
|
|
|
||
|
|
console.log(firstName, lastName); // John Smith
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
**ES6 Destructuring**
|
||
|
|
|
||
|
|
|
||
|
|
```js
|
||
|
|
const fullName = ["John", "Smith"];
|
||
|
|
const [firstName, lastName] = fullName;
|
||
|
|
|
||
|
|
console.log(firstName, lastName); // John Smith
|
||
|
|
|
||
|
|
```
|
||
|
|
|
||
|
|
The examples above show the benefit of using the ES6 Destructuring Assignment.
|
||
|
|
|
||
|
|
You can also use Destructuring on objects using a similar syntax
|
||
|
|
|
||
|
|
```js
|
||
|
|
const fullName = { first: "John", last: "Smith"};
|
||
|
|
const {first, last} = fullName;
|
||
|
|
|
||
|
|
console.log(first, last); // John Smith
|
||
|
|
```
|
||
|
|
|
||
|
|
Object Destructuring Assignment is a little bit different because the object must have properties with the names you are assigning. Therefore the code below would not work as intended.
|
||
|
|
|
||
|
|
```js
|
||
|
|
const fullName = { first: "John", last: "Smith"};
|
||
|
|
const {firstName, lastName} = fullName;
|
||
|
|
|
||
|
|
console.log(firstName, lastName); // undefined undefined
|
||
|
|
```
|
||
|
|
|
||
|
|
You can still achieve the desired result using the following syntax.
|
||
|
|
```js
|
||
|
|
const obj = {propertyName: value}
|
||
|
const {propertyName: desiredVariableName} = obj
|
||
|
|
```
|
||
|
|
|
||
|
|
Our previous example would be rewritten as follows:
|
||
|
|
```js
|
||
|
|
const fullName = { first: "John", last: "Smith"};
|
||
|
|
const {first: firstName, last: lastName} = fullName;
|
||
|
|
|
||
|
|
console.log(firstName, lastName); // John Smith
|
||
|
|
```
|
||
|
|
**Array Destructuring with rest**
|
||
|
|
When destructuring an array, you can unpack and assign the remaining part of it to a variable using the rest pattern:
|
||
|
|
```js
|
||
|
|
const [a, ...b] = [1, 2, 3];
|
||
|
|
console.log(a); // 1
|
||
|
|
console.log(b); // [2, 3]
|
||
|
|
```
|