array destructuring in es6 code example

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: 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 3: destructuring objects

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20


// Stage 4(finished) proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

Example 4: array destructuring

//Without destructuring

const myArray = ["a", "b", "c"];

const x = myArray[0];
const y = myArray[1];

console.log(x, y); // "a" "b"

//With destructuring

const myArray = ["a", "b", "c"];

const [x, y] = myArray; // That's it !

console.log(x, y); // "a" "b"

Example 5: object destructuring

let a, b, rest;
[a, b] = [10, 20];

console.log(a);
// expected output: 10

console.log(b);
// expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// expected output: Array [30,40,50]

Example 6: javascript destructing

/*
* On the left-hand side, you decide which values to unpack from the right-hand
* side source variable.
* 
* This was introduced in ES6
*/
const x = [1, 2, 3, 4, 5]
const [a, b] = x
console.log(a) // prints out: 1
console.log(b) // prints out: 2