Introdução
Desestruturação de arrays
A sintaxe de desestruturação de arrays do JavaScript é uma forma concisa de extrair valores de um array e atribuí-los a variáveis distintas.
Neste exemplo, cada valor do array numberOfMoons é atribuído ao seu planeta correspondente:
const numberOfMoons = [0, 2, 14];
const [venus, mars, neptune] = numberOfMoons;
neptune;
// => 14
Em resumo:
- A sintaxe permite nomear elementos posicionados em um array, além de trocar variáveis por meio de reatribuição.
- A sintaxe de desestruturação está disponível dentro dos parâmetros de uma função e em qualquer iterável.
- Deixar uma posição sem nome (não escrevendo nenhum nome de variável) ignora essa posição silenciosamente.
Desestruturação de objetos
Em JavaScript, também existe a sintaxe de desestruturação para extrair propriedades de um objeto e atribuí-las a variáveis distintas.
Neste exemplo, símbolos de clima são extraídos do objeto weather:
const weather = {
sun: '☀️',
sun_behind_small_cloud: '🌤️',
sun_behind_cloud: '⛅',
sun_behind_large_cloud: '🌥️',
sun_behind_rain_cloud: '🌦️',
cloud: '☁️',
cloud_with_rain: '🌧️',
cloud_with_snow: '🌨️',
cloud_with_lightning: '🌩️',
cloud_with_lightning_and_rain: '⛈️',
};
const { sun, cloud, cloud_with_lightning: thunder } = weather;
sun;
// => '☀️'
cloud;
// => '☁️'
thunder;
// => '🌩️'
Em resumo:
- A sintaxe permite tanto extrair propriedades quanto extraí-las e renomeá-las.
- A sintaxe de desestruturação está disponível dentro dos parâmetros de uma função.
Instruções
Elyse, futura mágica, continua seu treinamento.
Ela tem um baralho de cartas que quer manipular.
Para facilitar as coisas, ela normalmente começa apenas com cartas numeradas de 2 a 10, embora alguns dos truques possam envolver cartas adicionais (de figuras).
Existem muitas maneiras de embaralhar as cartas, mas para manter a ilusão da mágica, é vital que não se use um único método, por exemplo, Elyse não usa splice, slice, shift, unshift, push, at.
O acesso a array array[index] e o acesso a objeto (object[key] e object.key) também nunca devem ser usados.
Quer ajudar a Elyse a subir de nível na mágica?
Toda função pode ser implementada usando os parâmetros e um corpo de função com um único return expression.
1. Pegar a primeira carta
Elyse vai invocar a primeira carta do baralho sem usar array[index], .at(index) ou .shift().
É pura mágica.
const deck = [5, 9, 7, 1, 8];
getFirstCard(deck);
// => 5
2. Pegar a segunda carta
Elyse faz um truque de prestidigitação e invoca a segunda carta do baralho sem usar array[index] nem .shift().
const deck = [3, 2, 10, 6, 7];
getSecondCard(deck);
// => 2
3. Trocar duas cartas
Elyse vai fazer as duas cartas do baralho trocarem de lugar.
Ela não precisa chamar nenhuma função.
const deck = [10, 7];
swapTwoCards(deck);
// => [7, 10]
4. Girar três cartas
Para fazer mais um pouco de prestidigitação, Elyse pega três cartas e move rapidamente a carta de cima para o fim, fazendo a carta do meio virar a primeira e a antiga carta de baixo virar a do meio.
Ela não precisa chamar nenhuma função.
const deck = [2, 6, 10];
shiftThreeCardsAround(deck);
// => [6, 10, 2]
5. Escolher a pilha nomeada
Elyse vai separar o baralho em duas pilhas.
Ela então pede que o observador escolha uma das duas pilhas, que vamos chamar de chosen.
A pilha disregarded não é mais relevante, e ela a faz desaparecer.
Ela não precisa chamar nenhuma função.
const deck = [5, 4, 7, 10];
const chosen = [5, 4];
const disregarded = [7, 10];
pickNamedPile({ chosen, disregarded });
// => [5, 4]
5. Trocar a pilha escolhida
Infelizmente o observador continua escolhendo a pilha "errada", mas com uma mágica rápida e esperta, Elyse renomeia a pilha chosen para disregarded e a pilha disregarded para a pilha chosen.
Ela não precisa chamar nenhuma função.
const deck = [5, 4, 7, 10];
const chosen = [5, 4];
const disregarded = [7, 10];
swapNamedPile({ chosen, disregarded });
// => { chosen: [7, 10], disregarded: [5, 4] }
Exercício de aprendizagem
