Destructuring in ECMAScript 2015

destructuring-arrays-basic-assignment.js

let numbers = [1, 2, 3, 4, 5];

let [a, b, c, d, e] = numbers;

console.log(a, b, c, d, e); //1 2 3 4 5

destructuring-arrays-nested-arrays.js

let numbers = [1, 2, [3, 4, [5, 6]]];

let [a, , [b, , [, c]]] = numbers;

console.log(a, b, c); //1 3 6

destructuring-arrays-pick-only-what-you-need.js

let numbers = [1, 2, 3, 4, 5];

let [a, b] = numbers;

console.log(a, b); //1 2

let [x, y, , , z] = numbers;

console.log(x, y, z); //1 2 5

let [i, , j, , k] = numbers;

console.log(i, j, k); //1 3 5

destructuring-arrays-separate-declaration-and-assignment.js

let numbers = [1, 2, 3, 4, 5];

let a, b, c, d, e;

[a, b, c, d, e] = numbers;

console.log(a, b, c, d, e); //1 2 3 4 5

destructuring-arrays-spread-operator.js

let numbers = [1, 2, 3, 4, 5];

let [a, b, ...others] = numbers;

console.log(a, b); //1 2

console.log(others); //[3,4,5]

destructuring-arrays-swapping-variables.js

let x = 10, y = 20;

[x, y] = [y, x];

console.log(x, y); //20 10

destructuring-manually.js

var person = { name: 'Shravan', age: 27 };

//Object destructuring manually
var name = person.name;
var age = person.age;

console.log(name, age);

var numbers = [1, 2, 3, 4, 5];

//Array destructuring manually
var one = numbers[0];
var two = numbers[1];

console.log(one, two);

destructuring-objects-alias-variable-names.js

let fullName = { firstName: 'Shravan', lastName: 'Kasagoni' };

let {firstName: fn, lastName: ln} = fullName;

console.log(fn, ln); //Shravan Kasagoni

console.log(firstName, lastName); //throws an error

destructuring-objects-basic-assignment.js

var fullName = {
  firstName: 'Shravan',
  lastName: 'Kasagoni'
};

let {firstName, lastName} = fullName;

console.log(firstName); //Shravan
console.log(lastName); //Kasagoni

destructuring-objects-default-values.js

let person = { name: 'Shravan', age: 27, mobile: undefined };

let {name, email = 'no email provided', mobile = '0000000000' } = person;

console.log(name, email, mobile); //Shravan no email provided 0000000000

destructuring-objects-destructuring-nested-objects.js

let person = {
    name: 'Shravan',
    age: 27,
    address: {
        city: 'Hyderabad',
        state: 'TS',
        zip: 500001
    }
};

let {name, age, address: {city, state, zip}} = person;

console.log(name, age, city, state, zip);

destructuring-objects-extract-non-existing-properties.js

let person = { name: 'Shravan', age: 27 };

let {name, age, email} = person;

console.log(name, age, email); //Shravan 27 undefined

destructuring-objects-in-function-parameters.js

var person = {
    name: 'Shravan',
    age: 27,
    email: 'shravan@theshravan.net'
};

displayPersonDetails(person);

function displayPersonDetails({name, age, email}) {
    console.log(name, age, email);
}

destructuring-objects-pick-only-what-you-need.js

function getPersonDetails() {
    return {
        name: 'Shravan',
        age: 27,
        email: 'shravan@theshravan.net'
    };
}

let {name, age} = getPersonDetails();

console.log(name, age); //Shravan 27

destructuring-objects-separate-declaration-and-assignment.js

var firstName, lastName;

({ firstName, lastName } = { firstName: 'Shravan', lastName: 'Kasagoni' });

console.log(firstName, lastName); //Shravan Kasagoni