ES6: destructuring assignment

I met a great destructuring assignment through my brother Weslley Araujo, and I need to confess that I really liked it. It is nothing more than an expression that allows us to get data from objects or arrays in a much simpler way.

For we get a property of an object, we could do something like that:

	var movieStar = {
	name: 'James Bond',
	nickname: 'Bond',
	profession: 'Federal Agent'
	};

	console.log(movieStar.name); // James Bond

view raw es6-destructuring-01.js hosted with ❤ by GitHub

With the new guy, we could do something like that:

	var movieStar = {
	name: 'James Bond',
	nickname: 'Bond',
	profession: 'Federal Agent'
	};

	let { name, profession } = movieStar;

	console.log(name, profession);

	// James Bond
	// Federal Agent

view raw es6-destructuring-02.js hosted with ❤ by GitHub

With arrays

If we wanted to take the first item of an array, we could do something like:

	var mortalKombat = ['Scorpion', 'Liu Kang', 'Sub Zero', 'Johnny Cage'];

	console.log(mortalKombat[0]);
	// Scorpion

view raw es6-destructuring-03.js hosted with ❤ by GitHub

With the fella destructuring, we could do:

	let mortalKombat = ['Scorpion', 'Liu Kang', 'Sub Zero', 'Johnny Cage'];

	let [user1, user2] = mortalKombat;

	console.log(user1, user2);
	// Scorpion
	// Liu Kang

view raw es6-destructuring-04.js hosted with ❤ by GitHub

It is still possible, play a bit more:

	let mortalKombat = ['Scorpion', 'Liu Kang', 'Sub Zero', 'Johnny Cage'];

	let [userA, , userB] = mortalKombat;
	let [user, ...users] = mortalKombat;

	console.log(userA, userB);
	// Scorpion
	// Sub Zero

	console.log(user, users);
	// Scorpion
	// ['Liu Kang', 'Sub Zero', 'Johnny Cage']

view raw es6-destructuring-05.js hosted with ❤ by GitHub

Using when importing files

A very cool thing to use destructuring assignment is when we need to import things to our files. Imagine we have a generic file, as a helpers, something like that:

	// helpers.js
	export function getNext(arr) {
	return (arr.length);
	};

	export function makeMoney() {
	// ...
	};
	// ...

view raw es6-destructuring-06.js hosted with ❤ by GitHub

Nice! In other file, let’s suppose that we need only these two functions, and not the entire file. So, let’s go:

	import { getNext, makeMoney } from '../helpers';

	// Agora temos acesso as duas funções no nosso arquivo
	// getNext([1, 2, 3]);
	// makeMoney();

view raw es6-destructuring-07.js hosted with ❤ by GitHub

Applying to `forEach`

We could use to in the famous forEach. So, if we have a data like that:

	var movieStars = [
	{
	name: 'James Bond',
	nickname: 'Bond',
	profession: 'Federal Agent'
	},
	{
	name: 'Dominic Toretto',
	nickname: 'Toretto',
	profession: 'Driver'
	},
	{
	name: 'John Rambo',
	nickname: 'Rambo',
	profession: 'Killer'
	}
	];

view raw es6-destructuring-08.js hosted with ❤ by GitHub

With this data, normally we could do something like that:

	movieStars.forEach(function(star) {
	console.log(star.nickname);
	});

	// Bond
	// Toreto
	// Rambo

view raw es6-destructuring-09.js hosted with ❤ by GitHub

With the double of arrow-functions and destructuring, we got some powers:

	movieStars.forEach( ({nickname}) => console.log(nickname) );

	// Bond
	// Toreto
	// Rambo

view raw es6-destructuring-10.js hosted with ❤ by GitHub

Creating objects

We could create objects in this way:

	let username = 'Raphael Fabeni';
	let nickname = 'Fabeni';

	var oldGuy = {
	username: username,
	nickname: nickname
	};

	console.log(oldGuy);
	// {
	// nickname: "Fabeni",
	// username: "Raphael Fabeni"
	// }

view raw es6-destructuring-11.js hosted with ❤ by GitHub

But there is a new way much more fun. ◕‿◕

	let username = 'Raphael Fabeni';
	let nickname = 'Fabeni';

	let newGuy = { username, nickname };

	console.log(newGuy);
	// {
	// nickname: "Fabeni",
	// username: "Raphael Fabeni"
	// }

view raw es6-destructuring-12.js hosted with ❤ by GitHub

Here you can find an JS Bin with the examples.

With arrays

Using when importing files

Applying to forEach

Creating objects

Applying to `forEach`