Entendiendo la asignación por destructuring en JavaScript

Destructuring es una de las más poderosas características añadidas al lenguaje en ES2015, una característica que nos facilita las cosas y hace nuestro código más legible.

Este contenido lo publiqué primero en mi newsletter, la semana después de publicar el newsletter publico en mi blog, si quieres ser el primero en leer suscríbete

Destructuring nos da una manera de extraer datos de objetos o arreglos y asignarlos a variables.

Arrays

Imaginemos que asignamos un array con tres elementos

const array = [‘pato’, ‘ganzo’, ‘pollo’];

Si en ES5 quisiéramos asignar los valores a variables deberíamos hacerlo de la manera

var primer = array[0];

var segundo = array[1];

var tercero = array[2];

Pero con la función de destructuring en ES2015 lo haríamos de la manera:

const [a,b,c] = array;
// a = 'pato'
// b = 'ganzo'
// c = 'pollo

Genial! Bastante más simple y legible, pero que tal si quisiéramos ignorar un elemento, podríamos realizar la asignación de la siguiente forma:

const [a,,c] = array;

// a = 'pato'
// c = 'pollo'

Existe un caso de uso bastante útil, imagina que tienes dos variables y deseas intercambiar su valor, en ES5 tendríamos que crear una variable temporal para esto, pero con destructuring bastaría con hacer:

let x = 2;
let y = 5;

[x,y] = [y,x];

// x = 5
// y = 2

Bastante más útil y legible, ¿cierto?

¿Crees que podría funcionar en arrays que son retornados por una función? que tal si lo pruebas y me cuentas.

Codigo de los ejemplos en jsbin.com

Objetos

Así como con los arrays, con objetos también podemos utilizar las características de destructuring, imaginemos un objeto de la forma

const objeto = {
  a: ‘casa’,
  b: ‘apartamento’
};

Como asignariamos las propiedades de_ objeto_ a variables en ES5

var a = objeto.a;
var b = objeto.b;

Con destructuring en ES2015, lo hariamos asi

const {a,b} = objeto;

//a = 'casa'
//b = 'apartamento'

Si quisiéramos asignar las propiedades del objeto, con nombres de variable diferentes, lo hacemos de la forma

const {a:uno,b:dos} = objeto;

//uno = 'casa'
//dos = 'apartamento'

Sabiendo esto, hagamos algo útil.

Valores por defecto en funciones

Si tenemos una función que recibe un objeto como parámetro y quisiéramos establecer valores por defecto en ES5 lo hariamos asi

function hablar(datos){
  datos = datos === undefined ? {} : opciones;
  nombre = datos.nombre === undefined ? ‘Yeison’ : opciones.nombre;
  pais = datos.pais === undefined ? ‘colombia’ : opciones.pais;

  console.log(‘Hola soy ‘ + nombre + ‘ y vivo en ‘ + pais);
}

hablar();

No se ve del todo bien ¿cierto?, pero con destructuring podríamos hacer algo así:

function hablar({nombre = ‘yeison’, pais =’colombia’} = {}){
  console.log(`Hola soy ${nombre} y vivo en ${pais}`);
}

//Hola soy yeison y vivo en colombia

Es bastante más legible, y si quisiéramos imprimir otros valores, simplemente pasamos como parámetro de la función un objeto con los valores de las propiedades que queremos

hablar({
  nombre: ‘felipe’,
  pais: ‘argentina’
}); 

//Hola soy felipe y vivo en argentina

Código ejemplos con objetos en jsbin.com

Manejando objetos anidados

const yeison = {
  id: 27,
  user: ‘yeion7’,
  datos: {
  nombre: ‘Yeison’,
  apellido: ‘Daza’,
  edad: ‘22’
  }
}

function decirNombre(
  {
    user: nickName, 
    datos:{ nombre: primerNombre }
  }) {
  
    console.log(`El usuario ${nickName} se llama ${primerNombre}`);
}

decirNombre(yeison);

objeto anidado Ver código del ejemplo en jsbin.com

¿Crees que pudieras utilizarlo en bucles? que tal si lo intentas y me cuentas como lo haces.