Desestructuración de objetos en

Acerca de Desestructuración de objetos

La desestructuración de objetos es una forma concisa de extraer propiedades de un objeto. Su sintaxis es similar a una expresión de objeto literal, pero en el lado izquierdo de la asignación en lugar del derecho.

const weather = {
  sun: '☀️',
  sun_behind_small_cloud: '🌤️',
  sun_behind_cloud: '⛅',
  sun_behind_large_cloud: '🌥️',
  sun_behind_rain_cloud: '🌦️',
  cloud: '☁️',
  cloud_with_rain: '🌧️',
  cloud_with_snow: '🌨️',
  cloud_with_lightning: '🌩️',
  cloud_with_lightning_and_rain: '⛈️',
};

const { sun, cloud, cloud_with_lightning } = weather;

sun;
// => '☀️'

cloud;
// => '☁️'

cloud_with_lightning;
// => '🌩️'

Renombrar en la asignación

Esta sintaxis puede extraer las propiedades por su clave, como sun, cloud y cloud_with_lightning, pero también puede elegir un nombre distinto para la variable:

const { sun: sunny, cloud: cloudy, cloud_with_rain: rainy } = weather;

typeof cloud_with_rain;
// => 'undefined'

typeof rainy;
// => 'string'

rainy;
// => 🌧️

Tampoco es obligatorio usar todos los valores en la asignación.

Valores predeterminados

La asignación por desestructuración de objetos puede proporcionar valores predeterminados en caso de que no haya ninguno en el objeto de origen:

const { sun = '🌞', tornado = '🌪️', cloud_with_snow: snowy = '❄️' } = weather;

sun;
// => '☀️'

tornado;
// => '🌪️'

snowy;
// => '🌨️'

Observa lo siguiente:

• sun se extrajo del objeto weather sin reemplazarlo, ya que está presente en el objeto weather,
• tornado no existe en el objeto weather, así que se usó el valor predeterminado,
• cloud_with_snow se extrajo como la variable snowy, sin reemplazarlo, ya que cloud_with_snow está presente en el objeto weather.

Desestructurar parámetros de función

El objeto weather tiene muchas propiedades. Es posible extraer directamente una o varias propiedades de este objeto cuando se pasa a una función:

function weatherReport({ sun }) {
  console.log(sun);
}

weatherReport(sun);
// => '☀️'

Desestructurar la iteración for of

Cuando iteras sobre un array (u otro iterable) y los elementos son objetos, es posible desestructurar dentro de la sentencia for (...) of iterable:

const { sun: sunny, cloud: cloudy, cloud_with_rain: rainy } = weather;

const prediction = [
  {
    chance: 0.8,
    weather: sunny,
    description: 'There is a 80% chance it will remain sunny.',
  },
  {
    chance: 0.15,
    weather: cloudy,
    description:
      'There is a 15% chance the clouds will keep the sun from poking through.',
  },
  {
    chance: 0.05,
    weather: rainy,
    description: 'There is a small chance of rain.',
  },
];

for (const { weather: symbol, description } of prediction) {
  console.log(`${symbol}: ${description}`);
}

//  '☀️: There is a 80% chance it will remain sunny.'
// '☁️: There is a 15% chance the clouds will keep the sun from poking through.'
// '🌧️: There is a small chance of rain.'

Conceptos relacionados

array-destructuring rest-and-spread