Destructuring Assignment en Javascript

Javascript

Las sintaxis por destructuring assignment vendría a ser lo que llamamos extracción de los datos de arreglos u objetos trabajando con una sintaxis similar a la construcción de arrays y objetos literales, estos paquetes de datos una ves creados puedes usarlos dentro de tu código cuando así lo requieras.

Destructurar un Array

Por ejemplo si tenemos una variable foo con 3 datos uno, dos y tres al estar aun sin destructurarse estos datos pueden ser 3 datos separados, pero los podemos destructurar para darle un mejor orden, ahorro de línea de código y más limpieza

También podemos devolver múltiples valores en una función mediante destructuring assignment, aunque en Javascript siempre es posible exportar un array, con destructuring assignment eso es más sencillo por ejemplo si tenemos la siguiente función llamada postres y me retorna 3 valores

Ignorando valores de retorno

Por otro lado si necesitas ignorar un o unos de lo valores de retorno solo debes hacer lo siguiente

En el código anterior estamos ignorando el segundo valor es decir al exportar un array a = 1, b = 2 y c = 3, pero como estamos ignorando el segundo elemento del array no lo imprime, solo imprime el primer y segundo elemento.

Si queremos ignorar todos los datos del array solo escribimos

Extraer valores de una Expresión regular

Si usamos el metod exec() para trabajar con una expresión regular y extraer el protocolo de conexion de una url, podemos ver que discrimina parte del nombre del dominio y nos imprime http

Con Destructuring Assignment extraemos facilmente esa parte del array ignorando todo el valor de la url.

Destructurar un Objeto

Por ejemplo tenemos la variable o y la variable que le sigue abajo hereda sus valores, destructurando logramos asignarle nuevos nombres a las variables y mostramos los valores heredados de las variables anteriores

Destructuring assignment sin declaración

Podemos hacerlo deferente sin declarar en la sentencia de asignación

Destructuring de Objetos Anidados

Si tenemos datos anidados (Nested Objects) tambien podemos destructurarlos como en el siguiente ejemplo

Interactuando con For en un destructuring

Para trabajar con el bucle For puedes ver el siguiente ejemplo

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.

 

 

 

 

 

 

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required