top of page

¿Cómo y por qué usar Object Destructuring Assignment? ✨ Hacks de JavaScript 🧑🏻‍💻 MeltStudio

¿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í!


Qué es y cómo usar el object destructuring en javascript
¿Qué es y cómo usar el object destructuring en JavaScript?⭐


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); // 30

Alias de propiedades:

const person = { name: 'John', age: 30 };
const { name: fullName, age: years } = person;

console.log(fullName); // 'John'
console.log(years); // 30

Aquí, { 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 objeto

Otras 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!

meltstudio.co
meltstudio.co

📍 Conéctate con nosotros en instagram👇


21 views

Join our newsletter to receive information about latest technologies trends and job offers

Thanks for subscribing!

bottom of page