Entendiendo Destructuring (Objetos y parametros)

Desestructurar un objeto o un array es una práctica habitual traída por ECMAScript. Es posible que lo hayas visto en tu trabajo, en tutoriales o en código open source, pero, ¿te paraste a entender qué resuelve y cómo 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 función que lo escriba por nosotros

function nombreYRaza(mascota) {
  return mascota.nombre + ', ' + mascota.raza;
}

nombreYRaza(mascotaDeCuarte) // => Gina, Schnauzer

En programación, 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 más que te quiero contar: podemos desestructurar tambien el parametro de la función.

Como sabemos, el parametro "mascota" es un objeto. Le podemos indicar a la función que el objeto que llega en el parámetro tendrá dos propiedades de nuestro interés: "nombre" y raza".

function nombreYRaza({nombre, raza}) {
  return nombre + ', ' + raza;
}

nombreYRaza(mascotaDeCuarte) // => Gina, Schnauzer

Desestructurar nuestra función y sus parametros nos permitió tener una función mucho más limpia y más facil de leer.

Hoy hablamos sobre cómo desestructurar un objeto y el parametro de una función, pero todavía nos quedan temas por ver como Arrays y Desestructuración de valores anidados. Si queres seguir investigando por tu cuenta, podes visitar la MDN

Gracias por leer, hasta la próxima!