Destructuración en JavaScript

Hola gente de EDteam, soy su amigo y docente digital Jonathan MirCha, siguiendo con la serie de artículos sobre el estándar actual de JavaScript hoy continuaré hablando de la destructuración.

La destructuración es una forma conveniente de extraer múltiples valores de datos almacenados en objetos y arreglos y asignarlos a variables nombradas. Imagina que es lo contrario a construir un objeto o arreglo literal. Esta capacidad es similar a funcionalidades que puedes encontrar en otros lenguajes como Perl y Python.

Por ejemplo, un objeto literal puede declararse así:

1const coordA = {
2  lat: 1,
3  lon: 2
4}

Qué es una abreviatura de:

1const coordsA = {}
2
3coordsA.lat = 1
4coordsA.lon = 2

Podemos extraer o destruir los valores lat y lon del objeto de coordsA con la siguiente sintaxis:

1const { lat: copyLat, lon: copyLon } = coordsA

Entonces ahora tenemos dos variables nuevas llamadas copyLat y copyLon con los valores 1 y 2 respectivamente. Alternativamente, si el nombre de la variable extraída es el mismo que el nombre del parámetro del objeto, la sintaxis puede ser más concisa:

1const {lat, lon} = coordsA

Otra manera de verlo sería:

1let lat = 1
2let lon = 2
3const coordsA = { lat, lon }

A continuación te dejo más ejemplos que puedes ejecutarlos en la consola de tu navegador ?:

1//Destructuración de Arreglos
2let numeros = [1, 2, 3]
3
4//sin destructuración
5let uno = numeros[0],
6  dos = numeros[1],
7  tres = numeros[2]
8
9console.log(numeros, uno, dos, tres) //Imprime [1, 2, 3] 1 2 3
10
11//con destructuración
12let [one, two, three] = numeros
13
14console.log(numeros, one, two, three) //Imprime [1, 2, 3] 1 2 3
15
16//Destructuración de Objetos
17let persona = { nombre: 'Jonathan', apellido: 'MirCha' }
18let { nombre, apellido } = persona
19
20console.log(persona) //Imprime Object {nombre: "Jonathan", apellido: "MirCha"}
21console.log(nombre) //Imprime Jonathan
22console.log(apellido) //Imprime MirCha
23
24let datos = { correo: 'jonmircha@gmail.com', telefono: 5566778899 }
25
26let { correo: email, telefono: phone } = datos
27
28console.log(datos) //Imprime Object {correo: "jonmircha@gmail.com", telefono: 5566778899}
29console.log(email) //Imprime jonmircha@gmail.com
30console.log(phone) //Imprime 5566778899

Parámetros por defecto

Otra buena característica de la destructuración es la capacidad de definir parámetros predeterminados, especialmente para estructuras profundamente anidadas. Por ejemplo, el campo de resultados de la siguiente consulta a un API cualquiera:

1{
2  data: {
3    query: {
4      rows: {
5        results: []
6      }
7    }
8  }
9}

Una solución sería crear una función que realiza una consulta y devuelve los resultados o, si no se encuentra nada, una arreglo vacío. Si tuviéramos que programar a la defensiva y verificar que cada valor anidado exista, el código podría verse más o menos así:

1var results
2
3if( data && data.query && data.query.rows && data.query.rows.results ) {
4  results = data.query.rows.results
5} else {
6  results = []
7}

Sin embargo, mediante la asignación por destructuración, se puede simplificar a:

1const { data: { query: { rows: results = [] } = {} } = {} } = response

Esto se ve mucho mejor. Hay que tener en cuenta que la necesidad de dar al objeto completo un valor predeterminado de un objeto **{}**vacío se debe a que el algoritmo de destructuración no puede emitir un valor indefinido a un objeto ?.

Si no te quedo claro el ejemplo anterior, intenta ejecutar estos ejercicios más sencillos en la consola de tu navegador ?:

1//Antes de ES6
2function pais (nombre) {
3  nombre = nombre || 'Terrestre'
4  console.log(nombre)
5}
6
7pais() //Imprime Terrestre
8pais('México') //Imprime México
9
10//Ahora con ES6
11function pais (nombre = 'Terrestre') {
12  console.log(nombre)
13}
14
15pais() //Imprime Terrestre
16pais('México') //Imprime México

Como ves, gracias a los avances que el estándar de JavaScript ha tenido desde el 2015, ahora podemos tener una sintaxis con más posibilidades como en otros lenguajes de programación.

Recuerda que en EDteam tenemos varios cursos que te introducen y especializan en este maravilloso lenguaje:

En el siguiente capítulo te hablaré de la propagación de parámetros mejor conocida como rest parametersyspread operator.

Artículos anteriores de la serie 'El estándar actual de JavaScript':

Se despide su amigo y docente digital Jonathan MirCha, sean felices, hasta siempre, nos leemos la próxima semana. Bye ?

Destructuración en JavaScript

Parámetros por defecto

Comentarios de los usuarios