Destructuring Assignment en Javascript

3 minuto(s)

En esta página:

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

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];
}

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)

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();

[,,] = 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 = "https://nubecolectiva.com";

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

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

var url = "https://nubecolectiva.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

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});

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"

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

Para trabajar con el bucle For puedes ver el siguiente ejemplo


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""