¿Ya conocías la Desestructuración en JavaScript? Acá te explicamos qué es y cómo funciona en objetos y sobretodo ¿Cómo sirve realmente y cómo puede ayudarte a escribir un código más eficiente? 📝👀 ¡Los detalles aquí!
Hablemos de la #Destructuración en JavaScript 👉🏻 Esta es una característica poderosa que permite "desempacar" o sacar los valores de los arrays u objetos y sus propiedades en distintas variables de una forma más concisa.
¡Te lo cuento en este nuevo blog!
En los blogposts de MeltStudio encuentras #Dev tips de JavaScript y de paso te cuento ¿cómo funcionan? y ¿dónde puedes usarlos? 📝👀 ¡Los detalles aquí!
Desestructuración o Destructuring en JS:
En JavaScript, el destructuring en objetos te permite extraer propiedades de un objeto y asignarlas a variables individuales.
Asignación básica:
const person = { name: 'John', age: 30 };
const { name, age } = person;
console.log(name); // 'John'
console.log(age); // 30Alias de propiedades:
const person = { name: 'John', age: 30 };
const { name: fullName, age: years } = person;
console.log(fullName); // 'John'
console.log(years); // 30Aquí, { name: fullName, age: years } es la sintaxis del object destructuring que se está dando al asignar valores al objeto person y a las variables correspondientes.
Valores por defecto:
const person = { name: 'John' };
const { name, age = 25 } = person;
console.log(name); // 'John'
console.log(age); // 25 (valor por defecto)La desestructuración puede usarse de forma anidada, es decir hacer un destructuring dentro de otro destructuring. También puedes combinar la desestructuración de objetos y arrays para manejar estructuras de datos más complejas.
¿Por qué usar Object Destructuring en JS?
En el objeto person con las propiedades anteriores, tenemos:
const persona = { name: 'John', age: 25, city: 'ExampleCity', };Usando destructuring extraes las propiedades directamente sin nombrar de nuevo al objeto:
const { name, age, city } = person;
console.log(name); // 'John'
console.log(age); // 25
console.log(city); // 'ExampleCity'jemploCity'
Acá hay una comparación de por qué tu código será más conciso al extraer exactamente las propiedades que necesitas de un objeto, en lugar de acceder a ellas varias veces.
// Sin destructuring
const nombre = persona.nombre;
const edad = persona.edad;
// Con destructuring
const { nombre, edad } = persona;Además, puedes asignar variables con diferentes nombres y valores por defecto en una sola línea.
const { nombre: n, edad = 30 } = persona;
console.log(n); // 'John'
console.log(edad); // 25 (valor original) o 30 si no hay edad en el objetoOtras de las ventajas es que puedes usar destructuring en funciones para hacer que tus parámetros sean más legibles y explícitos.
function imprimirDetalles({ name, age }) {
console.log('${name} tiene ${age} años');
}
imprimirDetalles(person);¿El Object Destructuring mejora la Complejidad de la Notación BigO?
La complejidad de la notación Big O generalmente no se ve afectada por el uso de destructuring, la complejidad sigue dependiendo de la operación específica que estés realizando, no de cómo desempacas los datos.
Si bien puede haber ligeras variaciones en el rendimiento, el impacto poderoso se da al hacer que tu código sea más legible, conciso y fácil de entender. Además, de rápido de escribir ⭐.
¿Dónde Practicar Algoritmos?
Este TOP 5, publicado también en nuestras redes sociales (que por cierto, ¡síguenos! sacamos tips de desarrollo todas las semanas) recopila las mejores plataformas 2023 para practicar algoritmos 🏻✨, con opción gratuita, path de estudios y algunas en español ¡dale click! 👌🏻
[Pronto] Conoce también Ideas para tu Portafolio Dev 💼 Proyectos Open-Source que son un súper boost en tu hoja de vida como developer🧑🏻💻 Además, practicarás temas actuales de programación y desarrollo... 😎
¡Gracias por leer!
📍 Conéctate con nosotros en instagram👇