Asignación de desestructuración en JavaScript

Objecto y Array son las dos estructuras de datos más utilizadas en JavaScript.

Con la ayuda de los objetos, puedes crear una entidad que almacene datos por clave. Con la ayuda de los arrays, puedes ensamblar elementos de datos en una colección ordenada.

En caso de pasarlos a una función, podría necesitar un objeto y un array no como un todo sino algunas piezas individuales.

Las expresiones literales del objeto y el array permiten crear paquetes ad hoc. Aquí está la sintaxis:

const x = [1, 2, 3, 4, 5];

La asignación con desestructuración es una sintaxis única que ayuda a “desempaquetar” objetos o arrays en un grupo de variables. La desestructuración también puede funcionar eficientemente con funciones complejas, valores predeterminados y más.

La asignación de desestructuración utiliza la siguiente sintaxis:

Se pueden encontrar características similares en otros lenguajes también. Por ejemplo, en Python o Perl.

Ahora, echemos un vistazo al ejemplo de desestructuración de un array en variables:

Como resultado, es posible trabajar con variables en lugar de miembros de arrays.

Funcionará aún mejor si lo combinas con split u otros métodos para devolver arrays:

let [firstName, surname] = "John Doe".split(' ');

Nota que la desestructuración no es lo mismo que “destructiva”.

Lo llamamos desestructuración porque “desestructuriza” a través del método de copiar elementos en variables.

Aquí hay una manera más corta de escribir:

// let [firstName, surname] = arr;
let firstName = arr[0];
let surname = arr[1];

Toma en cuenta que puedes desechar elementos no deseados utilizando una coma extra, así:

Puede funcionar con cualquier iterable del lado derecho:

let [a, b, c] = "abc"; // ["a", "b", "c"]
let [one, two, three] = new Set([1, 2, 3]);

Además, puedes usar cualquier asignable en el lado izquierdo.

Por ejemplo, la propiedad de un objeto:

Otra cosa útil es que es posible utilizar el método Object.entries(obj) con la desestructuración para iterar sobre las claves y valores de un objeto.

Aquí hay un ejemplo:

El resto ‘…’

En caso de que sea necesario obtener no solo los primeros valores, sino también reunir todos los siguientes, tienes la opción de agregar otro parámetro para obtener “el resto” simplemente usando tres puntos “…”, así:

Valores predeterminados

En caso de que haya menos valores en el array que variables en la asignación, no ocurrirá ningún error. Los valores que están ausentes se considerarán indefinidos:

Si quieres un valor predeterminado para reemplazar al que falta, usa el signo =, así:

Desestructurando un objeto

Puedes usar la asignación de desestructuración con objetos también, utilizando la siguiente sintaxis básica:

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

En el lado derecho, hay un objeto existente que es necesario dividir en variables. En el lado izquierdo, hay un patrón para hacer coincidir las propiedades. El signo de tres puntos {...} incluye un grupo de nombres de variables.

Aquí hay un ejemplo:

Las propiedades options.title, options.width y options.height se asignan a variables correspondientes. El arreglo no importa. Esta opción también funcionará:

// changed the order in let {...}
let {
  year,
  model,
  title
} = {
  title: "Car",
  model: "BMW M5",
  year: 2020
}

Para asignar una propiedad a una variable con un nombre diferente, entonces puedes actuar así:

Para las posibles propiedades faltantes, tienes la opción de establecer valores predeterminados usando el signo de “=”, de la siguiente manera:

Los valores predeterminados pueden ser cualquier expresión o llamada a función.

En caso de que haya un objeto complejo con un rango de propiedades, puedes optar por extraer lo que necesites, de la siguiente manera:

El patrón del resto “…”

Otra situación también puede suceder: la cantidad de propiedades del objeto es mayor que las variables que tienes. En tales casos, puedes usar el patrón de resto. Pero, ten en cuenta que solo funciona en los navegadores modernos.

Aquí está el ejemplo:

Desestructuración anidada

Imagina que un array o un objeto incluye otros arrays u objetos anidados. Se pueden utilizar patrones de lado izquierdo más complejos para extraer porciones más profundas.

En el ejemplo de abajo, options contiene otro objeto en la propiedad views y un array en la propiedad items:

Es importante saber que todas las propiedades del objeto options excepto extra (no está presente en el lado izquierdo), se asignan a las variables correspondientes.

Por lo tanto, el model, year, item1, item2 y title tienen el mismo valor. Pero, no existen variables para views y items.

Los parámetros de la función inteligente

A veces, una función tiene muchos parámetros, y la mayoría de ellos son opcionales. Pero, veamos que una función crea un menú. Tendrá una altura, ancho, lista de elementos, un título y más.

No recomendamos que escribas la función de esta manera:

function showBook(title = "Javascript", page = 200,  species : "programming"
, items = []) {
  // ...
}

El problema principal es recordar el orden de los argumentos. Otro problema es encontrar una forma de llamar a una función cuando la mayoría de los parámetros son buenos por defecto.

La acción más opcional es pasar parámetros como un objeto. La función los desestructurizará en una variable de una vez, así:

Existe otra forma más compleja de desestructuración, que incluye objetos anidados y asignaciones de colon.

Por ejemplo:

La sintaxis completa se verá así:

function ({
  incomingProperty: varName = defaultValue
    ...
})

Como puedes ver, es lo mismo que para una asignación de desestructuración.

Luego, para el objeto de los parámetros, habrá una variable varName para incomingProperty.

La desestructuración como esta considera que showBook() no tiene ningún argumento. En caso de que desees todos los valores por defecto, entonces especifica un objeto vacío, así:

showBook({}); // ok, all values are default
showBook(); // this would give an error

Es posible corregirlo estableciendo {} el valor predeterminado del objeto de parámetros.

Por ejemplo: