Pasar al contenido principal
Alexys Lozada
José Luján
Manuel Rodriguez
José Luján
Luis Avilés
Álvaro Felipe
José Luján
Beto Quiroga
Jonathan MirCha
Jonathan MirCha
Álvaro Felipe
Alexys Lozada, Álvaro Felipe, Jonathan MirCha
Beto Quiroga
Alexys Lozada
Alexys Lozada
José Luján
Álvaro Felipe
Álvaro Felipe
Jonathan MirCha
Jonathan MirCha
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Alexys Lozada, José Luján
Camilo Adobe
Álvaro Felipe
José Luján
Jonathan MirCha
Álvaro Felipe
Álvaro Felipe
Beto Quiroga, Alexys Lozada
Álvaro Felipe
Juan Villalvazo
Luis Avilés
Jonathan MirCha
Jonathan MirCha
Jonathan MirCha

Destructuración en JavaScript

Desestructuració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í:

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

Qué es una abreviatura de:

const coordsA = {}

coordsA.lat = 1
coordsA.lon = 2

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

const { 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:

const {lat, lon} = coordsA

Otra manera de verlo sería:

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

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

//Destructuración de Arreglos
let numeros = [1, 2, 3]

//sin destructuración
let uno = numeros[0],
  dos = numeros[1],
  tres = numeros[2]

console.log(numeros, uno, dos, tres) //Imprime [1, 2, 3] 1 2 3

//con destructuración
let [one, two, three] = numeros

console.log(numeros, one, two, three) //Imprime [1, 2, 3] 1 2 3

//Destructuración de Objetos
let persona = { nombre: 'Jonathan', apellido: 'MirCha' }
let { nombre, apellido } = persona

console.log(persona) //Imprime Object {nombre: "Jonathan", apellido: "MirCha"}
console.log(nombre) //Imprime Jonathan
console.log(apellido) //Imprime MirCha

let datos = { correo: 'jonmircha@gmail.com', telefono: 5566778899 }

let { correo: email, telefono: phone } = datos

console.log(datos) //Imprime Object {correo: "jonmircha@gmail.com", telefono: 5566778899}
console.log(email) //Imprime jonmircha@gmail.com
console.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:

{
  data: {
    query: {
      rows: {
        results: []
      }
    }
  }
}

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í:

var results

if( data && data.query && data.query.rows && data.query.rows.results ) {
  results = data.query.rows.results
} else {
  results = []
}

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

const { 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 ?:

//Antes de ES6
function pais (nombre) {
  nombre = nombre || 'Terrestre'
  console.log(nombre)
}

pais() //Imprime Terrestre
pais('México') //Imprime México

//Ahora con ES6
function pais (nombre = 'Terrestre') {
  console.log(nombre)
}

pais() //Imprime Terrestre
pais('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 parameters y spread operator.

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

  1. ECMAScript el estándar de JavaScript
  2. Babel
  3. Variables,Constantes y Niveles de Bloque
  4. Template Strings
  5. Arrow Functions
  6. Objetos Literales

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

Suscríbete al blog de EDteam

Ingresa tu correo electrónico para recibir nuestro boletín semanal