Destructuración en JavaScript

La destructuración nos permite extraer valores de los arrays y objetos de una forma muy cómoda. Esta sintaxis se puede usar desde ES6 y suele ser bastante habitual.

Destructuración en arrays

Imagina que tienes este array:

const lista = [1, 2, 3, 4, 5]

Para extraer los dos primeros números destructurando puedes hacer esto:

const lista = [1, 2, 3, 4, 5]

const [uno, dos] = lista

console.log(`${uno} y ${dos}`) // 1 y 2

Para extraer los números impares tienes que saltarte algunos valores, lo puedes hacer así:

const lista = [1, 2, 3, 4, 5]

const [uno, , tres, , cinco] = lista

console.log(`${uno}, ${tres} y ${cinco}`) // 1, 3, y 5

Añades la coma sin añadir una variable y así te saltas una posición. Puedes saltarte las que quieras:

const lista = [1, 2, 3, 4, 5]

const [, , , cuatro] = lista

console.log(`${cuatro}`) // 4

Imagina que quieres guardar en una variable el primer valor y el resto guardarlo en un array diferente, podrías hacer esto:

const lista = [1, 2, 3, 4, 5]

const [uno, ...elResto] = lista

console.log(`El primero: ${uno} El resto: ${elResto}`) // El primero: 1 El resto: 2,3,4,5

¿Interesante verdad? No me digas que no es mucho más cómo que accediendo posicionalmente de la forma clásica.

Destructuración en objetos

Vamos a ver cómo podemos destructurar objetos a partir de este ejemplo:

const casa = {
  habitaciones: 3,
  m2: 100,
  calle: "Calle Falsa, 123",
  ciudad: "Springfield",
}

Si queremos extraer el número de habitaciones y la calle, haremos esto:

const casa = {
  habitaciones: 3,
  m2: 100,
  calle: "Calle Falsa, 123",
  ciudad: "Springfield",
}

const { habitaciones, calle } = casa

console.log(`En ${calle} hay una casa con ${habitaciones} habitaciones`)
// En Calle Falsa, 123 hay una casa con 3 habitaciones

Es importante que el nombre de las variables coincida con el nombre de la llave en el objeto. Si quieres usar otro nombre, lo haces así:

const casa = {
  habitaciones: 3,
  m2: 100,
  calle: "Calle Falsa, 123",
  ciudad: "Springfield",
}

const { habitaciones: hab, calle: c } = casa

console.log(`En ${c} hay una casa con ${hab} habitaciones`)
// En Calle Falsa, 123 hay una casa con 3 habitaciones

También es posible usar valores por defecto, muy útil cuando alguno de los valores del objeto puede no estar definido:

const casa = {
  habitaciones: 3,
  m2: 100,
  calle: "Calle Falsa, 123",
  ciudad: "Springfield",
}

const { m2, precio = 150000 } = casa

console.log(`El precio de la casa es de ${precio / m2} €/m2`)
// El precio de la casa es de 1500 €/m2

Igual que con los arrays, también puedes guardar una parte en una variable y el resto en otro objeto:

const casa = {
  habitaciones: 3,
  m2: 100,
  calle: "Calle Falsa, 123",
  ciudad: "Springfield",
}

const { habitaciones, ...otrosDatos } = casa

console.log(`La casa tiene  ${habitaciones} habitaciones.`)
console.log(otrosDatos)
// La casa tiene  3 habitaciones.
// {m2: 100, calle: "Calle Falsa, 123", ciudad: "Springfield"}

Muchas veces verás la destructuración de objetos en los parámetros de una función. Puedes hacer esto cuando solo te interesen unas partes y no otras:

const casa = {
  habitaciones: 3,
  m2: 100,
  calle: "Calle Falsa, 123",
  ciudad: "Springfield",
  precio: 150000,
}

// destructuración en los parámetros de entrada
const precioCasa = ({ m2, precio }) => {
  console.log(`El precio de la casa es de ${precio / m2} €/m2`)
}

precioCasa(casa)
// El precio de la casa es de 1500 €/m2

Como puedes ver, en la función precioCasa destructuramos el objeto y nos quedamos solo con lo que nos interesa, aunque pasemos el objeto entero en la llamada de la función.

Es muy importante entender y saber utilizar la destructuración en JavaScript, ya que es algo que se ve muy a menudo, sobre todo si usas frameworks de desarrollo como React.