Destructuring in ES6 means unpacking values or proporties from array or objects. These unpacked values can be assigned into distinct variables. For eg:

const a = [1, 2, 3, 4]
const [x, y] = a
console.log(x) //=> x = 1
console.log(y) //=> x = 2 

A variable can be assigned default value, when value taken from the array is undefined.

const a, b
[a="messi", b="neymar"] = ["ronaldo"]
console.log(a) //=> a = "ronaldo"
console.log(b) //=> b = "neymar"

That was just a teaser. Also, we are not talking about array but object destructuring. Let’s talk about objects and it’s destructuring.

Objects are variables and objects can contain many values. The values are written in key: value pairs.

const messi = { name: 'Lionel Messi', age: 30, awards: 5 }

messi is a simple object where messi.name returns Lionel Messi and so on. In above array destructuring methods we saw that variables could directly be assigned value. The same thing in objects too.

const a = { name: 'Lionel messi', age: 30 }
const { name, age } = a 
console.log(name) //=> 'Lionel messi'
console.log(age) //=> '30'

These lovely syntax allow us to retrieve values from the object’s proporties without. Common use of this feature is in react/redux applications where we have to grab objects within object(state) in the render method of our components. When a component receives props, object destructuring makes things easy to retrieve and use values. Below is a simple container class which takes state from redux store and displays todos.

... 
render() { 
	const { title, task, status } = this.props.todo
	return (
		<div>
			<h1> { title } </h1>
			<p> task: { task } </p>
			<p> status: { status } </p>
		</div>
	)
}

function mapStateToProps(state) {
	const { todo } = state
	return { todo }
}
... 

ooh!!.. That was simple, let’s have a look at another one.

const firstBlog = { 
	title: 'Could I have another cup of tea? ',
	meta: {
		locale: 'en',
		date: '2015-01-22T06:14:12',
		url: '/archive/2015/firstBlog'
	},
	comments: [
		{ 
			id: 21,
			body: 'this one is epic'
		}
	],
}

const { title: myTitle, comments: [{ body: commentBody }]} = firstBlog

console.log(myTitle) //=> 'Could I have another cup of tea?'
console.log(commentBody) //=> 'this one is epic'

..rest with object destructuring is another awesome syntatic sugar. Like:

const { a, b, ...rest } = {a: 1, b: 2, c: 3, d: 4}
// a = 1
// b = 2 
// rest = { c: 3, d: 4 }

Okay, is that it? No, There are advanced techniques and implementation of object destructuring. I just covered the basics in this post.

For More information: Javascript Destructuring Exploringjs