BBDD

Appearance

Desestructuración de datos ​

La desestructuración es una forma de extraer datos de un objeto o array y asignarlos a variables.

Normalmente, cuando queremos acceder a los datos de un objeto o array, lo hacemos de la siguiente forma:

javascript
const persona = {
  nombre: 'Juan',
  apellido: 'Perez',
  edad: 30,
  direccion: {
    calle: 'Av. Siempre Viva',
    numero: 742
  }
}

console.log(persona.nombre)
const calle = persona.direccion.calle
const numero = persona.direccion.numero
console.log(calle, numero)
const persona = {
  nombre: 'Juan',
  apellido: 'Perez',
  edad: 30,
  direccion: {
    calle: 'Av. Siempre Viva',
    numero: 742
  }
}

console.log(persona.nombre)
const calle = persona.direccion.calle
const numero = persona.direccion.numero
console.log(calle, numero)

Sin embargo, acceder a varios elementos de esta forma puede ser tedioso y propenso a errores. Por ejemplo, si quisieramos acceder a la calle y al número de la dirección de una persona, tendríamos que escribir persona.direccion.calle y persona.direccion.numero respectivamente. Si nos equivocamos en la escritura de alguna de estas propiedades, obtendremos undefined como resultado.

La desestructuración nos permite extraer los datos de un objeto o array y asignarlos a variables, de la siguiente forma:

javascript
const persona = {
  nombre: 'Juan',
  apellido: 'Perez',
  edad: 30,
  direccion: {
    calle: 'Av. Siempre Viva',
    numero: 742
  }
}

const { nombre, apellido, edad } = persona
console.log(nombre, apellido, edad)

const { calle, numero } = persona.direccion
console.log(calle, numero)
const persona = {
  nombre: 'Juan',
  apellido: 'Perez',
  edad: 30,
  direccion: {
    calle: 'Av. Siempre Viva',
    numero: 742
  }
}

const { nombre, apellido, edad } = persona
console.log(nombre, apellido, edad)

const { calle, numero } = persona.direccion
console.log(calle, numero)

Desestructuración de arrays ​

La desestructuración también puede ser utilizada con arrays. En este caso, los elementos del array son asignados a las variables en el orden en el que se encuentran.

javascript
const posJugador = [2,20]

const [x, y] = posJugador

console.log(x, y)
const posJugador = [2,20]

const [x, y] = posJugador

console.log(x, y)

Desestructuración de argumentos ​

La desestructuración también puede ser utilizada con los argumentos de una función a la hora de crearlas. En este caso, los argumentos son asignados a las variables en el orden en el que se encuentran

javascript
const persona = {
  nombre: 'Juan',
  apellido: 'Perez',
  edad: 30,
  direccion: {
    calle: 'Av. Siempre Viva',
    numero: 742
  }
}

function saludar({ nombre, apellido, edad }) {
  console.log(`Hola, mi nombre es ${nombre} ${apellido} y tengo ${edad} años`)
}

saludar(persona)
const persona = {
  nombre: 'Juan',
  apellido: 'Perez',
  edad: 30,
  direccion: {
    calle: 'Av. Siempre Viva',
    numero: 742
  }
}

function saludar({ nombre, apellido, edad }) {
  console.log(`Hola, mi nombre es ${nombre} ${apellido} y tengo ${edad} años`)
}

saludar(persona)

Esta funcionalidad es muy útil cuando queremos pasar un objeto como argumento a una función, ya que nos permite acceder a sus propiedades sin tener que escribir objeto.propiedad cada vez, aunque perdemos la posibilidad de asignar valores por defecto a los argumentos.

Desestructuración de argumentos con valores por defecto ​

Si queremos asignar valores por defecto a los argumentos de una función, podemos hacerlo de la siguiente forma:

javascript
function saludar({ nombre = 'Juan', apellido = 'Perez', edad = 20 }) {
  console.log(`Hola, mi nombre es ${nombre} ${apellido} y tengo ${edad} años`)
}

saludar(persona)
function saludar({ nombre = 'Juan', apellido = 'Perez', edad = 20 }) {
  console.log(`Hola, mi nombre es ${nombre} ${apellido} y tengo ${edad} años`)
}

saludar(persona)

Desestructuración de argumentos con valores por defecto y asignación de alias ​

También podemos asignar alias a las variables que extraemos de un objeto o array, de la siguiente forma:

javascript
function saludar({ nombre: nombrePersona = 'Juan', apellido: apellidoPersona = 'Perez', edad: edadPersona = 20 }) {
  console.log(`Hola, mi nombre es ${nombrePersona} ${apellidoPersona} y tengo ${edadPersona} años`)
}

saludar(persona)
function saludar({ nombre: nombrePersona = 'Juan', apellido: apellidoPersona = 'Perez', edad: edadPersona = 20 }) {
  console.log(`Hola, mi nombre es ${nombrePersona} ${apellidoPersona} y tengo ${edadPersona} años`)
}

saludar(persona)

Desestructuración de argumentos con valores por defecto y asignación de alias y valores por defecto ​

También podemos combinar las dos funcionalidades anteriores, de la siguiente forma:

javascript
function saludar({ nombre: nombrePersona = 'Juan', apellido: apellidoPersona = 'Perez', edad: edadPersona = 20 } = {}) {
  console.log(`Hola, mi nombre es ${nombrePersona} ${apellidoPersona} y tengo ${edadPersona} años`)
}

saludar()
function saludar({ nombre: nombrePersona = 'Juan', apellido: apellidoPersona = 'Perez', edad: edadPersona = 20 } = {}) {
  console.log(`Hola, mi nombre es ${nombrePersona} ${apellidoPersona} y tengo ${edadPersona} años`)
}

saludar()