Entendiendo Destructuring (Objetos y parametros)

Desestructurar un objeto o un array es una prctica habitual trada por ECMAScript. Es posible que lo hayas visto en tu trabajo, en tutoriales o en cdigo open source, pero, te paraste a entender qu resuelve y cmo aprovechar esta funcionalidad?

Desestructurar un objeto o un array significa elegir un pedacito del mismo y asignarlo a una variable

Empecemos con un objeto que describe a una de mis perras:

const mascotaDeCuarte = { nombre: "Gina", edad: 3, raza: "Schnauzer", pelaje: "Sal y pimienta" hermanos: ["Maggie", "Ragnar", "Mara", "Clarita", "Milo", "Tinta"]};

El problema es que en la veterinaria me pidieron nombre y raza, para eso vamos a escribir una funcin que lo escriba por nosotros

function nombreYRaza(mascota) {  return mascota.nombre + ', ' + mascota.raza;}nombreYRaza(mascotaDeCuarte) // => Gina, Schnauzer

En programacin, tenemos un principio llamado "Don't Repeat Yourself (No te repitas)", y en este caso estamos repitiendo la palabra "mascota" tres veces de una forma totalmente innecesaria.

Ahora es donde podemos empezar a aplicar destructuring. Sabemos que "mascotaDeCuarte" cuenta con dos propiedades: "nombre" y "raza". Desestructurar nos permite tomar estos valores y asignarlos a variables de igual nombre:

function nombreYRaza(mascota) {  const {nombre, raza} = mascota  return nombre + ', ' + raza;}nombreYRaza(mascotaDeCuarte) // => Gina, Schnauzer

Ya aprendimos a desestructurar un objeto, pero hay algo ms que te quiero contar: podemos desestructurar tambien el parametro de la funcin.

Como sabemos, el parametro "mascota" es un objeto. Le podemos indicar a la funcin que el objeto que llega en el parmetro tendr dos propiedades de nuestro inters: "nombre" y raza".

function nombreYRaza({nombre, raza}) {  return nombre + ', ' + raza;}nombreYRaza(mascotaDeCuarte) // => Gina, Schnauzer

Desestructurar nuestra funcin y sus parametros nos permiti tener una funcin mucho ms limpia y ms facil de leer.

Hoy hablamos sobre cmo desestructurar un objeto y el parametro de una funcin, pero todava nos quedan temas por ver como Arrays y Desestructuracin de valores anidados. Si queres seguir investigando por tu cuenta, podes visitar la MDN

Gracias por leer, hasta la prxima!