¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

Aprende ES6 - Desestructurando

Como ya sabrás, en Función 13 estamos embarcados en que aprendas todos los entresijos de ES6. En artículos anteriores hemos hablado sobre let, const y los ámbitos, las funciones flecha, que son realmente útiles, las Promesas y las Clases. Si esto no te suena de nada y estás intentando ponerle algún sentido a las siglas, ¡no te preocupes! Echa un vistazo a nuestra Introducción a ES6.

La desestructuración es de las cosas más útiles que han incluido en ES6 y además es de las más simples también. Enlaza propiedades a tantas variables como necesites y funciona tanto en Array como en Object.

Desestructurando Objetos

Veamos un rápido ejemplo:

let usuario = {  
  nombre: 'Antonio',
  correo: 'a.laguna@funcion13.com'
}

let {nombre, correo} = usuario;  
console.log(nombre); // Antonio  
console.log(correo); // a.laguna@funcion13.com  

Como ves, nos permite extraer propiedades específicas de un objeto rápidamente. Si por lo que sea no quieres usar los mismos nombres, se pueden asignar aliases:

let usuario = {  
  nombre: 'Antonio',
  correo: 'a.laguna@funcion13.com'
}

let {nombre: name, correo: email} = usuario;  
console.log(name); // Antonio  
console.log(email); // a.laguna@funcion13.com  

Sorprendentemente, también puedes extraer propiedades que estén anidadas también:

let usuario = {  
  nombre: 'Antonio',
  correo: 'a.laguna@funcion13.com',
  datos: {
    pais: 'España',
    web: 'https://www.funcion13.com'
  }
};

let {datos: {pais, web:sitioWeb, noExiste}} = usuario;  
console.log(pais); // España  
console.log(sitioWeb); // https://www.funcion13.com  
console.log(noExiste); // undefined  

Las propiedades que no se encuentren tendrán el valor undefined, similar al valor que tendría si hiciéramos algo así: var noExiste = usuario.datos.noExiste.

Es posible facilitar un valor por defecto para cuando nos encontremos valores que sean undefined:

let usuario = {  
  nombre: 'Antonio',
  correo: 'a.laguna@funcion13.com',
  datos: {
    pais: 'España',
    web: 'https://www.funcion13.com'
  }
};

let {datos: {pais, web:sitioWeb, noExiste=':('}} = usuario;  
console.log(pais); // España  
console.log(sitioWeb); // https://www.funcion13.com  
console.log(noExiste); // :( en vez de undefined  

Esta característica es realmente útil a la hora de usar objetos de configuración en nuestras funciones. Supongamos que tenemos una función, que recibe un objeto con la duración de una animación y la propiedad a animar. No obstante, por defecto queremos que la propiedad sea opacity y la duración sea de 1500. Así es como podríamos hacerlo:

var ejemplo = function(ajustes = {}) {  
  const { duracion = 1500, propiedad = 'opacity' } = ajustes;
};

ejemplo({ duracion: 200 });  
// duracion = 200 (por el parámetro)
// propiedad = "opacity" (por su valor por defecto)

Es posible también desestructurar de forma dinámica usando variables que contengan la propiedad a la que queremos acceder. Veamos un ejemplo:

let usuario = {  
  nombre: 'Antonio',
  correo: 'a.laguna@funcion13.com'
}
let clave = 'nombre';  
let { [clave]: nombre } = usuario;

console.log(nombre); // Antonio  

Lo cual en ES5 sería algo así:

var usuario = {  
    nombre: 'Antonio',
    correo: 'a.laguna@funcion13.com'
};
var clave = 'nombre';  
var nombre = usuario[clave];  
console.log(nombre);  

Desestructurando matrices

Desestructurar, como dijimos al inicio del artículo, también funciona con Array. Veamos un pequeño repaso sobre todo lo que hemos visto hasta ahora con los objetos, pero aplicándolos a las matrices:

lat [a] = ['foo'];  
console.log(a); // foo  
let [a] = [];  
console.log(a) // undefined  
let [b='bar'] = [undefined];  
console.log(b); // bar  
let [c='bar'] = [];  
console.log(c); // bar  

Cuando usamos matrices, podemos saltarnos elementos que no nos interesen:

let [,,a,b] = [1,2,3,4,5];  
console.log(a); // 3  
console.log(b); // 4  

Desestructurar tiene otros usos útiles, como el hecho de poder cambiar variables sin que nos haga falta la variable aux:

function comparaES5 () {  
  var mayor = 5;
  var menor = 10;
  var aux;

  if (menor > mayor) {
    aux = menor;
    menor = mayor;
    mayor = menor;
  }
}

function comparaES6 () {  
  let mayor = 5;
  let menor = 10;

  if (menor > mayor) {
    [menor, mayor] = [mayor, menor];
  }
}

Desestructurando con funciones

También podemos usar la desestructuración en la lista de parámetros de una función:

function mostrarCorreo({ correo, nombre='desconocido' }) {  
  console.log('El correo de ' +  nombre  + ' es ' + correo);
}
mostrarCorreo({ nombre: 'Antonio', correo: 'a.laguna@funcion13.com' });  
// El correo de Antonio es a.laguna@funcion13.com
mostrarCorreo({ correo: 'desconocido@ejemplo.com' });  
// El correo de desconocido es desconocido@ejemplo.com

También podemos hacer que el argumento sea totalmente opcional:

function mostrarCorreo({ correo='desconocido@ejemplo.com', nombre='desconocido' } = {}) {  
  console.log('El correo de ' +  nombre  + ' es ' + correo);
}
mostrarCorreo({ nombre: 'Antonio', correo: 'a.laguna@funcion13.com' });  
// El correo de Antonio es a.laguna@funcion13.com
mostrarCorreo();  
// El correo de desconocido es desconocido@ejemplo.com

Es muy práctico por ejemplo a la hora de separar un objeto en una función:

function obtenerCoordenadas () {  
  return {
    lat: 37.3914105,
    long: -5.9591776
  }
}
let {lat, long} = obtenerCoordenadas()  
console.log(lat); // 37.3914105  
console.log(long); // -5.9591776  

Como ves, desestructurar puede tener algunos casos prácticos bastante útiles y que, además, nos pueden ahorrar algunas líneas de código sin sacrificar legibilidad.

Y tú, ¿usas la desestructuración de alguna otra forma?

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!