In javascript we can define variables the following way:

var variable1 = "Hi there";
var variable2 = "Hello";
var variable3 = 11;

and we can also define objects and its variable like this:

var obj = {firstName: 'David', lastName: 'Nge'};
var first = obj.firstName;
var last = obj.lastName;

You can already tell we're typing a lot of characters repeatedly.

There is an easier way to declare these variables with the help of destructuring in Javascript ES6.

Destructuring in ES6 solves this by saving us from repeating ourselves this way.

var variable1 = "Hi there";
var variable2 = "Hello";
var variable3 = 11;

//declaring with ES6 destructuring 

var [variable1, variable2, variable3] = ["Hi there", "Hello", 11];

// variable1 == "Hi there"
// variable2 == "Hello"
// variable3 == 11

On the left of the assignment = is called the target

while the right of the assignment is called the source

What's happening is that Javascript ES6 destructuring unpacks the array from the source and assign its values to the target array.

This way,  tt is also simpler to declare object and its variables:

var obj = {firstName: 'David', lastName: 'Nge'};
var first = obj.firstName;
var last = obj.lastName;


// declaring with ES6 destructuring

var {firstName, lastName} = {firstName:'David', lastName:'Nge'}; // variable name on the left and right must be the same
var obj = {firstName, lastName};

//obj == {firstName: "David", lastName: "Nge"}
//obj.firstName == "David"
//obj.lastName == "Nge"

Here it is unpacking {firstName:'David, lastName:'Nge'} and assigning it to the variable name firstName and lastName on the left.

After that it's assigning {firstName, lastName} along with its assigned values to the object obj.

A couple of notes

When you're declaring non-object variables, you should enclose the variables and its values in square brackets []. I.e put them in an array.

var [a,b] = [1, 2];
console.log(a, b);
// => 1 2

var [_, answer] = [1, 2];
console.log(_, answer);
// => 1, 2

When you're declaring object variables however, you should enclose them and the values in curly brackets {}. 

var {name, taste} = {name:'banana', taste:'sweet'};
var fruit = {name, taste};

//fruit == {name: "banana", taste: "sweet"}
//fruit.taste == "sweet"

You don't have to worry about the order when assigning value in objects

//note the switch in name and taste on the right

var {name, taste} = {taste:'banana', name:'sweet'};
var fruit = {name, taste};

//fruit == {name: "sweet", taste: "banana"}
//fruit.taste == "banana"

Swap variables easily without temp

Usually if we have the variables a = 1 and b = 2 and we want to swap them both we would need a third variable temp:

//swapping the value of a and b

var a = 1, b = 2;
var temp = a;
a = b;
b = temp;

The reason we need temp is because when we assign a with the value of b, the value of a gets overriden. Hence we cannot assign b with the value a afterwards.

but this is easily solved with destructuring:

//swapping the value of a and b with destructuring

var a = 1, b = 2;

var [a,b] = [b,a];

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

This is super neat!

These are just some of my notes on destructuring and by no means comprehensive. If you're looking for more in-depth guide on this topic check out the following links:

MDN's documentation on Destructuring

ES6 in action: Destructuring assignment

ES6 Destructuring: The complete guide