Destructuring Assignment en Javascript

Las sintaxis por destructuring assignment vendría a ser lo que llamamos extracción de los datos de arreglos u objetos trabajando con una sintaxis similar a la construcción de arrays y objetos literales, estos paquetes de datos una ves creados puedes usarlos dentro de tu código cuando así lo requieras.

Destructurar un Array

Por ejemplo si tenemos una variable foo con 3 datos uno, dos y tres al estar aun sin destructurarse estos datos pueden ser 3 datos separados, pero los podemos destructurar para darle un mejor orden, ahorro de línea de código y más limpieza

var foo = ["uno", "dos", "tres"];

// sin destructurar
var uno  = foo[0];
var dos  = foo[1];
var tres = foo[2]; // asignación en tres lineas

// con destructuración
var [uno, dos, tres] = foo; // asignación en una sola linea

También podemos devolver múltiples valores en una función mediante destructuring assignment, aunque en Javascript siempre es posible exportar un array, con destructuring assignment eso es más sencillo por ejemplo si tenemos la siguiente función llamada postres y me retorna 3 valores

function postres() {
  return [1, 2, 3];
}

Ignorando valores de retorno

Por otro lado si necesitas ignorar un o unos de lo valores de retorno solo debes hacer lo siguiente

function postres() {
  return [1, 2, 3];
}

var [a, , b] = postres(); //ignoramos el dato b
console.log("A es " + a + " B es " + b)

En el código anterior estamos ignorando el segundo valor es decir al exportar un array a = 1, b = 2 y c = 3, pero como estamos ignorando el segundo elemento del array no lo imprime, solo imprime el primer y segundo elemento.

Si queremos ignorar todos los datos del array solo escribimos

[,,] = postres();

Extraer valores de una Expresión regular

Si usamos el metod exec() para trabajar con una expresión regular y extraer el protocolo de conexion de una url, podemos ver que discrimina parte del nombre del dominio y nos imprime http

var url = "http://collectivecloudperu.com";

var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
var [, protocol, fullhost, fullpath] = parsedURL;

console.log(protocol); // logs "http:"

Con Destructuring Assignment extraemos facilmente esa parte del array ignorando todo el valor de la url.

Destructurar un Objeto

Por ejemplo tenemos la variable o y la variable que le sigue abajo hereda sus valores, destructurando logramos asignarle nuevos nombres a las variables y mostramos los valores heredados de las variables anteriores

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true 

// Le asignamos nuevos nombres a las variables
var {p: foo, q: bar} = o;

console.log(foo); // 42
console.log(bar); // true

Destructuring assignment sin declaración

Podemos hacerlo deferente sin declarar en la sentencia de asignación

var a, b;

({a, b} = {a:1, b:2});

Destructuring de Objetos Anidados

Si tenemos datos anidados (Nested Objects) tambien podemos destructurarlos como en el siguiente ejemplo

var metadata = {
    title: "Collective Cloud Perú",
    translations: [
       {
        locale: "es",
        localization_tags: [ ],
        last_edit: "2018-07-06T08:43:37",
        url: "/5-principios-fundamentales-del-ux-design",
        title: "5 Principios Fundamentales del UX Design"
       }
    ],
    url: "/es-PE/5-principios-fundamentales-del-ux-design"
};

var { title: spanishTitle, translations: [{ title: localeTitle }] } = metadata;

console.log(englishTitle); // "Collective Cloud Perú"
console.log(localeTitle);  // "5 Principios Fundamentales del UX Design"

Interactuando con For en un destructuring

acá para

var elementos = [
  {
    nombre: "Categorias",
    items: {
      uno: "Node JS",
      dos: "Vue JS",
      tres: "Java",
      4: "Linkedin Ads"
    },
    ncat: 4
  },
  {
    nombre: "Articulos",
    items: {
      uno: "Qué significa cada etiqueta de tu Sitemap XML",
      dos: "5 Principios Fundamentales del UX Design",
      3: "Los hashtag en Instagram: ¿cómo seguirlos?"
    },
    nart: 3
  }
];

for (var {nombre: n, items: { dos: v } } of elementos) {
  console.log("Nombre: " + n + ", Valor: " + v);
}

// "Nombre: Categorias, Valor: Vue JS"
// "Nombre: Articulos, Valor: 5 Principios Fundamentales del UX Design""

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.