Desestructuración en Javascript

La desestructuración en Javascript (destructuring) es una sintaxis especial que permite desempaquetar arreglos (arrays) u objetos en un conjunto de variables.

Las estructuras de datos más usadas en Javascript son Object y Array. Los objetos permiten crear una entidad única que almacena cada elemento por clave. Los arreglos o arrays nos permiten agrupar elementos en una lista ordenada.

La desestructuración en Javascript funciona muy bien por ejemplo cuando trabajas con funciones complejas que reciben muchos parámetros.

Desestructurando Arrays

Aquí vemos un ejemplo básico:

// array con nombre y apellido
let persona = ["Pedro", "Martinez"]

// desestructurando
// establece nombre = arr[0]
// y apellidos = arr[1]
let [nombre, apellido] = persona;

alert(nombre); // Pedro
alert(apellido);  // Martinez

A partir de ese punto podemos trabajar directamente con variables en vez de elementos de arreglos. Un punto importante a entender es que el array no se ve modificado, puede seguir trabajándose con el sin problema.

Combinación con métodos que devuelven arrays

Se puede combinar con split() o cualquier otro método que devuelve arrays.

let [nombre, apellido] = "Pedro Martinez".split(' ');
alert(nombre); // Pedro
alert(apellido);  // Martinez

Ignorar elementos

Pueden ignorarse elementos usando comas. En el siguiente ejemplo vemos como se ignora el segundo elemento y el cuarto.

// el segundo elemento no se necesita
let [primera, , tercera] = ["Vamos", "de", "paseo", "con un coche nuevo"];

alert( tercera); // paseo

Desestructurando objetos

La sintaxis básica es la siguiente:

let {var1, var2} = {var1:…, var2:…}

Deberíamos tener un objeto existente en el lado derecho, que queremos partir en variables. La parte izquierda contiene un patrón para las correspondientes propiedades. El caso más simple sería el siguiente:

let persona = {
  nombre: "Antonio",
  apellido: "Martinez",
  edad: 20
};

let {nombre, apellido, edad} = persona;

alert(nombre);  // Antonio
alert(apellido);  // Martinez
alert(edad); // 20

El orden en el que figuren las variables da igual, podrían reordenarse de la siguiente forma:

let {edad, nombre, apellido} = persona; // 20, Martinez, Antonio

El patrón en el lado izquierdo puede ser más complejo y especificar el mapeo entre propiedades y variables. Si queremos asignar una propiedad a una variable con otro nombre podemos hacerlo de la siguiente forma:

let persona = {
  nombre: "Pedro",
  apellido: "Martinez",
  edad: 20
};

let {apellido: a, edad: e, nombre} = persona;


alert(nombre);  // Pedro
alert(e);      // 20
alert(a);      // Martinez

También pueden usarse valores por defecto en las variables de la siguiente forma:

let persona= {
  nombre: "Pedro"
};

let {apellido= "Martinez", edad = 20, nombre} = persona;

alert(nombre);  // Pedro
alert(apellido);  // Martinez
alert(edad); // 20

El patrón resto “…”

¿Qué ocurre si un objeto tiene más propiedades que variables tenemos?. ¿Puede asignarse el “resto” a otra cosa?. Esta funcionalidad no esta soportada en navegadores antiguos, pero todos los modernos la soportan.

let persona = {
  nombre: "Pedro",
  apellido: "Martinez",
  edad: 20
};


let {nombre, ...rest} = options;

alert(rest.apellido);  // Martinez
alert(rest.edad);   // 20

Desestructuración anidada

Si un array u objeto contiene otros arrays u objetos anidados podemos usar patrones más complejos en la parte izquierda para extraer cada porción.

let elementos = {
  tamanyo: {
    ancho: 100,
    alto: 200
  },
  arrayColores: ["Azul", "Verde"],
  otro: true
};


let {
  tamanyo: { 
    ancho,
    alto
  },
  arrayColores: [color1, color2], // assign items here
  nombre = "Paco" 
} = elementos;

alert(nombre);  // Paco
alert(ancho);  // 100
alert(alto); // 200
alert(color1);  // Azul
alert(color2);  // Verde

---

Recursos básicos

Prototype	Añadir propiedades de forma dinámica a un objeto
toLocaleString	Herramienta esencial para el formateo de fechas y números en aplicaciones internacionales
Recursividad y pila	Uso de recursividad y funcionamiento de la pila JS
Desestructuración	Mecanismo para desempaquetar arrays y objetos
Manejo de Strings	Manejo básico de Strings, cadenas de caracteres
Operadores	Uso de operadores de comparación y lógicos
Promesas	Gestión de peticiones asíncronas con promesas
Sleep	Implementación de la función sleep() en JS
This	Uso de la palabra reservada this en diferentes contextos
Maps	Te enseñamos cuando usar Map y cuando Object con ejemplos
Switchery JS	Librería para modificar el estilo de los checkbox
Mejores libros Javascript Español	Encuentra los mejores libros para aprender JS y convertirte en el desarrollador más demandado.
Exception JS	Manejo de excepciones en Javascript, control de errores y flujo de programa.
Obfuscator Javascript	Protege tu código Javascript Ofuscándolo
Javascript desde cero	Aprende los conceptos básicos de Javascript, ponte en marcha.
Lodash	Lodash hace que la manipulación de datos en JavaScript sea más fácil y menos propensa a errores
Formatdate JS	Formateo y trabajo con fechas en javascript de forma sencilla.
Dayjs	Biblioteca para la gestión de fechas
padStart	Maneja cadenas de texto con la función padStart()