This content originally appeared on DEV Community and was authored by Franco Cuarterolo
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!
This content originally appeared on DEV Community and was authored by Franco Cuarterolo
Franco Cuarterolo | Sciencx (2021-09-12T22:06:53+00:00) Entendiendo Destructuring (Objetos y parametros). Retrieved from https://www.scien.cx/2021/09/12/entendiendo-destructuring-objetos-y-parametros/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.