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

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 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 ?

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.

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

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

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

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

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 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 ?

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.

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

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

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

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

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 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 ?

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.

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

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

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

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

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 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 ?

Parámetros por defecto

Destructuración en JavaScript

Parámetros por defecto

Destructuración en JavaScript

Parámetros por defecto

¿Qué te pareció el artículo?

Comentarios de los usuarios

Destructuración en JavaScript

Parámetros por defecto

¿Qué te pareció el artículo?

Comentarios de los usuarios

¿Qué te pareció el artículo?

Comentarios de los usuarios

¿Qué te pareció el artículo?

Comentarios de los usuarios