Example 1: destructuring arrays with rest operator
// Rest operator on Arrays;
// It's usually shown as ...rest
// but you can name this what you like
// Think of it as "get the ...rest of the array"
const [q, r, ...callThisAnythingYouWant] = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(q, r); // 1 2
console.log(callThisAnythingYouWant); // [ 3, 4, 5, 6, 7, 8 ]
Example 2: unpack list javascript
var yourArray = [1, 2, 3, "four"]
// you can unpack those values by doing:
[a, b, c, d] = yourArray // If you want to unpack in variables
...yourArray // If you want to unpack directly where the "..." is (This One is mostly used to give argument to a function)
//Exemple:
consloe.log(yourArray) // will print: [1, 2, 3, "four"]
consloe.log(...yourArray) // will print: 1 2 3 "four"
Example 3: Destructuring Assignment
const HIGH_TEMPERATURES = {
yesterday: 75,
today: 77,
tomorrow: 80
};
//ES6 assignment syntax
const {today, tomorrow} = HIGH_TEMPERATURES;
//ES5 assignment syntax
const today = HIGH_TEMPERATURES.today;
const tomorrow = HIGH_TEMPERATURES.tomorrow;
console.log(today); // 77
console.log(tomorrow); // 80
console.log(yesterday); // "ReferenceError: yesterday is not defined" as it should be.
Example 4: destructuring assignment
Destructuring assignment is special syntax introduced in ES6,
for neatly assigning values taken directly from an object.
const user = { name: 'John Doe', age: 34 };
const { name, age } = user;
// name = 'John Doe', age = 34
Example 5: javascript function destructuring
function f() {
return [1, 2];
}
let a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2
Example 6: destructuring es6 freecodecamp
const iceCreamFlavors = ['hazelnut', 'pistachio', 'tiramisu'];const flavor1 = iceCreamFlavors[0];const flavor2 = iceCreamFlavors[1];const flavor3 = iceCreamFlavors[2];console.log(flavor1, flavor2, flavor3);