1.9 KiB
| 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
var fullName = ["John", "Smith"];
var firstName = fullName[0];
var lastName = fullName[1];
console.log(firstName, lastName); // John Smith
ES6 Destructuring
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
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.
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.
const obj = {propertyName: value}
const {propertyName: desiredVariableName} = obj
Our previous example would be rewritten as follows:
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:
const [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]