2.6-Destructuring.md

2.6-Destructuring (de-structuring) ecma-international.org

Destructuring provides a convenient way to "extract" values from data stored in Objects and Arrays using a syntax that mirrors the construction of array and object literals.

We have 2 parts: the destructuring pattern () + the initializer

###Destructuring Object

var foo = function(){
  return {
    fn: "Leo",
    ln: "Lanese",
    hobbies: "computer"
  } 
}
let {
      fn,ln,
} = foo();
    
console.log(fn,ln); // Leo Lanese

Eg: Destructuring Objects

###Destructuring from Object Literals

let name = { first: 'Jhon', last: 'Smith' }; // declaring the Object Literal
let { first: f, last: l } = name; // Destructuring it

console.log(f);
console.log(l);
console.log(JSON.stringify(name));

Eg: Destructuring from Object Literals

###Destructuring from Arrays

const [x, y] = ['Jhon', 'Smith']; // declaring the Array
console.log(x,y); // Destructuring it

Eg: Destructuring from Arrays

###Selections on Destructuring We are goin gto destructuring using a selector (kind of a filter)

let {x:a} = { x:'hello', y:"world", z:42 }; // declaring and destructuring
console.log(a);  

Eg: Selections on Destructuring

###Using Rest parameters

let [x,...y] = ['Jhon Smith', 100, 'the', 'ES6'];
console.log(x);
console.log(...y);

Eg: Selections on Destructuring

###Destructuring failing and default parameters

let [a] = [];   // fails destructuring no defaults 
console.log(a); // undefined

let [a2=1] = []; // fails destructuring with defaults
console.log('a2:' + a2);   // undefined but default

Eg: failing and default

###Destructuring values

function foo() {
  console.log('something')
}
let aMethod = '';

let { prop:y=foo() } = aMethod;

###Something as this:

function foo() {
  console.log('something')
}
let aMethod = '';

// let { prop:y=foo() } = aMethod;

let y;
if (aMethod.prop === undefined) {
  y = foo();
} else {
  y = aMethod.prop ;
}

Eg: failing and default

###Destructuring in functions invocations

function log(n) { 
  console.log(n); // ES6
  return n='Super ES6!' 
}

let [n=log('ES6')] = [];
console.log(n);   // Super ES6!

Eg: Destructuring in functions

###Destructuring in functions invocations and returns

function callMe(){
 return [1,2]
}
let [x, y] = callMe();
console.log(x,y); // 1 2

###Destructuring Array Matching

var test = [ 1, 2, 3 ]
var [ a, , b ] = test
[ b, a ] = [ a, b ]

###Destructuring Assignment: Object Matching, Shorthand Notation

// ES5
var testMe = function(){ return 2}
var tmp = testMe();
var n1 = tmp.n1;
var n2 = tmp.n2;
var n3 = tmp.n3;

// ES6
var testMe = function(){ return 2}
var { n1, n2, n3 } = testMe();

###Destructuring Assignment: Parameter Context Matching

// ES5
function foo (arg) {
    var arg0 = arg[0];
    var arg1  = arg[1];
    console.log(arg0, arg1);
};
foo(["The", "test"]); // The test

// ES6
function foo([ arg0, arg1 ]) {
    console.log(arg0,arg1)
}
foo(["The", "test"]); // The test

// ES5
function foo2(arg) {
    var v1 = foo2.n1;
    var v2 = foo2.n2;
    console.log(v1, v2); // foo 10
};
foo2({ n1: "foo", n2:  10 });

// ES6
function foo2({ arg1: n, arg2: nn }) {
    console.log(n, nn); // foo 10
}
foo2({ arg1: "foo", arg2: 107 });

// ES5
function foo3(arg) {
    var n1 = arg.n1;
    var n2  = arg.n2;
    console.log(n1, n2);
};
foo3({ n1: "foo", n2: 10 }); // foo 10

// ES6
function foo3( {n1,n2} ) {
    console.log(n1, n2)
}
foo3({ n1: "foo", n2: 10 }); // foo 10

###Destructuring Array of Objects: destructure directly

We can literallly destruct: Object and Arrays not Array of Objects

const arr = [1,2,3];
const obj = {
  one: arr[0],
  two: arr[1],
  three: arr[2]
};
console.log(obj); // DONT need ES6