Cómo escribir código más limpio con JavaScript

Cómo escribir código más limpio con JavaScript

La desestructuración es una de mis herramientas favoritas en JavaScript, en términos simples, la desestructuración le permite descomponer una estructura compleja (como una matriz o un objeto) en partes más simples, aunque tiene un poco más que eso.

Veamos mejor en un ejemplo:

Ahora, algunas personas han estado usando esta función durante algún tiempo, tal vez mientras compilan aplicaciones React, pero no lo entienden del todo, para otros puede ser la primera vez. Así que lo guiaré desde el principio para que al final del artículo tengamos el mismo nivel de comprensión.

Destruyendo objetos

En el ejemplo anterior, toda la magia ocurre en la siguiente línea:

Ahora puede parecer un poco extraño tener esos corchetes como ese en el lado izquierdo de la tarea, pero así es como le decimos a JavaScript que estamos destruyendo un objeto.

Destruir en un objeto le permite vincular diferentes propiedades de un objeto a cualquier profundidad. Comencemos con un ejemplo aún más simple:

En el caso anterior, estamos declarando una variable llamada name que se inicializará desde la propiedad con el mismo nombre en el objeto me, de modo que cuando evaluamos el valor de name obtenemos Juan. Este mismo método se puede aplicar a cualquier profundidad, a lo que volvemos a nuestro ejemplo:

por title y rating es exactamente lo mismo que ya explicamos, pero en author, las cosas son un poco diferentes. Cuando llegamos a una propiedad que es un objeto o una matriz, podemos elegir si crear una variable author con una referencia a la article.author objeto, o podemos hacer una desestructuración profunda y obtener acceso inmediato a las propiedades del objeto interno.

Accediendo a la propiedad del objeto

Hacer una desestructuración profunda o anidada

¿Esperar lo? Si destruyo author, ¿por qué no está definido? Lo que está sucediendo es realmente simple. Cuando le pedimos a JavaScript que destruya el author objeto, ese enlace en sí no se crea y en su lugar tenemos acceso a todos los author propiedades que seleccionamos. Así que por favor recuerda eso siempre.

Operador de propagación (…)

Además, podemos usar el operador de propagación ... para crear un objeto con todas las propiedades que no se destruyeron.

Si está interesado en saber cómo hacer esto, consulte mi artículo anterior sobre Operador extendido en JavaScript.

Renombrar propiedades

Una gran propiedad de la destrucción es la capacidad de elegir un nombre diferente para la variable de la propiedad que estamos extrayendo. Veamos el siguiente ejemplo:

Mediante el uso : en una propiedad podemos proporcionarle un nuevo nombre, en nuestro caso newName. Entonces podemos acceder a esa variable en nuestro código. Es importante notar que una variable con la propiedad original name en nuestro caso, el nombre no se definirá.

Propiedades faltantes

Entonces, ¿qué pasaría si intentamos desestructurar una propiedad que no está definida en nuestro objeto?

En este caso, la variable se crea con valor undefined.

Valores predeterminados

Ampliando las propiedades faltantes, es posible asignar un valor predeterminado para cuando la propiedad no existe, veamos algunos ejemplos de esto:

En el ejemplo anterior, demostramos algunos ejemplos de asignación de valores predeterminados a nuestras destrucciones. Los valores predeterminados solo se asignan cuando la propiedad es undefined. Si el valor de la propiedad es por ejemplo null o un string no se asignará el valor predeterminado, sino el valor real de la propiedad.

Desestructuración de matrices e iterables

Ya vimos algunos ejemplos de objetos de desestructuración, pero lo mismo puede aplicarse a matrices o iterables en general. Comencemos con un ejemplo:

El ejemplo se explica por sí mismo cuando necesitamos destruir una matriz que necesitamos usar () en vez de {}, y podemos asignar cada posición de la matriz con una variable diferente. Pero también hay algunos buenos trucos.

Saltar elementos

Al usar el , operador, podemos omitir algunos elementos del iterable de la siguiente manera:

Observe cómo dejarlo vacío entre , se saltea los elementos. Esto puede ser sutil pero tiene grandes consecuencias en los resultados finales. También puede usar el operador de propagación ... como sigue:

En este caso, z será obtener todos los valores después b como una matriz O tal vez tenga una necesidad más específica y desee destruir posiciones específicas en la matriz, no hay problema, JavaScript lo cubrió:

Si destruimos una matriz como si fuera un objeto, podemos usar los índices como propiedades y así acceder a cualquier posición dentro de la matriz.

Propiedades faltantes

Como fue el caso de los objetos, también es posible establecer valores predeterminados para elementos indefinidos en la matriz. Veamos algunos ejemplos:

Para destruir matrices, también es posible establecer valores predeterminados para undefined propiedades, sin embargo, no es posible establecer un valor predeterminado cuando tenemos el operador de propagación ..., que en el caso de undefined, devolverá una matriz vacía.

Intercambio de variables

Este es un caso de uso divertido de desestructuración, 2 variables se pueden intercambiar en una sola expresión:

Desestructuración con propiedades calculadas

Hasta ahora, cada vez que queríamos destruir las propiedades de un objeto, o los elementos de un iterable, usábamos claves estáticas. Si queremos claves dinámicas (como las almacenadas en una variable) necesitamos usar propiedades calculadas.

Aquí hay un ejemplo:

Bastante impresionante, ¿verdad? Mediante el uso de una variable entre (), podemos evaluar su valor antes de realizar la asignación y, por lo tanto, es posible realizar una desestructuración dinámica. Sin embargo, es obligatorio proporcionar un nombre para esta nueva variable.

Argumentos de función de desestructuración

Las variables de destrucción se pueden colocar en cualquier lugar donde podamos declarar variables. Por ejemplo usando let, const o var, pero también es posible deconstruir en argumentos de función. Aquí hay un ejemplo simple del concepto:

Como puede ver, es muy simple y elegante y utiliza las mismas reglas que hemos discutido anteriormente.

La desestructuración puede parecer incómoda al principio, pero una vez que te acostumbras, no hay vuelta atrás. Realmente puede ayudar a que su código sea más legible.

Esta artículo fue publicado originalmente en Transmisión de código en vivo por Juan cruz martinez, fundador y editor de Live Code Stream, emprendedor, desarrollador, autor, orador y hacedor de cosas. Puedes seguir a Juan en Twitter. aquí.

Transmisión de código en vivo también está disponible como un boletín semanal gratuito. Regístrese para recibir actualizaciones sobre todo lo relacionado con la programación, la inteligencia artificial y la informática en general.

Pssst, ¡hola!

¿Desea recibir el boletín técnico diario más atrevido todos los días, en su bandeja de entrada, GRATIS? Por supuesto que sí: regístrate en Big Spam aquí.

Deja un comentario