ES6: destructuring assignment

Conheci o grande destructuring assignment através do meu brother Weslley Araujo, e confesso que achei coisa linda. Ele nada mais é que uma expressão que nos permite pegar dados de objetos ou arrays de uma maneira bem mais simples.

Para pegarmos uma propriedade de um objeto, poderíamos fazer algo assim:

	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

Com o mano novo, podemos fazer algo assim:

	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

Com arrays

Se quiséssemos, por exemplo, pegar o primeiro item do array, poderíamos fazer algo do tipo:

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

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

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

Com o mano destructuring, podemos fazer algo assim:

	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

Ainda é possível, brincar um pouco mais:

	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

Usando ao importar arquivos

Uma coisa muito legal de se usar o mano destructuring assignment é quando precisamos importar coisas para os nossos arquivos. Imaginemos que tenhamos um arquivo genérico, como um arquivo helpers, algo mais ou menos assim:

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

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

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

Legal! Agora em um outro arquivo, vamos imaginar que só iremos precisar dessas duas funções, e não do arquivo inteiro. Podemos fazer algo assim:

	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

Aplicando ao `forEach`

Podemos também utilizar no famoso forEach. Imaginemos que tenhamos o seguinte cara:

	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

Com isso, poderíamos fazer algo assim:

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

	// Bond
	// Toreto
	// Rambo

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

Utilizando um combo de arrow-functions e destructuring, poderíamos fazer algo assim:

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

	// Bond
	// Toreto
	// Rambo

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

Criando objetos

Podemos criar um objeto assim:

	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

Dá pra ficar mais legal. ◕‿◕

	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

Aqui você encontra um JS Bin com os exemplos acima.

Ver mais posts

Com arrays

Usando ao importar arquivos

Aplicando ao forEach

Criando objetos

Aplicando ao `forEach`