Limpiando nuestro código: Destructuring assignment | CourseIt Blog
logo courseit

Limpiando nuestro código: Destructuring assignment

20

Hoy en día la versión estándar de Javascript es la 5.1 pero gracias a babel tenemos la chance de escribir de forma segura funcionalidades de versiones mas nuevas sin tener que pelearnos con problemas de compatibilidad con distintas versiones de los navegadores.

En el articulo de hoy vamos a estar hablando sobre una de las mejores funcionalidades que se implementaron en ES6 (Ecmascript 2015), Destructuring assignment o su horrenda traducción: "Asignación desestructurante".

Lo que vamos a lograr con esta funcionalidad, es extraer datos a distintas variables para no tener la necesidad de repetir partes comunes en distintos tipos de datos como objetos o arrays.

Objetos

Antes de esta funcionalidad, estábamos acostumbrados a manejar los objetos de la siguiente forma:

lo cual si bien a simple vista no parece algo tan malo, se puede mejorar significativamente aplicando "destructuring assignment"

¿Qué fue lo que hicimos? Bueno, en lugar de estar constantemente escribiendo todo nuestro objeto, logramos en una única linea crear múltiples variables reutilizando la parte del objeto que comparten (en este caso, person). Si bien para objetos planos esto puede no resultar una super mejora, si miramos estructuras un poco mas complejas vamos a notar que ahorramos bastante código.

Por ejemplo revisemos este componente de React.

Como pueden ver, ese "conditional render" se vuelve bastante extenso y difícil de leer pero si le aplicamos "destructuring assignment" podemos lograr algo como esto:

Funciones

Esta funcionalidad también se puede aplicar en los parámetros de las funciones lo cual nos va a ayudar a reducir un montón de código de las mismas.

Imaginemos que queremos crear una función que se encargue de calcular el área de un rectángulo (base x altura). Potencialmente, nuestro código se vería de la siguiente forma

Mientras que si aplicamos "destructuring assignment" podríamos reducirlo a lo siguiente:

Arrays

Con los arrays nos vamos a encontrar en una situación muy similar, probablemente menos común pero mas grave a nivel visual.

Imaginemos que queremos crear un array de colores y obtener los 3 primeros valores sin utilizar un bucle. Nuestro código se vería algo así

Pero si le aplicamos "destructuring assignment" podriamos lograr el siguiente resultado

Si llegaste hasta y te gustó el contenido, tenes alguna sugerencia para hacer o bien te quedo alguna duda, podes seguirme en Twitter (https://twitter.com/juanigallo)