Déstructuration d'objet en

À propos de Déstructuration d'objet

La déstructuration d'objet est un moyen concis d'extraire les propriétés d'un objet. Sa syntaxe ressemble à celle d'un littéral d'objet, mais elle se place du côté gauche de l'affectation plutôt qu'à droite.

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;
// => '🌩️'

Renommage lors de l'affectation

Cette syntaxe permet d'extraire les propriétés par leur clé, comme sun, cloud et cloud_with_lightning, mais aussi de choisir un autre nom pour la variable :

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

typeof cloud_with_rain;
// => 'undefined'

typeof rainy;
// => 'string'

rainy;
// => 🌧️

Rien n'oblige non plus à utiliser toutes les valeurs dans l'affectation.

Valeurs par défaut

L'affectation par déstructuration d'objet peut fournir des valeurs par défaut lorsque l'objet source n'en contient pas :

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

sun;
// => '☀️'

tornado;
// => '🌪️'

snowy;
// => '🌨️'

On observe ce qui suit :

• sun a été extrait de l'objet weather sans être remplacé, car il est présent dans l'objet weather,
• tornado n'existe pas dans l'objet weather, donc la valeur par défaut a été utilisée,
• cloud_with_snow a été extrait sous la variable snowy, sans être remplacé, car cloud_with_snow est présent dans l'objet weather,

Déstructuration des paramètres d'une fonction

L'objet weather possède beaucoup de propriétés. Il est possible d'extraire directement une ou plusieurs propriétés de cet objet lorsqu'il est passé à une fonction :

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

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

Déstructuration dans une itération for of

Lorsqu'on parcourt un array (ou tout autre itérable) dont les éléments sont des objets, il est possible de déstructurer directement dans l'instruction 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.'

Concepts associés

array-destructuring rest-and-spread