Introducción
Desestructuración de arrays
La sintaxis de desestructuración de arrays de JavaScript es una forma concisa de extraer valores de un array y asignarlos a distintas variables.
En este ejemplo, cada valor del array numberOfMoons se asigna a su planeta correspondiente:
const numberOfMoons = [0, 2, 14];
const [venus, mars, neptune] = numberOfMoons;
neptune;
// => 14
En resumen:
- La sintaxis permite nombrar elementos posicionados en un array, además de intercambiar variables mediante una nueva asignación.
- La sintaxis de desestructuración está disponible dentro de los parámetros de una función y en cualquier iterable.
- Dejar una posición sin nombre (al no escribir ningún nombre de variable) ignora esa posición de forma silenciosa.
Desestructuración de objetos
En JavaScript también existe la sintaxis de desestructuración para extraer propiedades de un objeto y asignarlas a distintas variables.
En este ejemplo, se extraen símbolos meteorológicos del 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;
// => '🌩️'
En resumen:
- La sintaxis permite tanto extraer propiedades como extraerlas y cambiarles el nombre.
- La sintaxis de desestructuración está disponible dentro de los parámetros de una función.
Instrucciones
Elyse, futura maga, continúa su entrenamiento.
Tiene una baraja de cartas que quiere manipular.
Para que le resulte más fácil, normalmente solo parte de cartas numeradas del 2 al 10, aunque algunos de los trucos pueden incluir cartas adicionales (figuras).
Hay muchas formas de mezclar las cartas, pero para mantener la ilusión de la magia es vital que no se use ni un solo método; por ejemplo, Elyse no usa splice, slice, shift, unshift, push, at.
El acceso a arrays array[index] y el acceso a objetos (object[key] y object.key) tampoco deben usarse nunca.
¿Quieres ayudar a Elyse a mejorar su magia?
Todas las funciones se pueden implementar usando los parámetros y un cuerpo de función con un único return expression.
1. Obtén la primera carta
Elyse invocará la primera carta de la baraja sin usar array[index], .at(index) ni .shift().
Es como por arte de magia.
const deck = [5, 9, 7, 1, 8];
getFirstCard(deck);
// => 5
2. Obtén la segunda carta
Elyse hace un juego de manos e invoca la segunda carta de la baraja sin usar array[index] ni .shift().
const deck = [3, 2, 10, 6, 7];
getSecondCard(deck);
// => 2
3. Intercambia dos cartas
Elyse hará que las dos cartas de la baraja cambien de sitio.
No necesita llamar a ninguna función.
const deck = [10, 7];
swapTwoCards(deck);
// => [7, 10]
4. Desplaza tres cartas
Para hacer otro juego de manos, Elyse coge tres cartas y mueve rápidamente la carta de arriba al final, con lo que la carta del medio pasa a ser la primera y la que antes estaba abajo pasa a ser la del medio.
No necesita llamar a ninguna función.
const deck = [2, 6, 10];
shiftThreeCardsAround(deck);
// => [6, 10, 2]
5. Elige el montón con nombre
Elyse separará la baraja en dos montones.
Luego pide al espectador que elija uno de los dos montones, al que llamaremos chosen.
El montón disregarded ya no importa, así que lo hace desaparecer.
No necesita llamar a ninguna función.
const deck = [5, 4, 7, 10];
const chosen = [5, 4];
const disregarded = [7, 10];
pickNamedPile({ chosen, disregarded });
// => [5, 4]
5. Intercambia el montón elegido
Por desgracia, el espectador sigue eligiendo el montón «equivocado», pero con algo de magia rápida e ingeniosa, Elyse renombra el montón chosen como disregarded y el montón disregarded como el montón chosen.
No necesita llamar a ninguna función.
const deck = [5, 4, 7, 10];
const chosen = [5, 4];
const disregarded = [7, 10];
swapNamedPile({ chosen, disregarded });
// => { chosen: [7, 10], disregarded: [5, 4] }
Ejercicio de aprendizaje
