3 ejemplos prácticos del uso de la desestructuración en JavaScript

Escribir un limpiador de código usando patrones de desestructuración

Probablemente ya esté familiarizado con la reestructuración en JavaScript. Nos llegó en 2015 en la especificación ES6 , pero si necesita actualizar sus conocimientos, en el sitio web de Mozilla puede leer un gran artículo detallado sobre cómo funciona todo .

Pero saber cómo funciona no es lo mismo que saber cómo usarlo. ¡Aquí hay tres patrones para ayudarlo a hacer que su código sea más limpio, más confiable y más fácil de leer!

1. Argumentos de funciones nombradas

Los argumentos con nombre son una forma alternativa de manejar parámetros de función para argumentos posicionales. En lugar de especificar argumentos en un orden bien definido, simplemente proporcione su nombre. En Python, por ejemplo, se ve así:

def sum(a=1,b=2,c=3): return a+b+c sum(b=5,a=10) 

¿Ves? El orden no es importante si especificó explícitamente el nombre del parámetro. Las ventajas sobre los argumentos posicionales son que:

1. Puede omitir uno o más parámetros al llamar a una función
2. El orden al pasar los argumentos ahora no es importante
3. El código se ha vuelto más legible

Aunque los argumentos con nombre nativo no son compatibles con JavaScript, podemos usar el patrón de desestructuración para lograr las tres ventajas anteriores. Este será el último ejemplo ya en JavaScript:

 function sum({a = 1, b = 2, c = 3}) { return a + b + c } sum({b: 10, a: 5}) // 5 + 10 + 3 = 18 

Se han alcanzado todos los objetivos: puede omitir c , el orden ahora no es importante y los argumentos van seguidos de sus propios nombres. Todo esto es posible precisamente debido a la desestructuración.

2. Análisis de respuesta del servidor más limpio

A menudo, en la respuesta del servidor, solo nos interesa un bloque de datos o incluso un solo valor específico de este bloque. Si este es su caso, utilice la desestructuración para ignorar todo lo que el servidor generalmente envía. Un ejemplo:

 function mockServerCall () { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ 'status': 200, 'content-type': 'application/json', 'data' : { dataOfInterest: 42 } }) }, 250) }) } mockServerCall() .then(({data: { dataOfInterest = 100 }}) => { console.log(dataOfInterest) // 42 (    100) }) 

Este patrón le permite extraer los datos que nos interesan a medida que se analizan los argumentos. Y tiene la oportunidad de ajustar los valores predeterminados como un bono. Lo que sin problemas nos lleva al siguiente patrón ...

Establecer valores predeterminados durante la asignación

Si una variable no existe en el espacio de nombres, a menudo necesitamos establecerla en su valor predeterminado.

Antes de que llegara la desestructuración, podría hacer algo como esto:

 //      var nightMode = userSettings.nightMode || false 

Pero este enfoque requerirá una línea de código para cada tarea. La desestructuración te permitirá hacer todo de una sola vez:

 const userSettings = {nightMode: true, fontSize: 'large'} const { nightMode = false, language = 'en', fontSize = 'normal' } = userSettings console.log(nightMode) // true console.log(language) // 'en' console.log(fontSize) // 'large' 

Este patrón se puede utilizar para establecer el estado de los componentes React!

¡Espero que estos patrones sean útiles! Para leer más sobre la desestructuración, siga los enlaces a continuación (información en inglés - aprox. Transl.) :

ES6 en profundidad: Desestructuración

Aprenda los conceptos básicos de la desestructuración de accesorios en React